Cardheaders5

1import { Avatar, AvatarFallback, AvatarImage } from "@/ui/avatar";
2import { Button } from "@/ui/button";
3import { Share } from "@mynaui/icons-react";
4 
5export default function WithAvatar() {
6  return (
7    <div className="w-full divide-y overflow-hidden rounded border bg-background">
8      <div className="flex flex-wrap items-center justify-between gap-4 px-4 py-3 sm:flex-nowrap">
9        <div className="flex items-center gap-3">
10          <Avatar>
11            <AvatarImage src="https://mynaui.com/avatars/avatar-06.webp" />
12            <AvatarFallback>PJ</AvatarFallback>
13          </Avatar>
14          <div>
15            <h3 className="text-base font-semibold">Praveen Juge</h3>
16            <p className="space-x-2 text-sm text-muted-foreground">
17              <span>3 hours ago</span>
18              <span>•</span>
19              <span>Edited</span>
20            </p>
21          </div>
22        </div>
23        <Button size="sm">
24          <Share className="size-4 stroke-2" />
25          Share
26        </Button>
27      </div>
28      <div className="p-4">
29        <div className="h-40 border-4 border-dotted bg-muted" />
30      </div>
31    </div>
32  );
33}