diff --git a/.vscode/settings.json b/.vscode/settings.json index 86d709b11e..55c2c63cfc 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -8,5 +8,8 @@ "/**", "**/node_modules/**", "**/fixtures/**" - ] + ], + "files.exclude": { + "apps/www": true + } } diff --git a/apps/v4/app/(app)/(root)/components/appearance-settings.tsx b/apps/v4/app/(app)/(root)/components/appearance-settings.tsx new file mode 100644 index 0000000000..6a54f1c3ca --- /dev/null +++ b/apps/v4/app/(app)/(root)/components/appearance-settings.tsx @@ -0,0 +1,168 @@ +"use client" + +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 { + Field, + FieldContent, + FieldDescription, + FieldGroup, + FieldLabel, + FieldLegend, + FieldSeparator, + FieldSet, + 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() + return ( +
+ +
+ Compute Environment + + Select the compute environment for your cluster. + + + + + + Kubernetes + + Run GPU workloads on a K8s configured cluster. This is the + default. + + + + + + + + + Virtual Machine + + Access a VM configured cluster to run workloads. (Coming + soon) + + + + + + +
+ + + + Accent + Select the accent color. + +
+ + {accents.map((accent) => ( + + ))} + +
+ + + + + Number of GPUs + You can add more later. + + + + + + + + + + + Wallpaper Tinting + + Allow the wallpaper to be tinted. + + + + + +
+ ) +} diff --git a/apps/v4/app/(app)/(root)/components/button-group-demo.tsx b/apps/v4/app/(app)/(root)/components/button-group-demo.tsx new file mode 100644 index 0000000000..54010a73d0 --- /dev/null +++ b/apps/v4/app/(app)/(root)/components/button-group-demo.tsx @@ -0,0 +1,120 @@ +"use client" + +import * as React from "react" +import { + ArchiveIcon, + ArrowLeftIcon, + CalendarPlusIcon, + ClockIcon, + ListFilterPlusIcon, + MailCheckIcon, + MoreHorizontalIcon, + TagIcon, + Trash2Icon, +} from "lucide-react" + +import { Button } from "@/registry/new-york-v4/ui/button" +import { ButtonGroup } from "@/registry/new-york-v4/ui/button-group" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuRadioGroup, + DropdownMenuRadioItem, + DropdownMenuSeparator, + DropdownMenuSub, + DropdownMenuSubContent, + DropdownMenuSubTrigger, + DropdownMenuTrigger, +} from "@/registry/new-york-v4/ui/dropdown-menu" + +export function ButtonGroupDemo() { + const [label, setLabel] = React.useState("personal") + + return ( + + + + + + + + + + + + + + + + + + + Mark as Read + + + + Archive + + + + + + + Snooze + + + + Add to Calendar + + + + Add to List + + + + + Label As... + + + + + Personal + + + Work + + + Other + + + + + + + + + + Trash + + + + + + + ) +} diff --git a/apps/v4/app/(app)/(root)/components/button-group-input-group.tsx b/apps/v4/app/(app)/(root)/components/button-group-input-group.tsx new file mode 100644 index 0000000000..0120a22901 --- /dev/null +++ b/apps/v4/app/(app)/(root)/components/button-group-input-group.tsx @@ -0,0 +1,58 @@ +"use client" + +import * as React from "react" +import { AudioLinesIcon, PlusIcon } from "lucide-react" + +import { Button } from "@/registry/new-york-v4/ui/button" +import { ButtonGroup } from "@/registry/new-york-v4/ui/button-group" +import { + InputGroup, + InputGroupAddon, + InputGroupButton, + InputGroupInput, +} from "@/registry/new-york-v4/ui/input-group" +import { + Tooltip, + TooltipContent, + TooltipTrigger, +} from "@/registry/new-york-v4/ui/tooltip" + +export function ButtonGroupInputGroup() { + const [voiceEnabled, setVoiceEnabled] = React.useState(false) + return ( + + + + + + + + + + + setVoiceEnabled(!voiceEnabled)} + data-active={voiceEnabled} + className="data-[active=true]:bg-primary data-[active=true]:text-primary-foreground" + aria-pressed={voiceEnabled} + size="icon-xs" + aria-label="Voice Mode" + > + + + + Voice Mode + + + + + + ) +} diff --git a/apps/v4/app/(app)/(root)/components/button-group-nested.tsx b/apps/v4/app/(app)/(root)/components/button-group-nested.tsx new file mode 100644 index 0000000000..44718e472e --- /dev/null +++ b/apps/v4/app/(app)/(root)/components/button-group-nested.tsx @@ -0,0 +1,32 @@ +"use client" + +import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react" + +import { Button } from "@/registry/new-york-v4/ui/button" +import { ButtonGroup } from "@/registry/new-york-v4/ui/button-group" + +export function ButtonGroupNested() { + return ( + + + + + + + + + + + + ) +} diff --git a/apps/v4/app/(app)/(root)/components/button-group-popover.tsx b/apps/v4/app/(app)/(root)/components/button-group-popover.tsx new file mode 100644 index 0000000000..972aa0b4ce --- /dev/null +++ b/apps/v4/app/(app)/(root)/components/button-group-popover.tsx @@ -0,0 +1,45 @@ +import { BotIcon, ChevronDownIcon } from "lucide-react" + +import { Button } from "@/registry/new-york-v4/ui/button" +import { ButtonGroup } from "@/registry/new-york-v4/ui/button-group" +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/registry/new-york-v4/ui/popover" +import { Separator } from "@/registry/new-york-v4/ui/separator" +import { Textarea } from "@/registry/new-york-v4/ui/textarea" + +export function ButtonGroupPopover() { + return ( + + + + + + + +
+
Agent Tasks
+
+ +
+