fix: front page blocks

apps/v4/app/(app)/(root)/components/appearance-settings.tsx

@@ -1,9 +1,8 @@
 "use client"
 
+import * as React from "react"
 import { IconMinus, IconPlus } from "@tabler/icons-react"
-import { CheckIcon } from "lucide-react"
 
-import { useThemeConfig } from "@/components/active-theme"
 import { Button } from "@/registry/new-york-v4/ui/button"
 import { ButtonGroup } from "@/registry/new-york-v4/ui/button-group"
 import {
@@ -18,34 +17,31 @@ import {
   FieldTitle,
 } from "@/registry/new-york-v4/ui/field"
 import { Input } from "@/registry/new-york-v4/ui/input"
-import { Label } from "@/registry/new-york-v4/ui/label"
 import {
   RadioGroup,
   RadioGroupItem,
 } from "@/registry/new-york-v4/ui/radio-group"
 import { Switch } from "@/registry/new-york-v4/ui/switch"
 
-const accents = [
-  {
-    name: "Blue",
-    value: "blue",
-  },
-  {
-    name: "Amber",
-    value: "amber",
-  },
-  {
-    name: "Green",
-    value: "green",
-  },
-  {
-    name: "Rose",
-    value: "rose",
-  },
-]
-
 export function AppearanceSettings() {
-  const { activeTheme, setActiveTheme } = useThemeConfig()
+  const [gpuCount, setGpuCount] = React.useState(8)
+
+  const handleGpuAdjustment = React.useCallback((adjustment: number) => {
+    setGpuCount((prevCount) =>
+      Math.max(1, Math.min(99, prevCount + adjustment))
+    )
+  }, [])
+
+  const handleGpuInputChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = parseInt(e.target.value, 10)
+      if (!isNaN(value) && value >= 1 && value <= 99) {
+        setGpuCount(value)
+      }
+    },
+    []
+  )
+
   return (
     <FieldSet>
       <FieldGroup>
@@ -90,37 +86,6 @@ export function AppearanceSettings() {
           </RadioGroup>
         </FieldSet>
         <FieldSeparator />
-        <Field orientation="horizontal">
-          <FieldContent>
-            <FieldTitle>Accent</FieldTitle>
-            <FieldDescription>Select the accent color.</FieldDescription>
-          </FieldContent>
-          <FieldSet aria-label="Accent">
-            <RadioGroup
-              className="flex flex-wrap gap-2"
-              value={activeTheme}
-              onValueChange={setActiveTheme}
-            >
-              {accents.map((accent) => (
-                <Label
-                  htmlFor={accent.value}
-                  key={accent.value}
-                  data-theme={accent.value}
-                  className="flex size-6 items-center justify-center rounded-full data-[theme=amber]:bg-amber-600 data-[theme=blue]:bg-blue-700 data-[theme=green]:bg-green-600 data-[theme=rose]:bg-rose-600"
-                >
-                  <RadioGroupItem
-                    id={accent.value}
-                    value={accent.value}
-                    aria-label={accent.name}
-                    className="peer sr-only"
-                  />
-                  <CheckIcon className="hidden size-4 stroke-white peer-data-[state=checked]:block" />
-                </Label>
-              ))}
-            </RadioGroup>
-          </FieldSet>
-        </Field>
-        <FieldSeparator />
         <Field orientation="horizontal">
           <FieldContent>
             <FieldLabel htmlFor="number-of-gpus-f6l">Number of GPUs</FieldLabel>
@@ -129,7 +94,8 @@ export function AppearanceSettings() {
           <ButtonGroup>
             <Input
               id="number-of-gpus-f6l"
-              placeholder="8"
+              value={gpuCount}
+              onChange={handleGpuInputChange}
               size={3}
               className="h-8 !w-14 font-mono"
               maxLength={3}
@@ -139,6 +105,8 @@ export function AppearanceSettings() {
               size="icon-sm"
               type="button"
               aria-label="Decrement"
+              onClick={() => handleGpuAdjustment(-1)}
+              disabled={gpuCount <= 1}
             >
               <IconMinus />
             </Button>
@@ -147,6 +115,8 @@ export function AppearanceSettings() {
               size="icon-sm"
               type="button"
               aria-label="Increment"
+              onClick={() => handleGpuAdjustment(1)}
+              disabled={gpuCount >= 99}
             >
               <IconPlus />
             </Button>

apps/v4/app/(app)/(root)/components/index.tsx

@@ -33,7 +33,7 @@ export function RootComponents() {
       <div className="flex flex-col gap-6 *:[div]:w-full *:[div]:max-w-full">
         <InputGroupButtonExample />
         <ItemDemo />
-        <FieldSeparator>Appearance Settings</FieldSeparator>
+        <FieldSeparator className="my-4">Appearance Settings</FieldSeparator>
         <AppearanceSettings />
       </div>
       <div className="order-first flex flex-col gap-6 lg:hidden xl:order-last xl:flex *:[div]:w-full *:[div]:max-w-full">

apps/v4/app/(app)/(root)/components/spinner-badge.tsx

@@ -3,7 +3,7 @@ import { Spinner } from "@/registry/new-york-v4/ui/spinner"
 
 export function SpinnerBadge() {
   return (
-    <div className="flex items-center gap-2 [--radius:1.2rem]">
+    <div className="flex items-center gap-2">
       <Badge>
         <Spinner />
         Syncing

apps/v4/components/theme-customizer.tsx

@@ -4,6 +4,7 @@ import * as React from "react"
 import template from "lodash/template"
 import { CheckIcon, ClipboardIcon } from "lucide-react"
 
+import { THEMES } from "@/lib/themes"
 import { cn } from "@/lib/utils"
 import { useThemeConfig } from "@/components/active-theme"
 import { copyToClipboardWithMeta } from "@/components/copy-button"
@@ -52,10 +53,6 @@ interface BaseColorOKLCH {
   dark: Record<string, string>
 }
 
-const THEMES = baseColors.filter(
-  (theme) => !["slate", "stone", "gray", "zinc"].includes(theme.name)
-)
-
 export function ThemeCustomizer({ className }: React.ComponentProps<"div">) {
   const { activeTheme = "neutral", setActiveTheme } = useThemeConfig()
 

apps/v4/components/theme-selector.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { THEMES } from "@/lib/themes"
 import { cn } from "@/lib/utils"
 import { useThemeConfig } from "@/components/active-theme"
 import { Label } from "@/registry/new-york-v4/ui/label"
@@ -10,14 +11,9 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/registry/new-york-v4/ui/select"
-import { baseColors } from "@/registry/registry-base-colors"
 
 import { CopyCodeButton } from "./theme-customizer"
 
-const COLOR_THEMES = baseColors.filter(
-  (theme) => !["slate", "stone", "gray", "zinc"].includes(theme.name)
-)
-
 export function ThemeSelector({ className }: React.ComponentProps<"div">) {
   const { activeTheme, setActiveTheme } = useThemeConfig()
 
@@ -36,7 +32,7 @@ export function ThemeSelector({ className }: React.ComponentProps<"div">) {
           <SelectValue placeholder="Select a theme" />
         </SelectTrigger>
         <SelectContent align="end">
-          {COLOR_THEMES.map((theme) => (
+          {THEMES.map((theme) => (
             <SelectItem
               key={theme.name}
               value={theme.name}

apps/v4/lib/themes.ts

@@ -1,31 +1,5 @@
-export const THEMES = [
-  {
-    name: "Default",
-    value: "default",
-  },
-  {
-    name: "Neutral",
-    value: "neutral",
-  },
-  {
-    name: "Stone",
-    value: "stone",
-  },
-  {
-    name: "Zinc",
-    value: "zinc",
-  },
-  {
-    name: "Gray",
-    value: "gray",
-  },
-  {
-    name: "Slate",
-    value: "slate",
-  },
-  {
-    name: "Scaled",
-    value: "scaled",
-  },
-]
-export type Theme = (typeof THEMES)[number]
+import { baseColors } from "@/registry/registry-base-colors"
+
+export const THEMES = baseColors.filter(
+  (theme) => !["slate", "stone", "gray", "zinc"].includes(theme.name)
+)