split name and preview in grid item

netgroup-polito · Jan 12, 2024 · 58fa881 · 58fa881
1 parent 17d7369
commit 58fa881
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/frontend/src/components/workspaces/Grid/WorkspaceGrid/WorkspaceGrid.tsx b/frontend/src/components/workspaces/Grid/WorkspaceGrid/WorkspaceGrid.tsx
@@ -22,6 +22,12 @@ const WorkspaceGrid: FC<IWorkspaceGridProps> = ({ ...props }) => {
           />
         </div>
       ))}
+      <WorkspaceGridItem
+        id={-2}
+        title="+ Add Workspace"
+        isActive={selectedWs === -2}
+        onClick={onClick}
+      />
     </div>
   );
 };

diff --git a/frontend/src/components/workspaces/Grid/WorkspaceGridItem/WorkspaceGridItem.tsx b/frontend/src/components/workspaces/Grid/WorkspaceGridItem/WorkspaceGridItem.tsx
@@ -8,11 +8,16 @@ export interface IWorkspaceGridItemProps {
   title: string;
   isActive: boolean;
   badgeValue?: number;
+  previewName?: string;
   onClick: (id: number) => void;
 }
 
 const WorkspaceGridItem: FC<IWorkspaceGridItemProps> = ({ ...props }) => {
-  const { id, title, isActive, badgeValue, onClick } = props;
+  const { id, title, isActive, badgeValue, previewName, onClick } = props;
+
+  const preview = (
+    previewName ? previewName : title[0] + title[1]
+  ).toUpperCase();
 
   return (
     <Row className="sm:px-0 md:px-4">
@@ -29,7 +34,7 @@ const WorkspaceGridItem: FC<IWorkspaceGridItemProps> = ({ ...props }) => {
             className="cursor-pointer font-mono font-semibold flex justify-center items-center pt-2 "
             style={{ fontSize: '32pt', color: '#141414' }}
           >
-            {title[0].toUpperCase() + title[1].toUpperCase()}
+            {preview}
           </label>
           {badgeValue && (
             <Badge value={badgeValue} size="middle" className="grid-badge" />