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="/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>
  );
}
Card Headers

Settings

Settings

Settings

Settings

Praveen Juge
