بطاقة

import { CardBody, CardHeader, CardRoot } from 'topclassui/card'

/** The first drawing: a title and a line of text, with nothing to press. */
export default function Demo() {
  return (
    <div className="max-w-xs">
      <CardRoot>
        <CardHeader>
          <h2>Storage</h2>
        </CardHeader>
        <CardBody>You have used 18 GB of the 50 GB in your plan.</CardBody>
      </CardRoot>
    </div>
  )
}

import { Button } from 'topclassui/button'
import { CardBody, CardFooter, CardHeader, CardRoot } from 'topclassui/card'

/** The second drawing: a solid and an outline small button in the footer. */
export default function Demo() {
  return (
    <div className="max-w-xs">
      <CardRoot>
        <CardHeader>
          <h2>Version 0.4</h2>
        </CardHeader>
        <CardBody>Card is now CardRoot. Find and replace; nothing else changed.</CardBody>
        <CardFooter>
          <Button size="sm">Read more</Button>
          <Button size="sm" variant="outline" tone="neutral">Later</Button>
        </CardFooter>
      </CardRoot>
    </div>
  )
}

import { Button } from 'topclassui/button'
import { CardBody, CardFooter, CardHeader, CardRoot } from 'topclassui/card'

/** The docs code sample, with the download as a real link that keeps the button look. */
export default function Demo() {
  return (
    <div className="max-w-xs">
      <CardRoot>
        <CardHeader>
          <h2>Monthly report</h2>
        </CardHeader>
        <CardBody>Revenue rose 12% against April, driven by renewals.</CardBody>
        <CardFooter>
          <Button render={<a href="/reports/may.pdf" />} variant="outline" size="sm">
            Download PDF
          </Button>
        </CardFooter>
      </CardRoot>
    </div>
  )
}

import { CardBody, CardHeader, CardRoot } from 'topclassui/card'

/** CardBody is a block, so the caller spaces several paragraphs, here with space-y-2. */
export default function Demo() {
  return (
    <div className="max-w-sm">
      <CardRoot>
        <CardHeader>
          <h2>Before you migrate</h2>
        </CardHeader>
        <CardBody className="space-y-2">
          <p>Export your projects first. The archive keeps every file and its history.</p>
          <p>Invitations that are still pending do not move, so send them again afterwards.</p>
        </CardBody>
      </CardRoot>
    </div>
  )
}

import { CardBody, CardHeader, CardRoot } from 'topclassui/card'

/** Three cards in a grid: each takes the width of its cell and the height of its row. */
export default function Demo() {
  return (
    <div className="grid gap-4 sm:grid-cols-3">
      <CardRoot>
        <CardHeader>
          <h2>Starter</h2>
        </CardHeader>
        <CardBody>One project and 5 GB of storage.</CardBody>
      </CardRoot>
      <CardRoot>
        <CardHeader>
          <h2>Team</h2>
        </CardHeader>
        <CardBody>Ten projects, 50 GB of storage and a shared library for the whole team.</CardBody>
      </CardRoot>
      <CardRoot>
        <CardHeader>
          <h2>Business</h2>
        </CardHeader>
        <CardBody>Unlimited projects and single sign-on.</CardBody>
      </CardRoot>
    </div>
  )
}

import { CardBody, CardHeader, CardRoot, CardSkeleton } from 'topclassui/card'

/** The skeleton at its default 5:2, then one given h-36 above a real card of that height. */
export default function Demo() {
  return (
    <div className="flex max-w-xs flex-col gap-4">
      <CardSkeleton />
      <CardSkeleton className="h-36" />
      <CardRoot className="h-36">
        <CardHeader>
          <h2>Storage</h2>
        </CardHeader>
        <CardBody>You have used 18 GB of the 50 GB in your plan.</CardBody>
      </CardRoot>
    </div>
  )
}

import { Button } from 'topclassui/button'
import { CardBody, CardFooter, CardHeader, CardRoot } from 'topclassui/card'

export default function Demo() {
  return (
    <div dir="rtl" lang="ar" className="max-w-xs">
      <CardRoot>
        <CardHeader>
          <h2>التقرير الشهري</h2>
        </CardHeader>
        <CardBody>ارتفعت الإيرادات 12% مقارنة بشهر أبريل، بفضل التجديدات.</CardBody>
        <CardFooter>
          <Button size="sm">اقرأ المزيد</Button>
          <Button size="sm" variant="outline" tone="neutral">لاحقًا</Button>
        </CardFooter>
      </CardRoot>
    </div>
  )
}