Projects Components in Shadcn-Ui library

import { Button } from "@/components/ui/button"
import { Ellipsis, MessageSquareText, Paperclip, Plus } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  CardDescription,
  CardFooter
} from "@/components/ui/card"
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar"

export function KanbanBoard1() {
  return (
    <div className="py-4 px-4">
      <div className="flex flex-wrap -m-4">
        <div className="p-4 w-full md:w-1/3">
          <Card className="mb-6">
            <CardHeader className="p-3 px-6 space-y-0 flex flex-row items-center justify-between gap-3">
                <CardTitle className="text-base font-medium">Open</CardTitle>
                <Badge variant="secondary" className="font-medium">3</Badge>
            </CardHeader>
          </Card>
          <Card className="mb-4">
            <CardHeader className="p-3 px-6 flex flex-wrap flex-row items-center justify-between gap-3">
              <Badge variant="secondary" className="font-medium">Marketing</Badge>
              <Button variant="ghost" size="sm" className="text-muted-foreground">
                <Ellipsis />
              </Button>
            </CardHeader>
            <CardContent>
              <CardTitle className="mb-1 text-base font-medium">Header for random activity</CardTitle>
              <CardDescription>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Random description for this task.</CardDescription>
            </CardContent>
            <CardFooter className="flex flex-wrap justify-between gap-2">
              <div className="flex">
                <Avatar className="w-8 h-8">
                  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                  <AvatarFallback>CN</AvatarFallback>
                </Avatar>
                <Avatar className="relative -ml-1 w-8 h-8">
                  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                  <AvatarFallback>CN</AvatarFallback>
                </Avatar>
                <Avatar className="relative -ml-1 w-8 h-8">
                  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                  <AvatarFallback>CN</AvatarFallback>
                </Avatar>
                <Avatar className="relative -ml-1 w-8 h-8">
                  <AvatarImage src="" alt="@shadcn" />
                  <AvatarFallback>+</AvatarFallback>
                </Avatar>
              </div>
              <div className="flex flex-wrap gap-2">
                <div className="flex items-center gap-1">
                  <MessageSquareText className="w-4 h-4"/>
                  <span className="text-sm text-muted-foreground">6</span>
                </div>
                <div className="flex items-center gap-1">
                  <Paperclip className="w-4 h-4"/>
                  <span className="text-sm text-muted-foreground">2</span>
                </div>
              </div>
            </CardFooter>
          </Card>
          <Card className="mb-4">
            <CardHeader className="p-3 px-6 flex flex-wrap flex-row items-center justify-between gap-3">
              <Badge variant="secondary" className="font-medium">Marketing</Badge>
              <Button variant="ghost" size="sm" className="text-muted-foreground">
                <Ellipsis />
              </Button>
            </CardHeader>
            <CardContent>
              <CardTitle className="mb-1 text-base font-medium">Header for random activity</CardTitle>
              <CardDescription>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Random description for this task.</CardDescription>
            </CardContent>
            <CardFooter className="flex flex-wrap justify-between gap-2">
              <div className="flex">
                <Avatar className="w-8 h-8">
                  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                  <AvatarFallback>CN</AvatarFallback>
                </Avatar>
                <Avatar className="relative -ml-1 w-8 h-8">
                  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                  <AvatarFallback>CN</AvatarFallback>
                </Avatar>
                <Avatar className="relative -ml-1 w-8 h-8">
                  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                  <AvatarFallback>CN</AvatarFallback>
                </Avatar>
                <Avatar className="relative -ml-1 w-8 h-8">
                  <AvatarImage src="" alt="@shadcn" />
                  <AvatarFallback>+</AvatarFallback>
                </Avatar>
              </div>
              <div className="flex flex-wrap gap-2">
                <div className="flex items-center gap-1">
                  <MessageSquareText className="w-4 h-4"/>
                  <span className="text-sm text-muted-foreground">6</span>
                </div>
                <div className="flex items-center gap-1">
                  <Paperclip className="w-4 h-4"/>
                  <span className="text-sm text-muted-foreground">2</span>
                </div>
              </div>
            </CardFooter>
          </Card>
          <Card className="mb-4">
            <CardHeader className="p-3 px-6 flex flex-wrap flex-row items-center justify-between gap-3">
              <Badge variant="secondary" className="font-medium">Marketing</Badge>
              <Button variant="ghost" size="sm" className="text-muted-foreground">
                <Ellipsis />
              </Button>
            </CardHeader>
            <CardContent>
              <CardTitle className="mb-1 text-base font-medium">Header for random activity</CardTitle>
              <CardDescription>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Random description for this task.</CardDescription>
            </CardContent>
            <CardFooter className="flex flex-wrap justify-between gap-2">
              <div className="flex">
                <Avatar className="w-8 h-8">
                  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                  <AvatarFallback>CN</AvatarFallback>
                </Avatar>
                <Avatar className="relative -ml-1 w-8 h-8">
                  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                  <AvatarFallback>CN</AvatarFallback>
                </Avatar>
                <Avatar className="relative -ml-1 w-8 h-8">
                  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                  <AvatarFallback>CN</AvatarFallback>
                </Avatar>
                <Avatar className="relative -ml-1 w-8 h-8">
                  <AvatarImage src="" alt="@shadcn" />
                  <AvatarFallback>+</AvatarFallback>
                </Avatar>
              </div>
              <div className="flex flex-wrap gap-2">
                <div className="flex items-center gap-1">
                  <MessageSquareText className="w-4 h-4"/>
                  <span className="text-sm text-muted-foreground">6</span>
                </div>
                <div className="flex items-center gap-1">
                  <Paperclip className="w-4 h-4"/>
                  <span className="text-sm text-muted-foreground">2</span>
                </div>
              </div>
            </CardFooter>
          </Card>
          <Button variant="outline" className="w-full">
            <Plus /> Add New Task
          </Button>
        </div>
        <div className="p-4 w-full md:w-1/3">
          <Card className="mb-6">
            <CardHeader className="p-3 px-6 space-y-0 flex flex-row items-center justify-between gap-3">
                <CardTitle className="text-base font-medium">In Progress</CardTitle>
                <Badge variant="secondary" className="font-medium">3</Badge>
            </CardHeader>
          </Card>
          <Card className="mb-4">
            <CardHeader className="p-3 px-6 flex flex-wrap flex-row items-center justify-between gap-3">
              <Badge variant="secondary" className="font-medium">Marketing</Badge>
              <Button variant="ghost" size="sm" className="text-muted-foreground">
                <Ellipsis />
              </Button>
            </CardHeader>
            <CardContent>
              <CardTitle className="mb-1 text-base font-medium">Header for random activity</CardTitle>
              <CardDescription>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Random description for this task.</CardDescription>
            </CardContent>
            <CardFooter className="flex flex-wrap justify-between gap-2">
              <div className="flex">
                <Avatar className="w-8 h-8">
                  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                  <AvatarFallback>CN</AvatarFallback>
                </Avatar>
                <Avatar className="relative -ml-1 w-8 h-8">
                  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                  <AvatarFallback>CN</AvatarFallback>
                </Avatar>
                <Avatar className="relative -ml-1 w-8 h-8">
                  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                  <AvatarFallback>CN</AvatarFallback>
                </Avatar>
                <Avatar className="relative -ml-1 w-8 h-8">
                  <AvatarImage src="" alt="@shadcn" />
                  <AvatarFallback>+</AvatarFallback>
                </Avatar>
              </div>
              <div className="flex flex-wrap gap-2">
                <div className="flex items-center gap-1">
                  <MessageSquareText className="w-4 h-4"/>
                  <span className="text-sm text-muted-foreground">6</span>
                </div>
                <div className="flex items-center gap-1">
                  <Paperclip className="w-4 h-4"/>
                  <span className="text-sm text-muted-foreground">2</span>
                </div>
              </div>
            </CardFooter>
          </Card>
          <Card className="mb-4">
            <CardHeader className="p-3 px-6 flex flex-wrap flex-row items-center justify-between gap-3">
              <Badge variant="secondary" className="font-medium">Marketing</Badge>
              <Button variant="ghost" size="sm" className="text-muted-foreground">
                <Ellipsis />
              </Button>
            </CardHeader>
            <CardContent>
              <CardTitle className="mb-1 text-base font-medium">Header for random activity</CardTitle>
              <CardDescription>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Random description for this task.</CardDescription>
            </CardContent>
            <CardFooter className="flex flex-wrap justify-between gap-2">
              <div className="flex">
                <Avatar className="w-8 h-8">
                  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                  <AvatarFallback>CN</AvatarFallback>
                </Avatar>
                <Avatar className="relative -ml-1 w-8 h-8">
                  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                  <AvatarFallback>CN</AvatarFallback>
                </Avatar>
                <Avatar className="relative -ml-1 w-8 h-8">
                  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                  <AvatarFallback>CN</AvatarFallback>
                </Avatar>
                <Avatar className="relative -ml-1 w-8 h-8">
                  <AvatarImage src="" alt="@shadcn" />
                  <AvatarFallback>+</AvatarFallback>
                </Avatar>
              </div>
              <div className="flex flex-wrap gap-2">
                <div className="flex items-center gap-1">
                  <MessageSquareText className="w-4 h-4"/>
                  <span className="text-sm text-muted-foreground">6</span>
                </div>
                <div className="flex items-center gap-1">
                  <Paperclip className="w-4 h-4"/>
                  <span className="text-sm text-muted-foreground">2</span>
                </div>
              </div>
            </CardFooter>
          </Card>
          <Card className="mb-4">
            <CardHeader className="p-3 px-6 flex flex-wrap flex-row items-center justify-between gap-3">
              <Badge variant="secondary" className="font-medium">Marketing</Badge>
              <Button variant="ghost" size="sm" className="text-muted-foreground">
                <Ellipsis />
              </Button>
            </CardHeader>
            <CardContent>
              <CardTitle className="mb-1 text-base font-medium">Header for random activity</CardTitle>
              <CardDescription>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Random description for this task.</CardDescription>
            </CardContent>
            <CardFooter className="flex flex-wrap justify-between gap-2">
              <div className="flex">
                <Avatar className="w-8 h-8">
                  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                  <AvatarFallback>CN</AvatarFallback>
                </Avatar>
                <Avatar className="relative -ml-1 w-8 h-8">
                  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                  <AvatarFallback>CN</AvatarFallback>
                </Avatar>
                <Avatar className="relative -ml-1 w-8 h-8">
                  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                  <AvatarFallback>CN</AvatarFallback>
                </Avatar>
                <Avatar className="relative -ml-1 w-8 h-8">
                  <AvatarImage src="" alt="@shadcn" />
                  <AvatarFallback>+</AvatarFallback>
                </Avatar>
              </div>
              <div className="flex flex-wrap gap-2">
                <div className="flex items-center gap-1">
                  <MessageSquareText className="w-4 h-4"/>
                  <span className="text-sm text-muted-foreground">6</span>
                </div>
                <div className="flex items-center gap-1">
                  <Paperclip className="w-4 h-4"/>
                  <span className="text-sm text-muted-foreground">2</span>
                </div>
              </div>
            </CardFooter>
          </Card>
          <Button variant="outline" className="w-full">
            <Plus /> Add New Task
          </Button>
        </div>
        <div className="p-4 w-full md:w-1/3">
          <Card className="mb-6">
            <CardHeader className="p-3 px-6 space-y-0 flex flex-row items-center justify-between gap-3">
                <CardTitle className="text-base font-medium">Finished</CardTitle>
                <Badge variant="secondary" className="font-medium">3</Badge>
            </CardHeader>
          </Card>
          <Card className="mb-4">
            <CardHeader className="p-3 px-6 flex flex-wrap flex-row items-center justify-between gap-3">
              <Badge variant="secondary" className="font-medium">Marketing</Badge>
              <Button variant="ghost" size="sm" className="text-muted-foreground">
                <Ellipsis />
              </Button>
            </CardHeader>
            <CardContent>
              <CardTitle className="mb-1 text-base font-medium">Header for random activity</CardTitle>
              <CardDescription>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Random description for this task.</CardDescription>
            </CardContent>
            <CardFooter className="flex flex-wrap justify-between gap-2">
              <div className="flex">
                <Avatar className="w-8 h-8">
                  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                  <AvatarFallback>CN</AvatarFallback>
                </Avatar>
                <Avatar className="relative -ml-1 w-8 h-8">
                  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                  <AvatarFallback>CN</AvatarFallback>
                </Avatar>
                <Avatar className="relative -ml-1 w-8 h-8">
                  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                  <AvatarFallback>CN</AvatarFallback>
                </Avatar>
                <Avatar className="relative -ml-1 w-8 h-8">
                  <AvatarImage src="" alt="@shadcn" />
                  <AvatarFallback>+</AvatarFallback>
                </Avatar>
              </div>
              <div className="flex flex-wrap gap-2">
                <div className="flex items-center gap-1">
                  <MessageSquareText className="w-4 h-4"/>
                  <span className="text-sm text-muted-foreground">6</span>
                </div>
                <div className="flex items-center gap-1">
                  <Paperclip className="w-4 h-4"/>
                  <span className="text-sm text-muted-foreground">2</span>
                </div>
              </div>
            </CardFooter>
          </Card>
          <Card className="mb-4">
            <CardHeader className="p-3 px-6 flex flex-wrap flex-row items-center justify-between gap-3">
              <Badge variant="secondary" className="font-medium">Marketing</Badge>
              <Button variant="ghost" size="sm" className="text-muted-foreground">
                <Ellipsis />
              </Button>
            </CardHeader>
            <CardContent>
              <CardTitle className="mb-1 text-base font-medium">Header for random activity</CardTitle>
              <CardDescription>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Random description for this task.</CardDescription>
            </CardContent>
            <CardFooter className="flex flex-wrap justify-between gap-2">
              <div className="flex">
                <Avatar className="w-8 h-8">
                  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                  <AvatarFallback>CN</AvatarFallback>
                </Avatar>
                <Avatar className="relative -ml-1 w-8 h-8">
                  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                  <AvatarFallback>CN</AvatarFallback>
                </Avatar>
                <Avatar className="relative -ml-1 w-8 h-8">
                  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                  <AvatarFallback>CN</AvatarFallback>
                </Avatar>
                <Avatar className="relative -ml-1 w-8 h-8">
                  <AvatarImage src="" alt="@shadcn" />
                  <AvatarFallback>+</AvatarFallback>
                </Avatar>
              </div>
              <div className="flex flex-wrap gap-2">
                <div className="flex items-center gap-1">
                  <MessageSquareText className="w-4 h-4"/>
                  <span className="text-sm text-muted-foreground">6</span>
                </div>
                <div className="flex items-center gap-1">
                  <Paperclip className="w-4 h-4"/>
                  <span className="text-sm text-muted-foreground">2</span>
                </div>
              </div>
            </CardFooter>
          </Card>
          <Card className="mb-4">
            <CardHeader className="p-3 px-6 flex flex-wrap flex-row items-center justify-between gap-3">
              <Badge variant="secondary" className="font-medium">Marketing</Badge>
              <Button variant="ghost" size="sm" className="text-muted-foreground">
                <Ellipsis />
              </Button>
            </CardHeader>
            <CardContent>
              <CardTitle className="mb-1 text-base font-medium">Header for random activity</CardTitle>
              <CardDescription>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Random description for this task.</CardDescription>
            </CardContent>
            <CardFooter className="flex flex-wrap justify-between gap-2">
              <div className="flex">
                <Avatar className="w-8 h-8">
                  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                  <AvatarFallback>CN</AvatarFallback>
                </Avatar>
                <Avatar className="relative -ml-1 w-8 h-8">
                  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                  <AvatarFallback>CN</AvatarFallback>
                </Avatar>
                <Avatar className="relative -ml-1 w-8 h-8">
                  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                  <AvatarFallback>CN</AvatarFallback>
                </Avatar>
                <Avatar className="relative -ml-1 w-8 h-8">
                  <AvatarImage src="" alt="@shadcn" />
                  <AvatarFallback>+</AvatarFallback>
                </Avatar>
              </div>
              <div className="flex flex-wrap gap-2">
                <div className="flex items-center gap-1">
                  <MessageSquareText className="w-4 h-4"/>
                  <span className="text-sm text-muted-foreground">6</span>
                </div>
                <div className="flex items-center gap-1">
                  <Paperclip className="w-4 h-4"/>
                  <span className="text-sm text-muted-foreground">2</span>
                </div>
              </div>
            </CardFooter>
          </Card>
          <Button variant="outline" className="w-full">
            <Plus /> Add New Task
          </Button>
        </div>
      </div>
    </div>
  )
}