add searchbar and fix breadcrumbs

Author: Sandi Karajic

biome.json

@@ -18,7 +18,8 @@
       "recommended": true,
       "a11y": {
         "useFocusableInteractive": "off",
-        "useSemanticElements": "off"
+        "useSemanticElements": "off",
+        "noLabelWithoutControl": "off"
       }
     }
   },

index.html

@@ -6,7 +6,7 @@
         <meta name="color-scheme" content="light dark" />
         <link rel="icon" href="/favicon.ico" type="image/x-icon">
         <meta name="description" content="A community made to manage a custom API that serves static data.">
-        <title>RAW - CommunityDragon</title>
+        <title>Explore - CommunityDragon</title>
         <script>
             (() => {
                 try {

src/components/global/breadcrumbs.tsx

@@ -1,3 +1,4 @@
+import { Home, type LucideIcon } from "lucide-react";
 import {
   Breadcrumb,
   BreadcrumbEllipsis,
@@ -20,11 +21,11 @@ interface Props {
 }
 
 type crumb = {
-  label: string;
+  label: string | LucideIcon;
   href: string;
 };
 
-export function PathBreadcrumbs({ path = "/" }: Props) {
+export const Breadcrumbs: React.FC<Props> = ({ path = "/" }) => {
   const segments = path.split("/").filter((segment) => segment !== "");
 
   const breadcrumbs: crumb[] = segments.map((segment, index) => {
@@ -35,8 +36,10 @@ export function PathBreadcrumbs({ path = "/" }: Props) {
     };
   });
 
-  const allItems =
-    breadcrumbs.length === 0 ? [{ label: "Home", href: "/" }] : breadcrumbs;
+  const allItems = [
+    { label: <Home size={16} strokeWidth={1} />, href: "/" },
+    ...breadcrumbs,
+  ];
 
   const maxVisible = 6;
   const isTooLong = allItems.length > maxVisible;
@@ -92,4 +95,4 @@ export function PathBreadcrumbs({ path = "/" }: Props) {
       </BreadcrumbList>
     </Breadcrumb>
   );
-}
+};

src/components/global/main.tsx

@@ -1,5 +1,6 @@
 import { Separator } from "@components/ui/separator";
-import { PathBreadcrumbs } from "./breadcrumbs";
+import { Breadcrumbs } from "./breadcrumbs";
+import { Search } from "./search";
 
 interface Props {
   path?: string;
@@ -8,9 +9,10 @@ interface Props {
 
 export const Main: React.FC<Props> = ({ path, children }) => (
   <div className="relative">
-    <div className="flex flex-col gap-4 max-w-5xl m-auto pb-12 -mt-20">
+    <div className="flex flex-col gap-4 max-w-4xl m-auto pb-12 -mt-20">
+      <Search />
       <Separator />
-      <PathBreadcrumbs path={path ?? "/"} />
+      {(path ?? "/") === "/" ? null : <Breadcrumbs path={path} />}
       {children}
     </div>
   </div>

src/components/global/navbar.tsx

@@ -35,7 +35,7 @@ export const NavBar: React.FC = () => {
                       navigationMenuTriggerStyle(),
                       "bg-transparent",
                     )}
-                    render={<a href="https://www.communitydragon.org">Home</a>}
+                    render={<a href="/">Home</a>}
                   />
                 </NavigationMenuItem>
 

src/components/global/search.tsx

@@ -0,0 +1,57 @@
+import { Button } from "@components/ui/button";
+import { ButtonGroup } from "@components/ui/button-group";
+import { LoaderCircleIcon, SearchIcon } from "lucide-react";
+import { useEffect, useId, useState } from "react";
+import { Input } from "@/components/ui/input";
+
+export const Search: React.FC = () => {
+  const [value, setValue] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const id = useId();
+
+  useEffect(() => {
+    if (value) {
+      setIsLoading(true);
+
+      const timer = setTimeout(() => {
+        setIsLoading(false);
+      }, 500);
+
+      return () => clearTimeout(timer);
+    }
+
+    setIsLoading(false);
+  }, [value]);
+
+  return (
+    <div className="w-full flex gap-2">
+      <div className="relative grow">
+        <div className="text-muted-foreground pointer-events-none absolute inset-y-0 left-0 flex items-center justify-center pl-3 peer-disabled:opacity-50">
+          <SearchIcon className="size-4" />
+          <span className="sr-only">Search</span>
+        </div>
+        <Input
+          id={id}
+          type="search"
+          placeholder="Search..."
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          className="peer px-9 [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none"
+        />
+        {isLoading && (
+          <div className="text-muted-foreground pointer-events-none absolute inset-y-0 right-0 flex items-center justify-center pr-3 peer-disabled:opacity-50">
+            <LoaderCircleIcon className="size-4 animate-spin" />
+            <span className="sr-only">Loading...</span>
+          </div>
+        )}
+      </div>
+      <div className="relative">
+        <ButtonGroup>
+          <Button variant="secondary">Local</Button>
+          <Button variant="secondary">Global</Button>
+        </ButtonGroup>
+      </div>
+    </div>
+  );
+};

src/components/ui/button-group.tsx

@@ -0,0 +1,86 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+const buttonGroupVariants = cva(
+  "has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0 *:data-slot:rounded-r-none",
+        vertical:
+          "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 *:data-slot:rounded-b-none",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  },
+);
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  );
+}
+
+function ButtonGroupText({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(
+      {
+        className: cn(
+          "bg-muted gap-2 rounded-md border px-2.5 text-sm font-medium shadow-xs [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
+          className,
+        ),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: "button-group-text",
+    },
+  });
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        "bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+};

src/components/ui/input.tsx

@@ -0,0 +1,20 @@
+import { Input as InputPrimitive } from "@base-ui/react/input";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <InputPrimitive
+      type={type}
+      data-slot="input"
+      className={cn(
+        "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 file:text-foreground placeholder:text-muted-foreground h-9 w-full min-w-0 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };

src/components/ui/label.tsx

@@ -0,0 +1,18 @@
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Label({ className, ...props }: React.ComponentProps<"label">) {
+  return (
+    <label
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };