Card

"use client";
 
import { useState } from 'react';
import { Card } from 'ui-lab-components/card'
import { Button } from 'ui-lab-components/button'
import { Flex } from 'ui-lab-components/flex'
import { Badge } from 'ui-lab-components/badge';
 
export const metadata = {
  title: 'Notification Card',
  description: 'A status-driven card with a badge, body copy, and a footer action. Caller controls read state.',
};
 
export default function Example() {
  const [read, setRead] = useState(false);
 
  return (
    <Card style={{ width: 360, opacity: read ? 0.6 : 1, transition: 'opacity 0.2s' }}>
      <Card.Header>
        <Flex justify-between align-center>
          <span className="text-foreground-100" style={{ fontFamily: "var(--font-heading)", fontSize: "var(--header-text-sm)", fontWeight: "var(--font-weight-header-medium)", lineHeight: "var(--leading-heading)" }}>Deployment failed</span>
          <Badge variant="destructive">Error</Badge>
        </Flex>
      </Card.Header>
      <Card.Body>
        <p className="text-foreground-400" style={{ fontFamily: "var(--font-body)", fontSize: "var(--text-body-size)", fontWeight: "var(--font-weight-body-normal)", lineHeight: "var(--leading-body)" }}>
          The production deploy of <span className="text-foreground-200">api-gateway</span> failed at step "Run tests". Check the logs for details.
        </p>
      </Card.Body>
      <Card.Footer>
        <Flex justify-between align-center>
          <span className="text-foreground-500" style={{ fontFamily: "var(--font-body)", fontSize: "var(--text-xs)", fontWeight: "var(--font-weight-body-normal)", lineHeight: "var(--leading-sm)" }}>2 minutes ago</span>
          <Button size="sm" variant="ghost" onPress={() => setRead(true)}>
            Mark as read
          </Button>
        </Flex>
      </Card.Footer>
    </Card>
  );
}
 

"use client";
 
import { useState } from 'react';
import { Card } from 'ui-lab-components/card'
import { Button } from 'ui-lab-components/button'
import { Flex } from 'ui-lab-components/flex'
import { Switch } from 'ui-lab-components/switch';
 
export const metadata = {
  title: 'Settings Panel',
  description: 'Card used as a settings section with a list of toggle rows and save/cancel actions in the footer.',
};
 
const items = [
  { label: 'Email alerts', description: 'Receive alerts via email' },
  { label: 'Push notifications', description: 'Browser push notifications' },
  { label: 'Weekly digest', description: 'Summary sent every Monday' },
];
 
export default function Example() {
  const [enabled, setEnabled] = useState(true);
 
  return (
    <Card style={{ width: 360 }}>
      <Card.Header>
        <span className="text-sm font-medium text-foreground-100">Notifications</span>
      </Card.Header>
      <Card.Body className="space-y-4 py-4">
        {items.map((item) => (
          <Flex key={item.label} justify-between align-center>
            <div>
              <p className="text-sm text-foreground-100">{item.label}</p>
              <p className="text-xs text-foreground-500">{item.description}</p>
            </div>
            <Switch
              isSelected={enabled}
              onChange={setEnabled}
              aria-label={item.label}
            />
          </Flex>
        ))}
      </Card.Body>
      <Card.Footer>
        <Flex justify-end gap="xs">
          <Button size="sm" variant="ghost">Cancel</Button>
          <Button size="sm" variant="primary">Save</Button>
        </Flex>
      </Card.Footer>
    </Card>
  );
}
 

import { Card } from 'ui-lab-components/card'
import { Button } from 'ui-lab-components/button'
import { Flex } from 'ui-lab-components/flex'
import { Progress } from 'ui-lab-components/progress';
 
export const metadata = {
  title: 'Task Progress',
  description: 'Card displaying a checklist with a progress bar in the header to summarize completion state.',
};
 
const tasks = [
  { label: 'Design review', done: true },
  { label: 'Write changelog', done: true },
  { label: 'Update docs', done: false },
  { label: 'Deploy to staging', done: false },
];
 
const completed = tasks.filter((t) => t.done).length;
 
export default function Example() {
  return (
    <Card style={{ width: 360 }}>
      <Card.Header>
        <Flex justify-between align-center>
          <span className="text-sm font-medium text-foreground-100">Release v2.4.0</span>
          <span className="text-xs text-foreground-500">{completed}/{tasks.length}</span>
        </Flex>
        <Progress value={(completed / tasks.length) * 100} className="mt-2" />
      </Card.Header>
      <Card.Body className="py-3">
        <ul className="space-y-2">
          {tasks.map((task) => (
            <li key={task.label} className="flex items-center gap-2 text-sm">
              <span className={task.done ? 'text-foreground-500 line-through' : 'text-foreground-200'}>
                {task.label}
              </span>
            </li>
          ))}
        </ul>
      </Card.Body>
      <Card.Footer>
        <Button size="sm" variant="secondary" className="w-full">View milestone</Button>
      </Card.Footer>
    </Card>
  );
}