Link

"use client";

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  Link,
  Text
} from "@pimolu/react";

export function DemoExample() {
  return (
    <div
      className="grid grid-cols-[repeat(auto-fit,minmax(min(100%,280px),1fr))] gap-6 min-w-0 items-start"
    >
      <Card>
        <CardHeader>
          <CardTitle>Documentation</CardTitle>
          <CardDescription>A list of links with a muted description.</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid gap-5 min-w-0">
            <div className="grid gap-5 min-w-0">
              <Link href="/components/link">Getting started</Link>
              <Text tone="muted" size="sm">Install the packages and open the playground.</Text>
            </div>
            <div className="grid gap-5 min-w-0">
              <Link href="/components/link">Themes and presets</Link>
              <Text tone="muted" size="sm">Pick a palette, a radius and a density.</Text>
            </div>
            <div className="grid gap-5 min-w-0">
              <Link href="/components/link">Component inventory</Link>
              <Text tone="muted" size="sm">
                Every family, its tests and its playground page.
              </Text>
            </div>
          </div>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Footer</CardTitle>
          <CardDescription>Muted links for secondary destinations.</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex flex-wrap items-center gap-3 min-w-0">
            <Link href="/components/link" variant="muted">Privacy</Link>
            <Link href="/components/link" variant="muted">Terms</Link>
            <Link href="https://github.com/pimoludev/ui" external variant="muted">GitHub</Link>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}