sarlink-portal/app/(dashboard)/users/page.tsx

import Filter from "@/components/filter";
import Search from "@/components/search";
import { UsersTable } from "@/components/user-table";
import {
	AArrowDown,
	AArrowUp,
	CheckCheck,
	Hourglass,
	Minus,
} from "lucide-react";
import { Suspense } from "react";

const sortfilterOptions = [
	{
		value: "asc",
		label: "Ascending",
		icon: <AArrowUp size={16} />,
	},
	{
		value: "desc",
		label: "Descending",
		icon: <AArrowDown size={16} />,
	},
];

export default async function AdminUsers({
	searchParams,
}: {
	searchParams: Promise<{
		query: string;
		page: number;
		sortBy: string;
		status: string;
	}>;
}) {
	return (
		<div>
			<div className="flex justify-between items-center border-[1px] rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
				<h3 className="text-sarLinkOrange text-2xl">Users</h3>
			</div>

			<div
				id="user-table-filters"
				className=" 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"
				/>

				<Filter
					options={sortfilterOptions}
					defaultOption="asc"
					queryParamKey="sortBy"
				/>
			</div>
			<Suspense fallback={"loading...."}>
				<UsersTable searchParams={searchParams} />
			</Suspense>
		</div>
	);
}