LilMikey-CN/component-creation

Component structure

// components/features/ResourceCard.tsx
'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { useTranslations } from 'next-intl';
import type { Resource } from '@/types';

interface ResourceCardProps {
  resource: Resource;
  onContact?: (resourceId: string) => void;
}

export default function ResourceCard({ resource, onContact }: ResourceCardProps) {
  const t = useTranslations('resource');

  return (
    <Card className="hover:shadow-md transition-shadow">
      <CardHeader className="pb-3">
        <div className="flex items-center justify-between">
          <CardTitle className="text-lg">{resource.title}</CardTitle>
          <Badge variant={resource.type === 'HAVE' ? 'default' : 'secondary'}>
            {t(resource.type === 'HAVE' ? 'typeHave' : 'typeWant')}
          </Badge>
        </div>
      </CardHeader>
      <CardContent>
        <p className="text-sm text-muted-foreground line-clamp-3">
          {resource.description}
        </p>
        {resource.tags.length > 0 && (
          <div className="flex flex-wrap gap-1 mt-3">
            {resource.tags.map(tag => (
              <Badge key={tag} variant="outline" className="text-xs">
                {tag}
              </Badge>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  );
}

Design system rules

1. Colors: use Tailwind semantic classes (text-muted-foreground, bg-primary) not arbitrary colors (text-gray-500, bg-blue-600)
2. Spacing: stick to Tailwind's spacing scale (2, 3, 4, 6, 8)
3. Typography: text-sm for body, text-lg for card titles, text-2xl for page titles
4. Responsive: mobile-first. Use sm:, md:, lg: breakpoints
5. Dark mode: shadcn handles this — don't hardcode light-mode colors

Component types

• components/ui/ — shadcn primitives (don't edit these directly, use npx shadcn@latest add)
• components/features/ — domain components (ResourceCard, MatchList, ChatWindow)
• components/layout/ — structural (Navbar, Sidebar, PageHeader)

Form patterns

Use shadcn's Form component with react-hook-form + Zod:

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { resourceCreateSchema } from '@/lib/validations';

const form = useForm({
  resolver: zodResolver(resourceCreateSchema),
  defaultValues: { title: '', description: '', type: 'HAVE' as const },
});

Loading states

Always show skeleton loaders, never spinners:

import { Skeleton } from '@/components/ui/skeleton';

function ResourceCardSkeleton() {
  return (
    <Card>
      <CardHeader>
        <Skeleton className="h-6 w-3/4" />
      </CardHeader>
      <CardContent>
        <Skeleton className="h-4 w-full mb-2" />
        <Skeleton className="h-4 w-2/3" />
      </CardContent>
    </Card>
  );
}

Empty states

Every list component needs an empty state with an action:

{items.length === 0 && (
  <div className="text-center py-12">
    <p className="text-muted-foreground mb-4">{t('empty')}</p>
    <Button onClick={onCreateNew}>{t('createFirst')}</Button>
  </div>
)}