Card Standard 3 - Meeting Notes Card

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

const person1 = {
  name: "Jack Walsh",
  firstName: "Jack",
  lastName: "Walsh",
  initials: "JW",
  email: "jack.walsh@example.com",
  username: "jackwalsh",
  role: "Product Designer",
  company: "Cartwright",
  location: "Brisbane, Australia",
  avatar: "https://cdn.shadcnblocks.com/shadcnblocks/image-set/modern/avatars/avatar1.webp",
};
const person2 = {
  name: "Ilze Pērkone",
  firstName: "Ilze",
  lastName: "Pērkone",
  initials: "MK",
  email: "iperkone@example.com",
  username: "iperkone",
  role: "Brand Director",
  company: "Kivit",
  location: "Rīga, Latvia",
  avatar: "https://cdn.shadcnblocks.com/shadcnblocks/image-set/modern/avatars/avatar2.webp",
};
const person3 = {
  name: "Vernon Desilets",
  firstName: "Vernon",
  lastName: "Desilets",
  initials: "VD",
  email: "vernod@example.com",
  username: "vernod",
  role: "Creative Director",
  company: "Soho Logix",
  location: "Paris, France",
  avatar: "https://cdn.shadcnblocks.com/shadcnblocks/image-set/modern/avatars/avatar3.webp",
};

export const title = "Meeting Notes Card";

const Example = () => (
  <Card className="w-[1050px]">
    <CardHeader>
      <CardTitle>Meeting Notes</CardTitle>
      <CardDescription>
        Transcript from the meeting with the client.
      </CardDescription>
    </CardHeader>
    <CardContent className="space-y-4">
      <p>
        Client requested dashboard redesign with focus on mobile responsiveness.
      </p>
      <ol className="list-inside list-decimal space-y-2">
        <li>New analytics widgets for daily/weekly metrics</li>
        <li>Simplified navigation menu</li>
        <li>Dark mode support</li>
        <li>Timeline: 6 weeks</li>
        <li>Follow-up meeting scheduled for next Tuesday</li>
      </ol>
    </CardContent>
    <CardFooter>
      <div className="flex -space-x-2">
        {[person1, person2, person3].map((person) => (
          <Avatar className="border-2 border-background" key={person.username}>
            <AvatarImage alt={person.name} src={person.avatar} />
            <AvatarFallback>{person.initials}</AvatarFallback>
          </Avatar>
        ))}
      </div>
    </CardFooter>
  </Card>
);

export default Example;