Added title to each shapes in the gallery

Lemoncode · Aug 15, 2024 · 98bc94b · 98bc94b
1 parent d35e7c6
commit 98bc94b
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 2 deletions.
diff --git a/src/common/components/gallery/gallery-component.module.css b/src/common/components/gallery/gallery-component.module.css
@@ -5,4 +5,5 @@
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
+  flex-direction: column;
 }
diff --git a/src/common/components/gallery/gallery-component.tsx b/src/common/components/gallery/gallery-component.tsx
@@ -2,6 +2,7 @@ import { ItemComponent } from './components/item-component';
 import { ItemInfo } from './components/model';
 import React from 'react';
 import classes from './gallery-component.module.css';
+import { ShapeDisplayName, ShapeType } from '@/core/model';
 
 interface Props {
   itemCollection: ItemInfo[];
@@ -11,10 +12,12 @@ export const GalleryComponent: React.FC<Props> = props => {
   const { itemCollection } = props;
 
   return (
-    // TODO: Move Style to Sass
     <div className={classes.container}>
       {itemCollection.map(item => (
-        <ItemComponent key={item.type} item={item} />
+        <>
+          <ItemComponent key={item.type} item={item} />
+          <p>{ShapeDisplayName[item.type as ShapeType]}</p>
+        </>
       ))}
     </div>
   );

diff --git a/src/core/model/index.ts b/src/core/model/index.ts
@@ -37,6 +37,36 @@ export type ShapeType =
   | 'circle'
   | 'star';
 
+export const ShapeDisplayName: Record<ShapeType, string> = {
+  combobox: 'Combobox',
+  input: 'Input',
+  button: 'Button',
+  checkbox: 'Checkbox',
+  textarea: 'Textarea',
+  toggleswitch: 'Toggle Switch',
+  progressbar: 'Progress Bar',
+  listbox: 'List Box',
+  datepickerinput: 'Date Picker Input',
+  browser: 'Browser',
+  timepickerinput: 'Time Picker Input',
+  mobilePhone: 'Mobile Phone',
+  tablet: 'Tablet',
+  label: 'Label',
+  radiobutton: 'Radio Button',
+  rectangle: 'Rectangle',
+  videoPlayer: 'Video Player',
+  diamond: 'Diamond',
+  line: 'Line',
+  accordion: 'Accordion',
+  pie: 'Pie',
+  breadcrumb: 'Breadcrumb',
+  map: 'Map',
+  circle: 'Circle',
+  star: 'Star',
+  postit: 'Post-it',
+  'horizontal-menu': 'Horizontal Menu',
+};
+
 export type EditType = 'input' | 'textarea';
 
 export type ShapeRefs = {