shadcn/ui

"use client";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";

const schema = z.object({ email: z.string().email(), name: z.string().min(2) });

export function SignupForm() {
  const form = useForm({ resolver: zodResolver(schema) });
  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(console.log)} className="space-y-4">
        <FormField control={form.control} name="email" render={({ field }) => (
          <FormItem>
            <FormLabel>Email</FormLabel>
            <FormControl><Input {...field} /></FormControl>
            <FormMessage />
          </FormItem>
        )} />
        <Button type="submit">Sign up</Button>
      </form>
    </Form>
  );
}

import { DataTable } from "@/components/ui/data-table";
import { ColumnDef } from "@tanstack/react-table";

const columns: ColumnDef<Tool>[] = [
  { accessorKey: "name", header: "Name" },
  { accessorKey: "category", header: "Category" },
  { accessorKey: "trustScore", header: "Trust Score",
    cell: ({ row }) => <span className="font-mono">{row.getValue("trustScore")}</span>,
  },
];

export function ToolsTable({ tools }: { tools: Tool[] }) {
  return <DataTable columns={columns} data={tools} />;
}

import { Toaster } from "@/components/ui/sonner";
import { toast } from "sonner";

// In root layout
<Toaster position="bottom-right" />

// Trigger from anywhere
toast.success("Tool saved!", { description: "Your changes have been saved." });
toast.error("Failed to save", { description: err.message });