Card

import { useState } from 'react';
import * as W from 'woosign-system';

// ThemeProvider와 ToastProvider 안에서 렌더링하세요.
export function Example() {
  const [number, setNumber] = useState(40);
  return (
    <W.Card variant="warm">
      <W.CardHeader>
        <W.CardTitle>오늘의 작은 목표</W.CardTitle>
        <W.CardDescription>꾸준함을 위한 한 걸음</W.CardDescription>
      </W.CardHeader>
      <W.CardContent>
        <W.Progress value={number} />
      </W.CardContent>
      <W.CardFooter>
        <W.Button onPress={() => setNumber(Math.min(100, number + 20))}>
          한 걸음 더
        </W.Button>
      </W.CardFooter>
    </W.Card>
  );
}