Users Components in Shadcn-Ui library

import * as React from "react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { User, MessageCircleMore, Mailbox, MapPinCheckInside, Briefcase, Ellipsis } from "lucide-react"
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  CardDescription,
  CardFooter
} from "@/components/ui/card"
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar"

export function User1() {
  return (
    <div className="py-4 px-4">
      <div className="flex flex-wrap -m-4">
        <div className="p-4 w-full md:w-1/2">
          <Card>
            <CardHeader className="pb-4">
              <div className="flex flex-wrap items-center justify-between gap-4">
                <div className="flex flex-wrap items-center gap-4">
                  <div>
                    <Avatar className="w-20 h-20">
                      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                      <AvatarFallback>CN</AvatarFallback>
                    </Avatar>
                  </div>
                  <div>
                    <div className="mb-2 flex flex-wrap gap-2">
                      <Badge variant="secondary" className="font-medium">72 Tasks</Badge>
                      <CardTitle className="text-sm">Monique Smith</CardTitle>
                    </div>
                    <CardDescription>DevOps Engineer</CardDescription>
                  </div>
                </div>
                <Button variant="ghost" size="icon">
                  <Ellipsis />
                </Button>
              </div>
            </CardHeader>
            <CardContent>
              <CardDescription className="mb-6">I distinguish three main text objectives could be merely to inform people. A second could be persuade people. You want people to bay objective.</CardDescription>
              <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
                <div className="flex items-center gap-2">
                  <MapPinCheckInside className="w-4 h-4"/>
                  <p className="text-sm">Location</p>
                </div>
                <p className="text-sm">Warsaw, Poland</p>
              </div>
              <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
                <div className="flex items-center gap-2">
                  <Mailbox className="w-4 h-4"/>
                  <p className="text-sm">Email address</p>
                </div>
                <p className="text-sm">moniquesmith@gmail.com</p>
              </div>
              <div className="mb-2 flex flex-wrap items-center justify-between gap-2">
                <div className="flex items-center gap-2">
                  <Briefcase className="w-4 h-4"/>
                  <p className="text-sm">Company Name</p>
                </div>
                <p className="text-sm">Netflix</p>
              </div>
            </CardContent>
            <CardFooter className="flex flex-wrap md:flex-nowrap justify-between gap-3">
              <Button className="w-full">
                <MessageCircleMore /> Message
              </Button>
              <Button variant="secondary" className="w-full">
                <User /> Profile
              </Button>
            </CardFooter>
          </Card>
        </div>
        <div className="p-4 w-full md:w-1/2">
          <Card>
            <CardHeader className="pb-4">
              <div className="flex flex-wrap items-center justify-between gap-4">
                <div className="flex flex-wrap items-center gap-4">
                  <div>
                    <Avatar className="w-20 h-20">
                      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                      <AvatarFallback>CN</AvatarFallback>
                    </Avatar>
                  </div>
                  <div>
                    <div className="mb-2 flex flex-wrap gap-2">
                      <Badge variant="secondary" className="font-medium">72 Tasks</Badge>
                      <CardTitle className="text-sm">Monique Smith</CardTitle>
                    </div>
                    <CardDescription>DevOps Engineer</CardDescription>
                  </div>
                </div>
                <Button variant="ghost" size="icon">
                  <Ellipsis />
                </Button>
              </div>
            </CardHeader>
            <CardContent>
              <CardDescription className="mb-6">I distinguish three main text objectives could be merely to inform people. A second could be persuade people. You want people to bay objective.</CardDescription>
              <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
                <div className="flex items-center gap-2">
                  <MapPinCheckInside className="w-4 h-4"/>
                  <p className="text-sm">Location</p>
                </div>
                <p className="text-sm">Warsaw, Poland</p>
              </div>
              <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
                <div className="flex items-center gap-2">
                  <Mailbox className="w-4 h-4"/>
                  <p className="text-sm">Email address</p>
                </div>
                <p className="text-sm">moniquesmith@gmail.com</p>
              </div>
              <div className="mb-2 flex flex-wrap items-center justify-between gap-2">
                <div className="flex items-center gap-2">
                  <Briefcase className="w-4 h-4"/>
                  <p className="text-sm">Company Name</p>
                </div>
                <p className="text-sm">Netflix</p>
              </div>
            </CardContent>
            <CardFooter className="flex flex-wrap md:flex-nowrap justify-between gap-3">
              <Button className="w-full">
                <MessageCircleMore /> Message
              </Button>
              <Button variant="secondary" className="w-full">
                <User /> Profile
              </Button>
            </CardFooter>
          </Card>
        </div>
        <div className="p-4 w-full md:w-1/2">
          <Card>
            <CardHeader className="pb-4">
              <div className="flex flex-wrap items-center justify-between gap-4">
                <div className="flex flex-wrap items-center gap-4">
                  <div>
                    <Avatar className="w-20 h-20">
                      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                      <AvatarFallback>CN</AvatarFallback>
                    </Avatar>
                  </div>
                  <div>
                    <div className="mb-2 flex flex-wrap gap-2">
                      <Badge variant="secondary" className="font-medium">72 Tasks</Badge>
                      <CardTitle className="text-sm">Monique Smith</CardTitle>
                    </div>
                    <CardDescription>DevOps Engineer</CardDescription>
                  </div>
                </div>
                <Button variant="ghost" size="icon">
                  <Ellipsis />
                </Button>
              </div>
            </CardHeader>
            <CardContent>
              <CardDescription className="mb-6">I distinguish three main text objectives could be merely to inform people. A second could be persuade people. You want people to bay objective.</CardDescription>
              <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
                <div className="flex items-center gap-2">
                  <MapPinCheckInside className="w-4 h-4"/>
                  <p className="text-sm">Location</p>
                </div>
                <p className="text-sm">Warsaw, Poland</p>
              </div>
              <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
                <div className="flex items-center gap-2">
                  <Mailbox className="w-4 h-4"/>
                  <p className="text-sm">Email address</p>
                </div>
                <p className="text-sm">moniquesmith@gmail.com</p>
              </div>
              <div className="mb-2 flex flex-wrap items-center justify-between gap-2">
                <div className="flex items-center gap-2">
                  <Briefcase className="w-4 h-4"/>
                  <p className="text-sm">Company Name</p>
                </div>
                <p className="text-sm">Netflix</p>
              </div>
            </CardContent>
            <CardFooter className="flex flex-wrap md:flex-nowrap justify-between gap-3">
              <Button className="w-full">
                <MessageCircleMore /> Message
              </Button>
              <Button variant="secondary" className="w-full">
                <User /> Profile
              </Button>
            </CardFooter>
          </Card>
        </div>
        <div className="p-4 w-full md:w-1/2">
          <Card>
            <CardHeader className="pb-4">
              <div className="flex flex-wrap items-center justify-between gap-4">
                <div className="flex flex-wrap items-center gap-4">
                  <div>
                    <Avatar className="w-20 h-20">
                      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                      <AvatarFallback>CN</AvatarFallback>
                    </Avatar>
                  </div>
                  <div>
                    <div className="mb-2 flex flex-wrap gap-2">
                      <Badge variant="secondary" className="font-medium">72 Tasks</Badge>
                      <CardTitle className="text-sm">Monique Smith</CardTitle>
                    </div>
                    <CardDescription>DevOps Engineer</CardDescription>
                  </div>
                </div>
                <Button variant="ghost" size="icon">
                  <Ellipsis />
                </Button>
              </div>
            </CardHeader>
            <CardContent>
              <CardDescription className="mb-6">I distinguish three main text objectives could be merely to inform people. A second could be persuade people. You want people to bay objective.</CardDescription>
              <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
                <div className="flex items-center gap-2">
                  <MapPinCheckInside className="w-4 h-4"/>
                  <p className="text-sm">Location</p>
                </div>
                <p className="text-sm">Warsaw, Poland</p>
              </div>
              <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
                <div className="flex items-center gap-2">
                  <Mailbox className="w-4 h-4"/>
                  <p className="text-sm">Email address</p>
                </div>
                <p className="text-sm">moniquesmith@gmail.com</p>
              </div>
              <div className="mb-2 flex flex-wrap items-center justify-between gap-2">
                <div className="flex items-center gap-2">
                  <Briefcase className="w-4 h-4"/>
                  <p className="text-sm">Company Name</p>
                </div>
                <p className="text-sm">Netflix</p>
              </div>
            </CardContent>
            <CardFooter className="flex flex-wrap md:flex-nowrap justify-between gap-3">
              <Button className="w-full">
                <MessageCircleMore /> Message
              </Button>
              <Button variant="secondary" className="w-full">
                <User /> Profile
              </Button>
            </CardFooter>
          </Card>
        </div>
      </div>
    </div>
  )
}