added group to design system

pixel-point · Feb 21, 2025 · 2f76968 · 2f76968
1 parent c9f36a2
commit 2f76968
Show file tree

Hide file tree

Showing 4 changed files with 460 additions and 253 deletions.
diff --git a/.gitignore b/.gitignore
@@ -36,4 +36,7 @@ tsconfig.tsbuildinfo
 *storybook.log
 storybook-static/
 
-yaml-editor-test/
+yaml-editor-test/
+
+#cursor
+.cursor
diff --git a/apps/design-system/src/components/docs-navbar/docs-navbar.module.css b/apps/design-system/src/components/docs-navbar/docs-navbar.module.css
@@ -1,5 +1,8 @@
 .content {
   overflow: hidden;
+  :global(.select-root) {
+    margin: 0.5rem 1rem;
+  }
 }
 
 .viewLink {

diff --git a/apps/design-system/src/components/docs-navbar/docs-navbar.tsx b/apps/design-system/src/components/docs-navbar/docs-navbar.tsx
@@ -1,10 +1,10 @@
 import { FC } from 'react'
-import { Link, useLocation } from 'react-router-dom'
+import { Link, useLocation, useNavigate } from 'react-router-dom'
 
 import { viewPreviews } from '@/pages/view-preview/view-preview'
 import { componentPages } from '@subjects/components/componentPages'
 
-import { Icon, NavbarSkeleton, ScrollArea } from '@harnessio/ui/components'
+import { Icon, NavbarSkeleton, ScrollArea, Select } from '@harnessio/ui/components'
 
 import css from './docs-navbar.module.css'
 
@@ -14,6 +14,7 @@ export interface DocsNavbarProps {
 
 const DocsNavbar: FC<DocsNavbarProps> = ({ className }) => {
   const location = useLocation()
+  const navigate = useNavigate()
 
   return (
     <NavbarSkeleton.Root className={className}>
@@ -33,14 +34,23 @@ const DocsNavbar: FC<DocsNavbarProps> = ({ className }) => {
               </Link>
             ))}
           </NavbarSkeleton.Group>
-          <NavbarSkeleton.Group title="View previews" topBorder>
-            {Object.keys(viewPreviews).map(path => (
-              <Link key={path} to={`/view-preview/${path}`} target="_blank" className={css.viewLink}>
-                <NavbarSkeleton.Item text={path} />
-                <Icon name="supply-chain" size={12} />
-              </Link>
-            ))}
-          </NavbarSkeleton.Group>
+
+          {Object.entries(viewPreviews).map(([groupKey, group]) => (
+            <NavbarSkeleton.Group key={groupKey} title={group.label} topBorder>
+              <Select.Root
+                placeholder={`Select ${group.label}`}
+                onValueChange={path => navigate(`/view-preview/${path}`)}
+              >
+                <Select.Content>
+                  {Object.entries(group.items).map(([path, { label }]) => (
+                    <Select.Item key={path} value={path}>
+                      {label}
+                    </Select.Item>
+                  ))}
+                </Select.Content>
+              </Select.Root>
+            </NavbarSkeleton.Group>
+          ))}
         </ScrollArea>
       </NavbarSkeleton.Content>
       <NavbarSkeleton.Footer>