i701 b91f34b6b1 Refactor dashboard components and update global styles
- Updated the title and description in layout.tsx to reflect the new application name.
- Replaced the background color in globals.css with a background image for the title section.
- Enhanced the Devices and UserDevices pages by adding search and filter components for improved user interaction.
- Introduced a new DevicesTable component for displaying device data with pagination.
- Updated the Users page to improve layout and added a filter for user status.
- Made various UI adjustments across components for better consistency and usability.
2024-11-30 23:38:32 +05:00

55 lines
1.2 KiB
TypeScript

import Filter from "@/components/filter";
import Search from "@/components/search";
import { UsersTable } from "@/components/user-table";
import { CheckCheck, Hourglass, Minus } from "lucide-react";
import React, { Suspense } from "react";
export default async function UserDevcies({
searchParams,
}: {
searchParams: Promise<{
query: string;
page: number;
sortBy: string;
status: string;
}>;
}) {
return (
<div>
<h3 className="border-b-2 text-2xl font-bold title-bg py-4 px-2 mb-4">
My Devices
</h3>
<div
id="user-filters"
className=" border-b-2 pb-4 gap-4 flex items-center justify-start"
>
<Search />
<Filter
options={[
{
value: "all",
label: "ALL",
icon: <Minus size={14} />,
},
{
value: "unverified",
label: "Unverfieid",
icon: <CheckCheck size={14} />,
},
{
value: "verified",
label: "Verified",
icon: <Hourglass size={14} />,
},
]}
defaultOption="all"
queryParamKey="status"
/>
</div>
<Suspense fallback={"loading...."}>
<UsersTable searchParams={searchParams} />
</Suspense>
</div>
);
}