From 20e0cc76c51f7b656facfd630aec8949e9e5033f Mon Sep 17 00:00:00 2001 From: Bram Suurd <78373894+BramSuurdje@users.noreply.github.com> Date: Sun, 5 May 2024 21:01:56 +0200 Subject: [PATCH] put the script browser inside a separate component for better readability --- app/globals.css | 78 ++++++++++------------ app/scripts/page.tsx | 113 +------------------------------ components/ScriptBrowser.tsx | 125 +++++++++++++++++++++++++++++++++++ tailwind.config.ts | 1 - 4 files changed, 162 insertions(+), 155 deletions(-) create mode 100644 components/ScriptBrowser.tsx diff --git a/app/globals.css b/app/globals.css index 78812dc..013a021 100644 --- a/app/globals.css +++ b/app/globals.css @@ -5,47 +5,47 @@ @layer base { :root { --background: 0 0% 100%; - --foreground: 240 10% 3.9%; + --foreground: 20 14.3% 4.1%; --card: 0 0% 100%; - --card-foreground: 240 10% 3.9%; + --card-foreground: 20 14.3% 4.1%; --popover: 0 0% 100%; - --popover-foreground: 240 10% 3.9%; - --primary: 240 5.9% 10%; - --primary-foreground: 0 0% 98%; - --secondary: 240 4.8% 95.9%; - --secondary-foreground: 240 5.9% 10%; - --muted: 240 4.8% 95.9%; - --muted-foreground: 240 3.8% 46.1%; - --accent: 240 4.8% 95.9%; - --accent-foreground: 240 5.9% 10%; + --popover-foreground: 20 14.3% 4.1%; + --primary: 24.6 95% 53.1%; + --primary-foreground: 60 9.1% 97.8%; + --secondary: 60 4.8% 95.9%; + --secondary-foreground: 24 9.8% 10%; + --muted: 60 4.8% 95.9%; + --muted-foreground: 25 5.3% 44.7%; + --accent: 60 4.8% 95.9%; + --accent-foreground: 24 9.8% 10%; --destructive: 0 84.2% 60.2%; - --destructive-foreground: 0 0% 98%; - --border: 240 5.9% 90%; - --input: 240 5.9% 90%; - --ring: 240 5.9% 10%; + --destructive-foreground: 60 9.1% 97.8%; + --border: 20 5.9% 90%; + --input: 20 5.9% 90%; + --ring: 24.6 95% 53.1%; --radius: 0.5rem; } .dark { - --background: 240 10% 3.9%; - --foreground: 0 0% 98%; - --card: 240 10% 3.9%; - --card-foreground: 0 0% 98%; - --popover: 240 10% 3.9%; - --popover-foreground: 0 0% 98%; - --primary: 201 100% 38%; - --primary-foreground: 240 5.9% 10%; - --secondary: 240 3.7% 15.9%; - --secondary-foreground: 0 0% 98%; - --muted: 240 3.7% 15.9%; - --muted-foreground: 240 5% 64.9%; - --accent: 240 3.7% 15.9%; - --accent-foreground: 0 0% 98%; - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 0 0% 98%; - --border: 240 3.7% 15.9%; - --input: 240 3.7% 15.9%; - --ring: 240 4.9% 83.9%; + --background: 20 14.3% 4.1%; + --foreground: 60 9.1% 97.8%; + --card: 20 14.3% 4.1%; + --card-foreground: 60 9.1% 97.8%; + --popover: 20 14.3% 4.1%; + --popover-foreground: 60 9.1% 97.8%; + --primary: 20.5 90.2% 48.2%; + --primary-foreground: 60 9.1% 97.8%; + --secondary: 12 6.5% 15.1%; + --secondary-foreground: 60 9.1% 97.8%; + --muted: 12 6.5% 15.1%; + --muted-foreground: 24 5.4% 63.9%; + --accent: 12 6.5% 15.1%; + --accent-foreground: 60 9.1% 97.8%; + --destructive: 0 72.2% 50.6%; + --destructive-foreground: 60 9.1% 97.8%; + --border: 12 6.5% 15.1%; + --input: 12 6.5% 15.1%; + --ring: 20.5 90.2% 48.2%; } } @layer base { @@ -55,12 +55,4 @@ body { @apply bg-background text-foreground; } - } - - [data-state="open"] .accordioncontent { - display: block; - } - - [data-state="closed"] .accordioncontent { - display: none; - } \ No newline at end of file + } \ No newline at end of file diff --git a/app/scripts/page.tsx b/app/scripts/page.tsx index 72ce333..62d5e9e 100644 --- a/app/scripts/page.tsx +++ b/app/scripts/page.tsx @@ -1,62 +1,8 @@ -"use client"; -import React, { useEffect, useState, useRef } from "react"; -import { - Accordion, - AccordionItem, - AccordionTrigger, - AccordionContent, -} from "@/components/ui/accordion"; -import { Input } from "@/components/ui/input"; import ScriptItem from "@/components/Script"; -import { Category } from "@/lib/types"; -import Link from "next/link"; +import ScriptBrowser from "@/components/ScriptBrowser"; import Particles from "@/components/ui/particles"; export default function Page() { - const [selectedItem, setSelectedItem] = useState(""); - const [links, setLinks] = useState([]); - const [searchTerm, setSearchTerm] = useState(""); - const inputRef = useRef(null); - - useEffect(() => { - const handleKeyDown = (event: any) => { - if (event.key === "/") { - if (inputRef.current) { - inputRef.current.focus(); - } - event.preventDefault(); - } - }; - - const fetchData = async () => { - try { - const data = await getLinks(); - setLinks(data); - } catch (error) { - console.error("Error fetching links:", error); - } - }; - fetchData(); - - document.addEventListener("keydown", handleKeyDown); - - return () => { - document.removeEventListener("keydown", handleKeyDown); - }; - }, []); - - const getLinks = async () => { - const res = await fetch( - `${process.env.NEXT_PUBLIC_POCKETBASE_URL}/api/collections/proxmox_items/records`, - ); - const data = await res.json(); - return data.items as Category[]; - }; - - const handleSearch = (value: string) => { - setSearchTerm(value); - }; - return ( <>
-
-

Scripts

- handleSearch(e.target.value)} - ref={inputRef} - /> - - {links.map( - (category) => - category.Items.filter( - (script) => - !searchTerm || - script.title - .toLowerCase() - .includes(searchTerm.toLowerCase()), - ).length > 0 && ( - - - {category.Catagory_Title} - - - {category.Items.filter( - (script) => - !searchTerm || - script.title - .toLowerCase() - .includes(searchTerm.toLowerCase()), - ).map((script, index) => ( -

- - {script.title} - -

- ))} - - - ), - )} - -
+
diff --git a/components/ScriptBrowser.tsx b/components/ScriptBrowser.tsx new file mode 100644 index 0000000..9b58686 --- /dev/null +++ b/components/ScriptBrowser.tsx @@ -0,0 +1,125 @@ +'use client' +import { + Accordion, + AccordionItem, + AccordionTrigger, + AccordionContent, +} from "@/components/ui/accordion"; +import { Input } from "@/components/ui/input"; +import Link from "next/link"; +import React, { useEffect, useState, useRef } from "react"; +import { Category } from "@/lib/types"; + +function ScriptBrowser() { + const [selectedItem, setSelectedItem] = useState(""); + const [links, setLinks] = useState([]); + const [searchTerm, setSearchTerm] = useState(""); + const inputRef = useRef(null); + const [isSearch, setIsSearch] = useState(false); + + useEffect(() => { + const handleKeyDown = (event: any) => { + if (event.key === "/") { + if (inputRef.current) { + inputRef.current.focus(); + } + event.preventDefault(); + } + }; + + const fetchData = async () => { + try { + const data = await getLinks(); + setLinks(data); + } catch (error) { + console.error("Error fetching links:", error); + } + }; + fetchData(); + + document.addEventListener("keydown", handleKeyDown); + + return () => { + document.removeEventListener("keydown", handleKeyDown); + }; + }, []); + + const getLinks = async () => { + const res = await fetch( + `${process.env.NEXT_PUBLIC_POCKETBASE_URL}/api/collections/proxmox_items/records`, + ); + const data = await res.json(); + return data.items as Category[]; + }; + + const handleSearch = (value: string) => { + setSearchTerm(value); + if (value.length > 0) { + setIsSearch(true); + } else { + setIsSearch(false); + } + }; + return ( + <> + {" "} +
+

Scripts

+ handleSearch(e.target.value)} + ref={inputRef} + /> + + {links.map( + (category) => + category.Items.filter( + (script) => + !searchTerm || + script.title.toLowerCase().includes(searchTerm.toLowerCase()), + ).length > 0 && ( + + {category.Catagory_Title} + + {category.Items.filter( + (script) => + !searchTerm || + script.title + .toLowerCase() + .includes(searchTerm.toLowerCase()), + ).map((script, index) => ( +

+ + {script.title} + +

+ ))} + + + ), + )} + +
+ + ); +} + +export default ScriptBrowser \ No newline at end of file diff --git a/tailwind.config.ts b/tailwind.config.ts index 7c257d3..1107b9b 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -2,7 +2,6 @@ import type { Config } from "tailwindcss" const svgToDataUri = require("mini-svg-data-uri"); -const colors = require("tailwindcss/colors"); const { default: flattenColorPalette, } = require("tailwindcss/lib/util/flattenColorPalette");