Added tags and Icons to Command

patelvivekdev · May 13, 2024 · 0aa076a · 0aa076a
1 parent 00b114f
commit 0aa076a
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 55 deletions.
diff --git a/components/Command/Command.tsx b/components/Command/Command.tsx
@@ -13,15 +13,29 @@ import {
   CommandList,
   CommandSeparator,
 } from '@/components/ui/command';
+import {
+  CircleUserRound,
+  Home,
+  MoonStar,
+  Paperclip,
+  Rss,
+  SquareArrowOutUpRight,
+  SquareBottomDashedScissors,
+  SunMoon,
+  Tag,
+  Target,
+} from 'lucide-react';
 
 export function CommandMenu({
   blogs,
   projects,
   snippets,
+  tags,
 }: {
   blogs: any[];
   projects: any[];
   snippets: any[];
+  tags: any[];
 }) {
   const router = useRouter();
   const [open, setOpen] = React.useState(false);
@@ -55,83 +69,119 @@ export function CommandMenu({
 
   return (
     <>
-      <CommandDialog open={open} onOpenChange={setOpen} className='w-4/5'>
+      <CommandDialog open={open} onOpenChange={setOpen}>
         <CommandInput placeholder='Type a command or search...' />
         <CommandList>
           <CommandEmpty>No results found.</CommandEmpty>
           <CommandSeparator />
-          <CommandGroup heading='Routes'>
+          <CommandGroup heading='Links'>
             <CommandItem
               onSelect={() => runCommand(() => router.push('/home'))}
             >
+              <Home className='mr-2 h-4 w-4' />
               <span>Home</span>
             </CommandItem>
+            <CommandItem
+              onSelect={() => runCommand(() => router.push('/contact'))}
+            >
+              <CircleUserRound className='mr-2 h-4 w-4' />
+              <span>Contact</span>
+            </CommandItem>
+            <CommandItem
+              onSelect={() => runCommand(() => router.push('/resume'))}
+            >
+              <Paperclip className='mr-2 h-4 w-4' />
+              <span>Resume</span>
+            </CommandItem>
+            <CommandItem
+              onSelect={() => runCommand(() => router.push('/blog'))}
+            >
+              <Rss className='mr-2 h-4 w-4' />
+              <span>Blogs</span>
+            </CommandItem>
+            <CommandItem
+              onSelect={() => runCommand(() => router.push('/projects'))}
+            >
+              <Target className='mr-2 h-4 w-4' />
+              <span>Projects</span>
+            </CommandItem>
+            <CommandItem
+              onSelect={() => runCommand(() => router.push('/snippet'))}
+            >
+              <SquareBottomDashedScissors className='mr-2 h-4 w-4' />
+              <span>Snippets</span>
+            </CommandItem>
             <CommandItem onSelect={() => runCommand(() => router.push('/tag'))}>
+              <Tag className='mr-2 h-4 w-4' />
               <span>Tags</span>
             </CommandItem>
-            <CommandGroup heading='Blogs'>
+          </CommandGroup>
+          <CommandSeparator />
+          <CommandGroup heading='Blogs'>
+            {blogs.map((blog: any) => (
+              <CommandItem
+                key={blog.slug}
+                onSelect={() =>
+                  runCommand(() => router.push(`/blog/${blog.slug}`))
+                }
+              >
+                <Rss className='mr-2 h-4 w-4' />
+                <span>{blog.metadata.title}</span>
+                <SquareArrowOutUpRight className='ml-2 h-4 w-4' />
+              </CommandItem>
+            ))}
+          </CommandGroup>
+          <CommandSeparator />
+          <CommandGroup heading='Projects'>
+            {projects.map((project: any) => (
               <CommandItem
-                onSelect={() => runCommand(() => router.push('/blog'))}
+                key={project.slug}
+                onSelect={() =>
+                  runCommand(() => router.push(`/projects/${project.slug}`))
+                }
               >
-                <span>Blogs</span>
+                <Target className='mr-2 h-4 w-4' />
+                <span>{project.metadata.title}</span>
+                <SquareArrowOutUpRight className='ml-2 h-4 w-4' />
               </CommandItem>
-              {blogs.map((blog: any) => (
-                <CommandItem
-                  key={blog.id}
-                  onSelect={() =>
-                    runCommand(() => router.push(`/blog/${blog.slug}`))
-                  }
-                >
-                  <span className='mr-2 h-4 w-4' />
-                  <span>{blog.metadata.title}</span>
-                </CommandItem>
-              ))}
-            </CommandGroup>
-            <CommandGroup heading='Projects'>
+            ))}
+          </CommandGroup>
+          <CommandSeparator />
+          <CommandGroup heading='Snippets'>
+            {snippets.map((snippet: any) => (
               <CommandItem
-                onSelect={() => runCommand(() => router.push('/projects'))}
+                key={snippet.slug}
+                onSelect={() =>
+                  runCommand(() => router.push(`/snippets/${snippet.slug}`))
+                }
               >
-                <span>Projects</span>
+                <SquareBottomDashedScissors className='mr-2 h-4 w-4' />
+                <span>{snippet.metadata.title}</span>
+                <SquareArrowOutUpRight className='ml-2 h-4 w-4' />
               </CommandItem>
-              {projects.map((project: any) => (
-                <CommandItem
-                  key={project.id}
-                  onSelect={() =>
-                    runCommand(() => router.push(`/projects/${project.slug}`))
-                  }
-                >
-                  <span className='mr-2 h-4 w-4' />
-                  <span>{project.metadata.title}</span>
-                </CommandItem>
-              ))}
-            </CommandGroup>
-            <CommandGroup heading='Snippets'>
+            ))}
+          </CommandGroup>
+          <CommandSeparator />
+          <CommandGroup heading='Tags'>
+            {tags.map((tag: any) => (
               <CommandItem
-                onSelect={() => runCommand(() => router.push('/snippet'))}
+                key={tag}
+                onSelect={() => runCommand(() => router.push(`/tag/${tag}`))}
               >
-                <span>Snippets</span>
+                <Tag className='mr-2 h-4 w-4' />
+                <span>{tag}</span>
+                <SquareArrowOutUpRight className='ml-2 h-4 w-4' />
               </CommandItem>
-              {snippets.map((snippet: any) => (
-                <CommandItem
-                  key={snippet.id}
-                  onSelect={() =>
-                    runCommand(() => router.push(`/snippets/${snippet.slug}`))
-                  }
-                >
-                  <span className='mr-2 h-4 w-4' />
-                  <span>{snippet.metadata.title}</span>
-                </CommandItem>
-              ))}
-            </CommandGroup>
+            ))}
           </CommandGroup>
-
+          <CommandSeparator />
           <CommandGroup heading='Theme'>
             <CommandItem onSelect={() => runCommand(() => setTheme('light'))}>
-              <span className='mr-2 h-4 w-4' />
+              <SunMoon className='mr-2 h-4 w-4' />
               <span>Light</span>
             </CommandItem>
             <CommandItem onSelect={() => runCommand(() => setTheme('dark'))}>
-              <span className='mr-2 h-4 w-4' />
+              <MoonStar className='mr-2 h-4 w-4' />
               <span>Dark</span>
             </CommandItem>
           </CommandGroup>

diff --git a/components/Command/CommandContainer.tsx b/components/Command/CommandContainer.tsx
@@ -1,16 +1,25 @@
 import getBlogs from '@/lib/get-blogs';
 import { getProjects } from '@/lib/get-projects';
 import getSnippets from '@/lib/get-snippets';
+import { allTags } from '@/lib/get-tags';
 import { CommandMenu } from './Command';
 
 export function CommandContainer() {
   const blogs = getBlogs();
   const projects = getProjects();
   const snippets = getSnippets();
+  const tags = Object.keys(allTags);
+
+  tags.sort();
 
   return (
     <>
-      <CommandMenu blogs={blogs} projects={projects} snippets={snippets} />
+      <CommandMenu
+        blogs={blogs}
+        projects={projects}
+        snippets={snippets}
+        tags={tags}
+      />
     </>
   );
 }
diff --git a/components/ui/command.tsx b/components/ui/command.tsx
@@ -23,9 +23,7 @@ const Command = React.forwardRef<
 ));
 Command.displayName = CommandPrimitive.displayName;
 
-interface CommandDialogProps extends DialogProps {
-  className?: string;
-}
+interface CommandDialogProps extends DialogProps {}
 
 const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
@@ -106,7 +104,7 @@ const CommandSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Separator
     ref={ref}
-    className={cn('bg-border -mx-1 h-px', className)}
+    className={cn('-mx-1 h-px bg-neutral-300 dark:bg-neutral-700', className)}
     {...props}
   />
 ));