sarlink-portal/app/(dashboard)/parental-control/page.tsx

import { DevicesTable } from "@/components/devices-table";
import Filter from "@/components/filter";
import Search from "@/components/search";
import { AArrowDown, AArrowUp } from "lucide-react";
import React, { 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 ParentalControl({
  searchParams,
}: {
  searchParams: Promise<{
    query: string;
    page: number;
    sortBy: string;
    status: string;
  }>;
}) {
  const query = (await searchParams)?.query || "";
  return (
    <div>
      <div className="flex justify-between items-center border-b-2 text-gray-500 text-2xl font-bold title-bg py-4 px-2 mb-4">
        <h3>
          Parental Control
        </h3>
      </div>

      <div
        id="user-filters"
        className=" border-b-2 pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
      >
        <Search />
        <Filter
          options={sortfilterOptions}
          defaultOption="asc"
          queryParamKey="sortBy"
        />
      </div>
      <Suspense key={query} fallback={"loading...."}>
        <DevicesTable parentalControl={true} searchParams={searchParams} />
      </Suspense>
    </div>
  );
}