From 2404089ec3d93b6883c79d24498a677a077af1a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20Akg=C3=BCl?= <s86116@bht-berlin.de>
Date: Thu, 25 May 2023 10:39:55 +0200
Subject: [PATCH] added search and sort to ui
---
app/(content)/(gaming)/games/layout.tsx | 15 ------
app/(content)/(gaming)/games/page.tsx | 14 ++++--
app/(content)/layout.tsx | 4 +-
components/InfiniteScroll.tsx | 3 +-
components/Search.tsx | 11 +++--
components/nav.tsx | 2 +-
components/sort-games.tsx | 64 ++++++++++++++++++-------
components/ui/scroll-area.tsx | 48 +++++++++++++++++++
package-lock.json | 22 +++++++++
package.json | 1 +
10 files changed, 139 insertions(+), 45 deletions(-)
delete mode 100644 app/(content)/(gaming)/games/layout.tsx
create mode 100644 components/ui/scroll-area.tsx
diff --git a/app/(content)/(gaming)/games/layout.tsx b/app/(content)/(gaming)/games/layout.tsx
deleted file mode 100644
index e825038..0000000
--- a/app/(content)/(gaming)/games/layout.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-"use client"
-
-export default function DashboardLayout({
- children,
-}: {
- children: React.ReactNode;
-}) {
- return (
- <section>
- <div>
- {children}
- </div>
- </section>
- );
-}
\ No newline at end of file
diff --git a/app/(content)/(gaming)/games/page.tsx b/app/(content)/(gaming)/games/page.tsx
index 13a76b8..5aa3c31 100644
--- a/app/(content)/(gaming)/games/page.tsx
+++ b/app/(content)/(gaming)/games/page.tsx
@@ -1,10 +1,18 @@
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
diff --git a/app/(content)/layout.tsx b/app/(content)/layout.tsx
index 06b9831..8660cfe 100644
--- a/app/(content)/layout.tsx
+++ b/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} />
diff --git a/components/InfiniteScroll.tsx b/components/InfiniteScroll.tsx
index 895e83e..6aa7bbc 100644
--- a/components/InfiniteScroll.tsx
+++ b/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>)
diff --git a/components/Search.tsx b/components/Search.tsx
index 74baa02..14551f3 100644
--- a/components/Search.tsx
+++ b/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
diff --git a/components/nav.tsx b/components/nav.tsx
index afc1530..b7c9d44 100644
--- a/components/nav.tsx
+++ b/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" />
diff --git a/components/sort-games.tsx b/components/sort-games.tsx
index c07b183..76f380e 100644
--- a/components/sort-games.tsx
+++ b/components/sort-games.tsx
@@ -1,8 +1,8 @@
"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
diff --git a/components/ui/scroll-area.tsx b/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..54b87cd
--- /dev/null
+++ b/components/ui/scroll-area.tsx
@@ -0,0 +1,48 @@
+"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 }
diff --git a/package-lock.json b/package-lock.json
index 279c7b8..a1ff6ee 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index c79f0a1..aee36cc 100644
--- a/package.json
+++ b/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",
--
GitLab