[V0_FILE]typescriptreact:file="schemas/seed.ts" import { z } from "zod" export const seedSchema = z.object({ values: z .array(z.number().min(0).max(255)) .length(4) .or(z.array(z.number().min(0).max(255)).length(8)), }) export type SeedSchema = z.infer [V0_FILE]typescriptreact:file="seed-popover.tsx" "use client" import React from "react" import { useForm, Controller } from "react-hook-form" import { zodResolver } from "@hookform/resolvers/zod" import { Button } from "@/components/ui/button" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Input } from "@/components/ui/input" import { seedSchema, type SeedSchema } from "./schemas/seed" const createInitialSeed = (size: 4 | 8): number[] => { return Array.from({ length: size }, (_, i) => i % 256) } export default function SeedPopover() { const { control } = useForm({ resolver: zodResolver(seedSchema), defaultValues: { values: createInitialSeed(4), }, }) return (

(

[

{field.value.map((_, index) => (

{ const newValues = [...field.value] newValues[index] = Math.max(0, Math.min(255, Number.parseInt(e.target.value) || 0)) field.onChange(newValues) }} className="w-10 h-6 p-0 text-right pr-1 inline-block" min={0} max={255} style={{ appearance: "textfield" }} /> {index}

{index < field.value.length - 1 && ,} ))}

]

)} />

) }

About

Tags

Share

About

Tags

Share

More from peetzweg

More Templates Like This

About

Tags

Share

About

Tags

Share

More from peetzweg

More Templates Like This