Fixed: Search Bar Issue fixed.

app/components/CodeHighlight.tsx

@@ -36,7 +36,7 @@ const CodeHighlight: FC<CodeHighlightProps> = ({ code }) => {
           <button
             onClick={() => {
               copyToClipboard(Object.values(code)[codeType])
-              toast.info('Copied to clipboard')
+              toast.success('Copied to clipboard')
             }}
             className="mx-6 my-2.5">
             {copy ? <Check size={20} weight="light" color="#fff" /> : <Copy size={20} weight="light" color="#fff" />}

app/components/CodeHighlightPreview.tsx

@@ -58,7 +58,7 @@ const CodeHighlightPreview = forwardRef<HTMLDivElement, CodeHighlightPreviewProp
             <button
               onClick={() => {
                 copyToClipboard(Object.values(code)[active === 0 ? 0 : active - 1])
-                toast.info('Copied to clipboard')
+                toast.success('Copied to clipboard')
               }}
               className="mx-6 my-2.5">
               {copy ? <Check size={20} weight="light" color="#fff" /> : <Copy size={20} weight="light" color="#fff" />}

app/components/Command/index.tsx

@@ -0,0 +1,132 @@
+'use client'
+import { Command as CommandPrimitive } from 'cmdk'
+import { MagnifyingGlass } from 'phosphor-react'
+import { ComponentPropsWithoutRef, ElementRef, forwardRef, HTMLAttributes } from 'react'
+import { Modal, ModalContent, ModalProps } from '../../src'
+import { cn } from '../../src/utils/cn'
+
+const Command = forwardRef<ElementRef<typeof CommandPrimitive>, ComponentPropsWithoutRef<typeof CommandPrimitive>>(
+  ({ className, ...props }, ref) => (
+    <CommandPrimitive
+      ref={ref}
+      className={cn('mx-auto flex flex-col overflow-hidden outline-none ', className)}
+      {...props}
+    />
+  ),
+)
+Command.displayName = CommandPrimitive.displayName
+
+interface CommandDialogProps extends ModalProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Modal {...props}>
+      <ModalContent className="max-w-[35rem] overflow-hidden rounded-xl bg-white p-5 text-metal-600 shadow-xLarge dark:bg-metal-900 dark:text-white">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-metal-600 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:p-2 [&_[cmdk-item]_svg]:h-4 [&_[cmdk-item]_svg]:w-4">
+          {children}
+        </Command>
+      </ModalContent>
+    </Modal>
+  )
+}
+
+const CommandInput = forwardRef<
+  ElementRef<typeof CommandPrimitive.Input>,
+  ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b border-b-metal-100 px-3 dark:border-b-metal-800" cmdk-input-wrapper="">
+    <MagnifyingGlass className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-metal-400 disabled:cursor-not-allowed disabled:opacity-50 dark:placeholder:text-metal-600',
+        className,
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = forwardRef<
+  ElementRef<typeof CommandPrimitive.List>,
+  ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    id="search"
+    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = forwardRef<
+  ElementRef<typeof CommandPrimitive.Empty>,
+  ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-body-4" {...props} />)
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = forwardRef<
+  ElementRef<typeof CommandPrimitive.Group>,
+  ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      'overflow-hidden p-1 text-metal-600 dark:text-white [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-body-5 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-metal-400 dark:[&_[cmdk-group-heading]]:text-white/50',
+      className,
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = forwardRef<
+  ElementRef<typeof CommandPrimitive.Separator>,
+  ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 h-px bg-metal-25 dark:bg-metal-800', className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = forwardRef<
+  ElementRef<typeof CommandPrimitive.Item>,
+  ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-md text-body-4 outline-none transition-all duration-200 data-[disabled=true]:pointer-events-none data-[selected=true]:bg-metal-50 data-[selected=true]:text-metal-900 data-[disabled=true]:opacity-50 dark:data-[selected='true']:bg-metal-800 dark:data-[selected=true]:text-white",
+      className,
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({ className, ...props }: HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn('ml-auto text-body-5 text-metal-400', className)} {...props} />
+}
+CommandShortcut.displayName = 'CommandShortcut'
+
+export {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+}

app/components/Community.tsx

@@ -52,7 +52,7 @@ const Community = () => {
                   {contributors?.length ? (
                     <AvatarGroup>
                       {contributors?.map((user) => (
-                        <Avatar key={user?.id} className="size-14">
+                        <Avatar key={user?.id} className="size-10">
                           <AvatarImage src={user?.avatar_url} />
                           <AvatarFallback>CB</AvatarFallback>
                         </Avatar>