Move favicon designer presets to JSON

src/components/FaviconDesigner/constants.ts

@@ -8,41 +8,41 @@ import {
   TextT,
   Image as ImageIcon,
 } from '@phosphor-icons/react'
-import { FaviconDesign } from './types'
+import presets from '../../data/favicon-designer-presets.json'
+import { FaviconDesign, FaviconElement } from './types'
 
-export const PRESET_SIZES = [16, 32, 48, 64, 128, 256, 512]
+type ElementTypePreset = {
+  value: FaviconElement['type']
+  label: string
+}
 
-export const ELEMENT_TYPES = [
-  { value: 'circle', label: 'Circle', icon: CircleNotch },
-  { value: 'square', label: 'Square', icon: Square },
-  { value: 'triangle', label: 'Triangle', icon: Triangle },
-  { value: 'star', label: 'Star', icon: Star },
-  { value: 'heart', label: 'Heart', icon: Heart },
-  { value: 'polygon', label: 'Polygon', icon: Polygon },
-  { value: 'text', label: 'Text', icon: TextT },
-  { value: 'emoji', label: 'Emoji', icon: ImageIcon },
-]
+type IconComponent = typeof CircleNotch
+
+type ElementTypeValue = ElementTypePreset['value']
+
+const ELEMENT_TYPE_ICONS: Record<ElementTypeValue, IconComponent> = {
+  circle: CircleNotch,
+  square: Square,
+  triangle: Triangle,
+  star: Star,
+  heart: Heart,
+  polygon: Polygon,
+  text: TextT,
+  emoji: ImageIcon,
+}
+
+const elementTypePresets = presets.elementTypes as ElementTypePreset[]
+const defaultDesignPreset = presets.defaultDesign as FaviconDesign
+
+export const PRESET_SIZES = presets.presetSizes
+
+export const ELEMENT_TYPES = elementTypePresets.map((preset) => ({
+  ...preset,
+  icon: ELEMENT_TYPE_ICONS[preset.value],
+}))
 
 export const DEFAULT_DESIGN: FaviconDesign = {
-  id: 'default',
-  name: 'My Favicon',
-  size: 128,
-  backgroundColor: '#7c3aed',
-  elements: [
-    {
-      id: '1',
-      type: 'text',
-      x: 64,
-      y: 64,
-      width: 100,
-      height: 100,
-      color: '#ffffff',
-      rotation: 0,
-      text: 'CF',
-      fontSize: 48,
-      fontWeight: 'bold',
-    },
-  ],
+  ...defaultDesignPreset,
   createdAt: Date.now(),
   updatedAt: Date.now(),
 }

src/data/favicon-designer-presets.json

@@ -0,0 +1,36 @@
+{
+  "presetSizes": [16, 32, 48, 64, 128, 256, 512],
+  "elementTypes": [
+    { "value": "circle", "label": "Circle" },
+    { "value": "square", "label": "Square" },
+    { "value": "triangle", "label": "Triangle" },
+    { "value": "star", "label": "Star" },
+    { "value": "heart", "label": "Heart" },
+    { "value": "polygon", "label": "Polygon" },
+    { "value": "text", "label": "Text" },
+    { "value": "emoji", "label": "Emoji" }
+  ],
+  "defaultDesign": {
+    "id": "default",
+    "name": "My Favicon",
+    "size": 128,
+    "backgroundColor": "#7c3aed",
+    "elements": [
+      {
+        "id": "1",
+        "type": "text",
+        "x": 64,
+        "y": 64,
+        "width": 100,
+        "height": 100,
+        "color": "#ffffff",
+        "rotation": 0,
+        "text": "CF",
+        "fontSize": 48,
+        "fontWeight": "bold"
+      }
+    ],
+    "createdAt": 0,
+    "updatedAt": 0
+  }
+}