Tech Stack

import { Button, Input, Card } from '@vendure/dashboard';function MyForm() {    return (        <Card className="p-6">            <Input placeholder="Enter your text" />            <Button className="mt-4">Submit</Button>        </Card>    );}

import { useQuery } from '@vendure/dashboard';import { graphql } from '@/gql';const getProductsQuery = graphql(`    query GetProducts {        products {            items {                id                name                slug            }        }    }`);function ProductList() {    const { data, isLoading, error } = useQuery({        queryKey: ['products'],        queryFn: () => client.request(getProductsQuery),    });    if (isLoading) return <div>Loading...</div>;    if (error) return <div>Error: {error.message}</div>;    return (        <ul>            {data.products.items.map(product => (                <li key={product.id}>{product.name}</li>            ))}        </ul>    );}

import { Link, useNavigate } from '@vendure/dashboard';function Navigation() {    const navigate = useNavigate();    return (        <div>            <Link to="/products">Products</Link>            <button onClick={() => navigate({ to: '/customers' })}>Go to Customers</button>        </div>    );}

import { useForm, FormFieldWrapper, Input, Button } from '@vendure/dashboard';interface FormData {    name: string;    email: string;}function MyForm() {    const form = useForm<FormData>();    const onSubmit = (data: FormData) => {        console.log(data);    };    return (        <form onSubmit={form.handleSubmit(onSubmit)}>            <FormFieldWrapper                control={form.control}                name="name"                label="Name"                render={({ field }) => <Input {...field} />}            />            <FormFieldWrapper                control={form.control}                name="email"                label="Email"                render={({ field }) => <Input type="email" {...field} />}            />            <Button type="submit">Submit</Button>        </form>    );}

import { graphql } from '@/gql';import { useMutation } from '@vendure/dashboard';const createProductMutation = graphql(`    mutation CreateProduct($input: CreateProductInput!) {        createProduct(input: $input) {            id            name            slug        }    }`);function CreateProductForm() {    const mutation = useMutation({        mutationFn: (input: CreateProductInput) => client.request(createProductMutation, { input }),    });    // TypeScript knows the exact shape of the input and response    const handleSubmit = (data: CreateProductInput) => {        mutation.mutate(data);    };    return (        // Form implementation        <div>Create Product Form</div>    );}

import { toast } from '@vendure/dashboard';function MyComponent() {    const handleSave = async () => {        try {            await saveData();            toast.success('Data saved successfully!');        } catch (error) {            toast.error('Failed to save data', {                description: error.message,            });        }    };    // Promise-based toasts    const handleAsyncAction = () => {        toast.promise(performAsyncAction(), {            loading: 'Saving...',            success: 'Saved successfully!',            error: 'Failed to save',        });    };    return (        <div>            <button onClick={handleSave}>Save</button>            <button onClick={handleAsyncAction}>Async Save</button>        </div>    );}

import { ShoppingCartIcon, UserIcon, SettingsIcon } from 'lucide-react';function Navigation() {    return (        <nav className="flex space-x-4">            <a href="/products" className="flex items-center">                <ShoppingCartIcon className="mr-2 h-4 w-4" />                Products            </a>            <a href="/customers" className="flex items-center">                <UserIcon className="mr-2 h-4 w-4" />                Customers            </a>            <a href="/settings" className="flex items-center">                <SettingsIcon className="mr-2 h-4 w-4" />                Settings            </a>        </nav>    );}

import { motion } from 'motion/react';function AnimatedCard({ children }) {    return (        <motion.div            initial={{ opacity: 0, y: 20 }}            animate={{ opacity: 1, y: 0 }}            exit={{ opacity: 0, y: -20 }}            className="bg-white p-6 rounded-lg shadow"        >            {children}        </motion.div>    );}

import { Trans, useLingui } from '@lingui/react/macro';function MyComponent() {    const { t } = useLingui();    return (        <div>            <h1>                <Trans>Welcome to Dashboard</Trans>            </h1>            <p>{t`Click here to continue`}</p>        </div>    );}