Users List Datatable

1'use client'
2 
3import React, { useState } from 'react';
4import { Card, CardContent, CardHeader } from '@/components/ui/card';
5import { Input } from '@/components/ui/input';
6import { Button } from '@/components/ui/button';
7import { Badge } from '@/components/ui/badge';
8import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
9import { Checkbox } from '@/components/ui/checkbox';
10import {
11  DropdownMenu,
12  DropdownMenuContent,
13  DropdownMenuGroup,
14  DropdownMenuItem,
15  DropdownMenuTrigger,
16} from '@/components/ui/dropdown-menu';
17import {
18  Search,
19  Filter,
20  Download,
21  Plus,
22  ChevronDown,
23  ChevronLeft,
24  ChevronRight,
25} from 'lucide-react';
26import { usersData } from "@/components/data/datatable-1-data";
27import { cn } from '@/lib/utils';
28 
29export function Datatable1() {
30  const [currentPage, setCurrentPage] = useState(1);
31  const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
32  const itemsPerPage = 6;
33  const totalPages = Math.ceil(usersData.length / itemsPerPage);
34 
35  const currentUsers = usersData.slice(
36    (currentPage - 1) * itemsPerPage,
37    currentPage * itemsPerPage
38  );
39 
40  const toggleUserSelection = (userId: string) => {
41    setSelectedUsers((prev) =>
42      prev.includes(userId)
43        ? prev.filter((id) => id !== userId)
44        : [...prev, userId]
45    );
46  };
47 
48  const toggleAllUsers = () => {
49    if (selectedUsers.length === currentUsers.length && currentUsers.length > 0) {
50      setSelectedUsers([]);
51    } else {
52      setSelectedUsers(currentUsers.map((user) => user.id));
53    }
54  };
55 
56  const getInitials = (name: string) => {
57    return name
58      .split(' ')
59      .map((n) => n[0])
60      .join('')
61      .toUpperCase();
62  };
63 
64  return (
65    <div className="w-full max-w-7xl space-y-6 my-8 mx-auto px-4 sm:px-6 lg:px-8">
66 
67      {/* Main Card */}
68      <Card className='pb-0 gap-0'>
69        <CardHeader className="border-b border-border gap-0">
70          <div className="flex flex-col sm:flex-row items-center gap-4">
71            <div className="relative flex-1 max-w-sm">
72              <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
73              <Input
74                placeholder="Search user"
75                className="pl-10"
76              />
77            </div>
78            <div className="sm:ml-auto flex items-center gap-2 flex-wrap justify-center">
79              <Button variant="outline" size="sm" className="h-8 px-3 text-xs cursor-pointer">
80                <Filter />
81// … truncated