AbdulElahGwaith/free-react-tailwind-admin-dashboard

1import {2  Table,3  TableBody,4  TableCell,5  TableHeader,6  TableRow,7} from "../../ui/table";8 9import Badge from "../../ui/badge/Badge";10 11interface Order {12  id: number;13  user: {14    image: string;15    name: string;16    role: string;17  };18  projectName: string;19  team: {20    images: string[];21  };22  status: string;23  budget: string;24}25 26// Define the table data using the interface27const tableData: Order[] = [28  {29    id: 1,30    user: {31      image: "/images/user/user-17.jpg",32      name: "Lindsey Curtis",33      role: "Web Designer",34    },35    projectName: "Agency Website",36    team: {37      images: [38        "/images/user/user-22.jpg",39        "/images/user/user-23.jpg",40        "/images/user/user-24.jpg",41      ],42    },43    budget: "3.9K",44    status: "Active",45  },46  {47    id: 2,48    user: {49      image: "/images/user/user-18.jpg",50      name: "Kaiya George",51      role: "Project Manager",52    },53    projectName: "Technology",54    team: {55      images: ["/images/user/user-25.jpg", "/images/user/user-26.jpg"],56    },57    budget: "24.9K",58    status: "Pending",59  },60  {61    id: 3,62    user: {63      image: "/images/user/user-17.jpg",64      name: "Zain Geidt",65      role: "Content Writing",66    },67    projectName: "Blog Writing",68    team: {69      images: ["/images/user/user-27.jpg"],70    },71    budget: "12.7K",72    status: "Active",73  },74  {75    id: 4,76    user: {77      image: "/images/user/user-20.jpg",78      name: "Abram Schleifer",79      role: "Digital Marketer",80    },81    projectName: "Social Media",82    team: {83      images: [84        "/images/user/user-28.jpg",85        "/images/user/user-29.jpg",86        "/images/user/user-30.jpg",87      ],88    },89    budget: "2.8K",90    status: "Cancel",91  },92  {93    id: 5,94    user: {95      image: "/images/user/user-21.jpg",96      name: "Carla George",97      role: "Front-end Developer",98    },99    projectName: "Website",100    team: {101      images: [102        "/images/user/user-31.jpg",103        "/images/user/user-32.jpg",104        "/images/user/user-33.jpg",105      ],106    },107    budget: "4.5K",108    status: "Active",109  },110];111 112export default function BasicTableOne() {113  return (114    <div className="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-white/[0.05] dark:bg-white/[0.03]">115      <div className="max-w-full overflow-x-auto">116        <Table>117          {/* Table Header */}118          <TableHeader className="border-b border-gray-100 dark:border-white/[0.05]">119            <TableRow>120              <TableCell121                isHeader122                className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400"123              >124                User125              </TableCell>126              <TableCell127                isHeader128                className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400"129              >130                Project Name131              </TableCell>132              <TableCell133                isHeader134                className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400"135              >136                Team137              </TableCell>138              <TableCell139                isHeader140                className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400"141              >142                Status143              </TableCell>144              <TableCell145                isHeader146                className="px-5 py-3 font-medium text-gray-500 text-start text-theme-xs dark:text-gray-400"147              >148                Budget149              </TableCell>150            </TableRow>151          </TableHeader>152 153          {/* Table Body */}154          <TableBody className="divide-y divide-gray-100 dark:divide-white/[0.05]">155            {tableData.map((order) => (156              <TableRow key={order.id}>157                <TableCell className="px-5 py-4 sm:px-6 text-start">158                  <div className="flex items-center gap-3">159                    <div className="w-10 h-10 overflow-hidden rounded-full">160                      <img161                        width={40}162                        height={40}163                        src={order.user.image}164                        alt={order.user.name}165                      />166                    </div>167                    <div>168                      <span className="block font-medium text-gray-800 text-theme-sm dark:text-white/90">169                        {order.user.name}170                      </span>171                      <span className="block text-gray-500 text-theme-xs dark:text-gray-400">172                        {order.user.role}173                      </span>174                    </div>175                  </div>176                </TableCell>177                <TableCell className="px-4 py-3 text-gray-500 text-start text-theme-sm dark:text-gray-400">178                  {order.projectName}179                </TableCell>180                <TableCell className="px-4 py-3 text-gray-500 text-start text-theme-sm dark:text-gray-400">181                  <div className="flex -space-x-2">182                    {order.team.images.map((teamImage, index) => (183                      <div184                        key={index}185                        className="w-6 h-6 overflow-hidden border-2 border-white rounded-full dark:border-gray-900"186                      >187                        <img188                          width={24}189                          height={24}190                          src={teamImage}191                          alt={`Team member ${index + 1}`}192                          className="w-full size-6"193                        />194                      </div>195                    ))}196                  </div>197                </TableCell>198                <TableCell className="px-4 py-3 text-gray-500 text-start text-theme-sm dark:text-gray-400">199                  <Badge200                    size="sm"201                    color={202                      order.status === "Active"203                        ? "success"204                        : order.status === "Pending"205                        ? "warning"206                        : "error"207                    }208                  >209                    {order.status}210                  </Badge>211                </TableCell>212                <TableCell className="px-4 py-3 text-gray-500 text-theme-sm dark:text-gray-400">213                  {order.budget}214                </TableCell>215              </TableRow>216            ))}217          </TableBody>218        </Table>219      </div>220    </div>221  );222}223