Card Headers

export default function Basic() {
  return (
    <div className="w-full divide-y overflow-hidden rounded border bg-background">
      <div className="px-4 py-3">
        <h3 className="text-base font-semibold">Settings</h3>
      </div>
      <div className="p-4">
        <div className="h-40 border-4 border-dotted bg-primary-foreground" />
      </div>
    </div>
  );
}

export default function Description() {
  return (
    <div className="w-full divide-y overflow-hidden rounded border bg-background">
      <div className="px-4 py-3">
        <h3 className="text-base font-semibold">Settings</h3>
        <p className="text-sm text-muted-foreground">
          Configure your account settings and preferences.
        </p>
      </div>
      <div className="p-4">
        <div className="h-40 border-4 border-dotted bg-primary-foreground" />
      </div>
    </div>
  );
}

import { Button } from "@/components/ui/button";

export default function HeadingWithButton() {
  return (
    <div className="w-full divide-y overflow-hidden rounded border bg-background">
      <div className="flex flex-wrap items-center justify-between gap-4 px-4 py-3 sm:flex-nowrap">
        <h3 className="text-base font-semibold">Settings</h3>
        <Button size="sm">View all</Button>
      </div>
      <div className="p-4">
        <div className="h-40 border-4 border-dotted bg-primary-foreground" />
      </div>
    </div>
  );
}

import { Button } from "@/components/ui/button";

export default function WithButton() {
  return (
    <div className="w-full divide-y overflow-hidden rounded border bg-background">
      <div className="flex flex-wrap items-center justify-between gap-4 px-4 py-3 sm:flex-nowrap">
        <div>
          <h3 className="text-base font-semibold">Settings</h3>
          <p className="text-sm text-muted-foreground">
            Configure your account settings and preferences.
          </p>
        </div>
        <Button size="sm">View all</Button>
      </div>
      <div className="p-4">
        <div className="h-40 border-4 border-dotted bg-primary-foreground" />
      </div>
    </div>
  );
}

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Share } from "@mynaui/icons-react";

export default function WithAvatar() {
  return (
    <div className="w-full divide-y overflow-hidden rounded border bg-background">
      <div className="flex flex-wrap items-center justify-between gap-4 px-4 py-3 sm:flex-nowrap">
        <div className="flex items-center gap-3">
          <Avatar>
            <AvatarImage src="https://mynaui.com/avatars/avatar-06.jpg" />
            <AvatarFallback>PJ</AvatarFallback>
          </Avatar>
          <div>
            <h3 className="text-base font-semibold">Praveen Juge</h3>
            <p className="space-x-2 text-sm text-muted-foreground">
              <span>3 hours ago</span>
              <span>•</span>
              <span>Edited</span>
            </p>
          </div>
        </div>
        <Button size="sm">
          <Share className="size-4 stroke-2" />
          Share
        </Button>
      </div>
      <div className="p-4">
        <div className="h-40 border-4 border-dotted bg-primary-foreground" />
      </div>
    </div>
  );
}