Tables Components in Shadcn-Ui library

import { Search, Files, List, TableCellsSplit, Clock2 } from "lucide-react"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
import {
    Card,
    CardDescription,
    CardHeader,
    CardTitle,
} from "@/components/ui/card"

export function FileTable1() {
  return (
    <div className="py-4 px-4">
        <div className="mb-6 flex flex-row flex-wrap justify-between gap-4">
            <h3 className="text-xl font-bold">Project Files</h3>
            <div className="flex flex-wrap items-center gap-5">
                <div className="relative w-full sm:w-[330px]">
                    <Input
                        type="search"
                        placeholder="Type to search...."
                        className="pr-8 w-full"
                    />
                    <Search className="absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                </div>
                <Button size="sm" className="text-sm gap-1.5">
                    <Files />File Manager
                </Button>
                <div className="flex flex-wrap gap-3">
                    <Button variant="outline" size="icon">
                        <List />
                    </Button>
                    <Button variant="outline" size="icon">
                        <TableCellsSplit />
                    </Button>
                </div>
            </div>
        </div>
        <div className="flex flex-wrap -m-4">
            <div className="w-full sm:w-1/3 md:w-1/5 p-4">
                <Card>
                    <CardHeader className="p-4 pt-8">
                        <Avatar className="mb-6 mx-auto w-16 h-16">
                            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                            <AvatarFallback>CN</AvatarFallback>
                        </Avatar>
                        <CardTitle className="text-xs font-medium">Lorem ipsum file Name</CardTitle>
                        <CardDescription className="text-xs flex gap-1">
                            <Clock2 className="w-4 h-4" /> 2h Ago
                        </CardDescription>
                    </CardHeader>
                </Card>
            </div>
            <div className="w-full sm:w-1/3 md:w-1/5 p-4">
                <Card>
                    <CardHeader className="p-4 pt-8">
                        <Avatar className="mb-6 mx-auto w-16 h-16">
                            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                            <AvatarFallback>CN</AvatarFallback>
                        </Avatar>
                        <CardTitle className="text-xs font-medium">Lorem ipsum file Name</CardTitle>
                        <CardDescription className="text-xs flex gap-1">
                            <Clock2 className="w-4 h-4" /> 2h Ago
                        </CardDescription>
                    </CardHeader>
                </Card>
            </div>
            <div className="w-full sm:w-1/3 md:w-1/5 p-4">
                <Card>
                    <CardHeader className="p-4 pt-8">
                        <Avatar className="mb-6 mx-auto w-16 h-16">
                            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                            <AvatarFallback>CN</AvatarFallback>
                        </Avatar>
                        <CardTitle className="text-xs font-medium">Lorem ipsum file Name</CardTitle>
                        <CardDescription className="text-xs flex gap-1">
                            <Clock2 className="w-4 h-4" /> 2h Ago
                        </CardDescription>
                    </CardHeader>
                </Card>
            </div>
            <div className="w-full sm:w-1/3 md:w-1/5 p-4">
                <Card>
                    <CardHeader className="p-4 pt-8">
                        <Avatar className="mb-6 mx-auto w-16 h-16">
                            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                            <AvatarFallback>CN</AvatarFallback>
                        </Avatar>
                        <CardTitle className="text-xs font-medium">Lorem ipsum file Name</CardTitle>
                        <CardDescription className="text-xs flex gap-1">
                            <Clock2 className="w-4 h-4" /> 2h Ago
                        </CardDescription>
                    </CardHeader>
                </Card>
            </div>
            <div className="w-full sm:w-1/3 md:w-1/5 p-4">
                <Card>
                    <CardHeader className="p-4 pt-8">
                        <Avatar className="mb-6 mx-auto w-16 h-16">
                            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                            <AvatarFallback>CN</AvatarFallback>
                        </Avatar>
                        <CardTitle className="text-xs font-medium">Lorem ipsum file Name</CardTitle>
                        <CardDescription className="text-xs flex gap-1">
                            <Clock2 className="w-4 h-4" /> 2h Ago
                        </CardDescription>
                    </CardHeader>
                </Card>
            </div>
            <div className="w-full sm:w-1/3 md:w-1/5 p-4">
                <Card>
                    <CardHeader className="p-4 pt-8">
                        <Avatar className="mb-6 mx-auto w-16 h-16">
                            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                            <AvatarFallback>CN</AvatarFallback>
                        </Avatar>
                        <CardTitle className="text-xs font-medium">Lorem ipsum file Name</CardTitle>
                        <CardDescription className="text-xs flex gap-1">
                            <Clock2 className="w-4 h-4" /> 2h Ago
                        </CardDescription>
                    </CardHeader>
                </Card>
            </div>
            <div className="w-full sm:w-1/3 md:w-1/5 p-4">
                <Card>
                    <CardHeader className="p-4 pt-8">
                        <Avatar className="mb-6 mx-auto w-16 h-16">
                            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                            <AvatarFallback>CN</AvatarFallback>
                        </Avatar>
                        <CardTitle className="text-xs font-medium">Lorem ipsum file Name</CardTitle>
                        <CardDescription className="text-xs flex gap-1">
                            <Clock2 className="w-4 h-4" /> 2h Ago
                        </CardDescription>
                    </CardHeader>
                </Card>
            </div>
            <div className="w-full sm:w-1/3 md:w-1/5 p-4">
                <Card>
                    <CardHeader className="p-4 pt-8">
                        <Avatar className="mb-6 mx-auto w-16 h-16">
                            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                            <AvatarFallback>CN</AvatarFallback>
                        </Avatar>
                        <CardTitle className="text-xs font-medium">Lorem ipsum file Name</CardTitle>
                        <CardDescription className="text-xs flex gap-1">
                            <Clock2 className="w-4 h-4" /> 2h Ago
                        </CardDescription>
                    </CardHeader>
                </Card>
            </div>
            <div className="w-full sm:w-1/3 md:w-1/5 p-4">
                <Card>
                    <CardHeader className="p-4 pt-8">
                        <Avatar className="mb-6 mx-auto w-16 h-16">
                            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                            <AvatarFallback>CN</AvatarFallback>
                        </Avatar>
                        <CardTitle className="text-xs font-medium">Lorem ipsum file Name</CardTitle>
                        <CardDescription className="text-xs flex gap-1">
                            <Clock2 className="w-4 h-4" /> 2h Ago
                        </CardDescription>
                    </CardHeader>
                </Card>
            </div>
            <div className="w-full sm:w-1/3 md:w-1/5 p-4">
                <Card>
                    <CardHeader className="p-4 pt-8">
                        <Avatar className="mb-6 mx-auto w-16 h-16">
                            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                            <AvatarFallback>CN</AvatarFallback>
                        </Avatar>
                        <CardTitle className="text-xs font-medium">Lorem ipsum file Name</CardTitle>
                        <CardDescription className="text-xs flex gap-1">
                            <Clock2 className="w-4 h-4" /> 2h Ago
                        </CardDescription>
                    </CardHeader>
                </Card>
            </div>
            <div className="w-full sm:w-1/3 md:w-1/5 p-4">
                <Card>
                    <CardHeader className="p-4 pt-8">
                        <Avatar className="mb-6 mx-auto w-16 h-16">
                            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                            <AvatarFallback>CN</AvatarFallback>
                        </Avatar>
                        <CardTitle className="text-xs font-medium">Lorem ipsum file Name</CardTitle>
                        <CardDescription className="text-xs flex gap-1">
                            <Clock2 className="w-4 h-4" /> 2h Ago
                        </CardDescription>
                    </CardHeader>
                </Card>
            </div>
            <div className="w-full sm:w-1/3 md:w-1/5 p-4">
                <Card>
                    <CardHeader className="p-4 pt-8">
                        <Avatar className="mb-6 mx-auto w-16 h-16">
                            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                            <AvatarFallback>CN</AvatarFallback>
                        </Avatar>
                        <CardTitle className="text-xs font-medium">Lorem ipsum file Name</CardTitle>
                        <CardDescription className="text-xs flex gap-1">
                            <Clock2 className="w-4 h-4" /> 2h Ago
                        </CardDescription>
                    </CardHeader>
                </Card>
            </div>
            <div className="w-full sm:w-1/3 md:w-1/5 p-4">
                <Card>
                    <CardHeader className="p-4 pt-8">
                        <Avatar className="mb-6 mx-auto w-16 h-16">
                            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                            <AvatarFallback>CN</AvatarFallback>
                        </Avatar>
                        <CardTitle className="text-xs font-medium">Lorem ipsum file Name</CardTitle>
                        <CardDescription className="text-xs flex gap-1">
                            <Clock2 className="w-4 h-4" /> 2h Ago
                        </CardDescription>
                    </CardHeader>
                </Card>
            </div>
            <div className="w-full sm:w-1/3 md:w-1/5 p-4">
                <Card>
                    <CardHeader className="p-4 pt-8">
                        <Avatar className="mb-6 mx-auto w-16 h-16">
                            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                            <AvatarFallback>CN</AvatarFallback>
                        </Avatar>
                        <CardTitle className="text-xs font-medium">Lorem ipsum file Name</CardTitle>
                        <CardDescription className="text-xs flex gap-1">
                            <Clock2 className="w-4 h-4" /> 2h Ago
                        </CardDescription>
                    </CardHeader>
                </Card>
            </div>
            <div className="w-full sm:w-1/3 md:w-1/5 p-4">
                <Card>
                    <CardHeader className="p-4 pt-8">
                        <Avatar className="mb-6 mx-auto w-16 h-16">
                            <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                            <AvatarFallback>CN</AvatarFallback>
                        </Avatar>
                        <CardTitle className="text-xs font-medium">Lorem ipsum file Name</CardTitle>
                        <CardDescription className="text-xs flex gap-1">
                            <Clock2 className="w-4 h-4" /> 2h Ago
                        </CardDescription>
                    </CardHeader>
                </Card>
            </div>
        </div>
    </div>
  )
}