Generate Card

Generate Card

Generate a dashboard card component following Health Tracker 9000 patterns.

Usage

When user requests to create a card component, ask for:

1. Card name (e.g., "WaterIntakeCard", "SleepScoreCard")
2. Data type the card displays (statistic, progress, chart, list, etc.)
3. Icon name from Lucide React
4. Whether it includes a sub-component (list items, chart, etc.)

Implementation Pattern

Based on src/​components/​dashboard/​HealthScoreCard.tsx pattern.

File Structure

Create file: src/​components/​dashboard/​{CardName}.tsx

'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/​components/​ui/​card';
import { Progress } from '@/​components/​ui/​progress';
import { cn } from '@/​lib/​utils';
import { Activity } from 'lucide-react';

interface CardNameProps {
  score: number;
  data: {
    field1: number;
    field2: number;
  };
}

export function CardName({ score, data }: CardNameProps) {
  const getScoreColor = (value: number) => {
    if (value >= 80) return 'text-green-500';
    if (value >= 60) return 'text-yellow-500';
    return 'text-red-500';
  };

  const getProgressColor = (value: number) => {
    if (value >= 80) return 'bg-green-500';
    if (value >= 60) return 'bg-yellow-500';
    return 'bg-red-500';
  };

  return (
    <Card className="overflow-hidden">
      <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
        <CardTitle className="text-sm font-medium">Card Title</​CardTitle>
        <Activity className="h-4 w-4 text-muted-foreground" />
      </​CardHeader>
      <CardContent>
        <div className="flex flex-col items-center justify-center py-4">
          <div className={cn('text-5xl font-bold mb-2', getScoreColor(score))}>
            {score}
          </​div>
          <p className="text-xs text-muted-foreground">Subtitle</​p>
        </​div>

        <div className="space-y-3 mt-4">
          <ItemComponent
            label="Item 1"
            value={data.field1}
            description="Description of what this measures"
          />
          <ItemComponent
            label="Item 2"
            value={data.field2}
            description="Description of what this measures"
          />
        </​div>
      </​CardContent>
    </​Card>
  );
}

interface ItemComponentProps {
  label: string;
  value: number;
  description: string;
}

function ItemComponent({ label, value, description }: ItemComponentProps) {
  return (
    <div className="space-y-1">
      <div className="flex items-center justify-between text-xs">
        <div className="flex items-center gap-1 text-muted-foreground">
          {label}
        </​div>
        <span className="font-medium">{value}%</​span>
      </​div>
      <Progress value={value} className="h-1" />
    </​div>
  );
}

With Chart Integration (Optional)

For cards with charts, add Recharts:

'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/​components/​ui/​card';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
import { TrendingUp } from 'lucide-react';

interface ChartCardProps {
  data: Array<{ label: string; value: number }>;
  title: string;
}

export function ChartCard({ data, title }: ChartCardProps) {
  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
        <CardTitle className="text-sm font-medium">{title}</​CardTitle>
        <TrendingUp className="h-4 w-4 text-muted-foreground" />
      </​CardHeader>
      <CardContent>
        <ResponsiveContainer width="100%" height={300}>
          <BarChart data={data}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="label" />
            <YAxis />
            <Tooltip />
            <Bar dataKey="value" fill="#3b82f6" />
          </​BarChart>
        </​ResponsiveContainer>
      </​CardContent>
    </​Card>
  );
}

Key Conventions

• Use 'use client' directive at top
• Import Card components from @/​components/​ui/​card
• Props interface should be {ComponentName}Props
• Use Lucide React icons for visual elements
• Tailwind for styling with shadcn color utilities
• Optional: sub-components for list items, chart items, etc.
• Optional: React.memo() wrapper for performance optimization
• Color functions for responsive visual feedback (green/​yellow/​red)

Steps

1. Ask user for card name, data type, icon, and optional sub-component
2. Create file: src/​components/​dashboard/​{CardName}.tsx
3. Generate component with Card wrapper from shadcn/​ui
4. Add icon from lucide-react
5. Add props interface with TypeScript
6. Add helper functions for colors/​formatting if needed
7. Add optional sub-component if requested
8. Format with Prettier

Implementation Checklist

• Component exports correctly
• Props interface defined and typed
• Icon imported from lucide-react
• 'use client' directive present
• Uses shadcn/​ui Card components
• Color functions for visual feedback
• Sub-component created (if applicable)
• Responsive design with Tailwind