added search and sort to ui

app/(content)/(gaming)/games/layout.tsx

-"use client"
-
-export default function DashboardLayout({
-    children,
-}: {
-    children: React.ReactNode;
-}) {
-    return (
-        <section>
-            <div>
-                {children}
-            </div>
-        </section>
-    );
-}
\ No newline at end of file

app/(content)/(gaming)/games/page.tsx

 import { InfiniteScrollGames } from "@/components/InfiniteScroll";
+import Search from "@/components/search";
+import Sort from "@/components/sort-games";
 
 // renders a list of games infinitely (presumably)
 export default async function GamesPage() {
     return (
-        <div className="py-5">
-            <InfiniteScrollGames />
-        </div>
+        <main className="relative lg:gap-10 xl:grid xl:grid-cols-[1fr_300px]">
+            <div className="grid">
+                <Search className="p-3 lg:w-2/3 2xl:w-1/3" />
+                <InfiniteScrollGames />
+            </div>
+            <div className="hidden xl:block">
+                <Sort />
+            </div>
+        </main>
     )
 }
\ No newline at end of file

app/(content)/layout.tsx

@@ -10,8 +10,8 @@ export default async function ContentLayout({
     children,
 }: DashboardLayoutProps) {
     return (
-        <div className="flex min-h-screen flex-col space-y-6">
-            <div className="container grid flex-1 gap-12 md:grid-cols-[200px_1fr]">
+        <div className="flex min-h-screen flex-col">
+            <div className="mx-6 my-6 flex-1 md:grid md:grid-cols-[220px_1fr] md:gap-6 lg:grid-cols-[240px_1fr] lg:gap-10">
                 <aside className="hidden w-[200px] flex-col md:flex">
                     <div className="sticky top-0">
                         <DashboardNav items={dashboardConfig.sidebarNav} />

components/InfiniteScroll.tsx

@@ -18,6 +18,7 @@ export function InfiniteScrollGames() {
         ['infiniteGames'],
         async ({ pageParam = 1 }) =>
             await fetch(`/api/games/?page=${pageParam}`,
+                { cache: 'force-cache' }
             ).then((result) => result.json() as Promise<IGame[]>),
         {
             getNextPageParam: (lastPage, pages) => {
@@ -27,7 +28,7 @@ export function InfiniteScrollGames() {
     )
 
     return (
-        <Card className="p-5">
+        <Card className="p-6">
             {status === 'error'
                 ?
                 (<span>Error: {(error as Error).message}</span>)

components/Search.tsx

@@ -2,6 +2,7 @@
 
 import { cn } from '@/lib/utils';
 import { useState } from 'react';
+import { Button } from './ui/button';
 import { Icons } from './ui/icons';
 import { Input } from './ui/input';
 import { toast } from './ui/use-toast';
@@ -23,17 +24,17 @@ export default function Search({ className, ...props }: DocsSearchProps) {
     return (
         <form
             onSubmit={onSubmit}
-            className={cn("relative w-full", className)}
+            className={cn("relative w-full flex justify-end items-center", className)}
             {...props}
         >
             <Input
                 type="search"
                 placeholder="Search..."
-                className="h-8 w-full sm:w-64 sm:pr-12"
+                className="rounded-full pr-12"
             />
-            <kbd className="pointer-events-none absolute right-1.5 top-1.5 hidden h-5 select-none items-center gap-1 rounded border bg-background px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100 sm:flex">
-                <Icons.ArrowRight />
-            </kbd>
+            <Button variant="outline" size="lg" className="absolute align-middle h-8 px-2.5 mr-1">
+                <Icons.arrowRight className="h-3 w-3" />
+            </Button>
         </form>
     );
 }
\ No newline at end of file

components/nav.tsx

@@ -25,7 +25,7 @@ export default function DashboardNav({ items }: DashboardNavProps) {
 
     return (
         <nav className="grid items-start gap-2">
-            <div className="flex items-center py-2">
+            <div className="flex items-center">
                 <Link href="/" className={cn("rounded-full p-3 hover:bg-accent")}>
                     <Icons.logo className="h-7 w-7 dark:hidden" />
                     <Icons.logoWhite className="h-7 w-7 hidden dark:block" />

components/sort-games.tsx

 "use client"
 
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@radix-ui/react-select";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { useState } from "react";
-import { Card, CardContent } from "./ui/card";
+import { Card } from "./ui/card";
 
 export default function Sort() {
   const [select, setSelect] = useState<string>('');
@@ -13,23 +13,51 @@ export default function Sort() {
   };
 
   return (
-    <Card>
-      <CardContent>
-        <h1>Filter</h1>
+    <Card className="p-6 grid items-start gap-2">
+      <Select>
+        <SelectTrigger className="w-full">
+          <SelectValue placeholder="Sort by..." />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectLabel>Sorting</SelectLabel>
+            <SelectItem value="">Any</SelectItem>
+            <SelectItem value="name">Name</SelectItem>
+            <SelectItem value="rating">Rating</SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
 
-        <div className="flex flex-col space-y-2">
-          <label>Sort By</label>
-          <Select>
-            <SelectTrigger className="w-[180px]">
-              <SelectValue placeholder="Theme" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="light">Any</SelectItem>
-              <SelectItem value="dark">Name</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-      </CardContent>
+      <h1 className="pt-3">Filter</h1>
+      <Select>
+        <SelectTrigger className="w-full">
+          <SelectValue placeholder="By genre..." />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectLabel>Genre</SelectLabel>
+            <SelectItem value="">Any</SelectItem>
+            <SelectItem value="action">Action</SelectItem>
+            <SelectItem value="simulation">Simulation</SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+
+      <Select>
+        <SelectTrigger className="w-full">
+          <SelectValue placeholder="By platform..." />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectLabel>Platform</SelectLabel>
+            <SelectItem value="">Any</SelectItem>
+            <SelectItem value="pc">PC</SelectItem>
+            <SelectItem value="playstation">Playstation</SelectItem>
+            <SelectItem value="xbox">Xbox</SelectItem>
+            <SelectItem value="nintendo">Nintendo</SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
     </Card>
   )
 }
\ No newline at end of file

components/ui/scroll-area.tsx

+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }

package-lock.json

@@ -12,6 +12,7 @@
         "@clerk/themes": "^1.7.3",
         "@prisma/client": "^4.14.1",
         "@radix-ui/react-dropdown-menu": "^2.0.4",
+        "@radix-ui/react-scroll-area": "^1.0.3",
         "@radix-ui/react-select": "^1.2.1",
         "@radix-ui/react-slot": "^1.0.1",
         "@radix-ui/react-toast": "^1.1.3",
@@ -909,6 +910,27 @@
         "react-dom": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@radix-ui/react-scroll-area": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.0.3.tgz",
+      "integrity": "sha512-sBX9j8Q+0/jReNObEAveKIGXJtk3xUoSIx4cMKygGtO128QJyVDn01XNOFsyvihKDCTcu7SINzQ2jPAZEhIQtw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/number": "1.0.0",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-direction": "1.0.0",
+        "@radix-ui/react-presence": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.2",
+        "@radix-ui/react-use-callback-ref": "1.0.0",
+        "@radix-ui/react-use-layout-effect": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
     "node_modules/@radix-ui/react-select": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-1.2.1.tgz",

package.json

@@ -15,6 +15,7 @@
     "@clerk/themes": "^1.7.3",
     "@prisma/client": "^4.14.1",
     "@radix-ui/react-dropdown-menu": "^2.0.4",
+    "@radix-ui/react-scroll-area": "^1.0.3",
     "@radix-ui/react-select": "^1.2.1",
     "@radix-ui/react-slot": "^1.0.1",
     "@radix-ui/react-toast": "^1.1.3",