Snapshot

components/avatar.tsx

@@ -6,9 +6,12 @@ import type { characters } from "@/lib/db/schema";
 export default function Avatar({
   char,
   scale = 1,
-}: {
+  selected,
+  ...props
+}: React.ComponentProps<"div"> & {
   char: typeof characters.$inferInsert;
   scale?: number;
+  selected?: boolean | 0;
 }) {
   const star = (key: number) => (
     <svg
@@ -33,7 +36,12 @@ export default function Avatar({
       style={{
         width: 128 * scale,
         height: 168 * scale,
+        opacity: typeof selected !== "boolean" || selected ? 1 : 0.4,
+        // @ts-expect-error
+        ":hover": { opacity: 0.8 },
       }}
+      {...props}
+      className="transition-opacity"
     >
       <div
         style={{

components/blocker.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
 
 export function Blocker({ children }: { children: ReactNode }) {
   return (
-    <div className="blocker backdrop-blur-xl bg-[#222A] flex justify-center items-center absolute top-[-5px] left-[-5px] bottom-[-5px] right-[-5px] rounded-sm z-100 border-t-gray-700 border-l-gray-600 border-1">
+    <div className="blocker backdrop-blur-sm bg-[#2225] flex justify-center items-center absolute top-[-5px] left-[-5px] bottom-[-5px] right-[-5px] rounded-sm z-100 border-t-gray-700 border-l-gray-600 border-1">
       {children}
     </div>
   );

components/combobox.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { Check, ChevronsUpDown } from "lucide-react";
+import * as React from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+export function ComboBox({
+  data,
+  placeholder = "Search...",
+  id,
+  className,
+  ...props
+}: React.ComponentProps<"button"> & {
+  data: { value: string; label: string }[];
+  placeholder?: string;
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [value, setValue] = React.useState("");
+
+  return (
+    <>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            className={cn("w-[200px] justify-between", className)}
+            {...props}
+          >
+            {value
+              ? data.find((ent) => ent.value === value)?.label
+              : placeholder}
+            <ChevronsUpDown className="opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[200px] p-0">
+          <Command>
+            <CommandInput placeholder={placeholder} className="h-9" />
+            <CommandList>
+              <CommandEmpty>None found.</CommandEmpty>
+              <CommandGroup>
+                {data.map((ent) => (
+                  <CommandItem
+                    key={ent.value}
+                    value={ent.value}
+                    onSelect={(currentValue) => {
+                      setValue(currentValue === value ? "" : currentValue);
+                      setOpen(false);
+                    }}
+                  >
+                    {ent.label}
+                    <Check
+                      className={cn(
+                        "ml-auto",
+                        value === ent.value ? "opacity-100" : "opacity-0",
+                      )}
+                    />
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+      <input id={id} type="hidden" value={value} />
+    </>
+  );
+}

components/ui/button.tsx

@@ -1,8 +1,8 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
@@ -31,8 +31,8 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
-)
+  },
+);
 
 function Button({
   className,
@@ -42,9 +42,9 @@ function Button({
   ...props
 }: React.ComponentProps<"button"> &
   VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
+    asChild?: boolean;
   }) {
-  const Comp = asChild ? Slot : "button"
+  const Comp = asChild ? Slot : "button";
 
   return (
     <Comp
@@ -52,7 +52,7 @@ function Button({
       className={cn(buttonVariants({ variant, size, className }))}
       {...props}
     />
-  )
+  );
 }
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };