SVI/Proxmox
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update UI and fix layout issues in page.tsx, LatestScripts.tsx, and Script.tsx components

Browse Source
This commit is contained in:
Bram Suurd
2024-05-10 18:44:28 +02:00
parent 04fadcfc3c
commit 92f682be4e
3 changed files with 47 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/scripts/page.tsx
View File

@@ -8,14 +8,14 @@ export default function Page() {
return (
<>
<Particles
className="animate-fade-in absolute inset-0 -z-10"
className="animate-fade-in absolute inset-0 -z-10"
quantity={100}
/>
<div className="mt-20 flex px-7 xl:px-0">
<div className="mt-20 flex sm:px-7 xl:px-0">
<div className="hidden sm:flex">
<ScriptBrowser />
</div>
<div className="mx-7 sm:ml-7 w-full sm:mx-0">
<div className="mx-7 w-full sm:mx-0 sm:ml-7">
<ScriptItem />
</div>
</div>

2
components/LatestScripts.tsx
View File

@@ -36,7 +36,7 @@ function LatestScripts() {
{latestScripts.map((item) => (
<Card
key={item.id}
className=" min-w-[250px] max-w-[310.6666666666667px] flex-grow animate-fade-up"
className=" min-w-[250px] flex-1 flex-grow animate-fade-up"
>
<CardHeader>
<CardTitle className="flex items-center gap-3">

86
components/Navbar.tsx
View File

@@ -28,9 +28,13 @@ import {
} from "@/components/ui/accordion";
import { Input } from "@/components/ui/input";
import { Category } from "@/lib/types";
import { pb } from "@/lib/pocketbase";
function Navbar() {
const [isScrolled, setIsScrolled] = useState(false);
const [links, setLinks] = useState<Category[]>([]);
const [searchTerm, setSearchTerm] = useState("");
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
const handleScroll = () => {
@@ -44,10 +48,6 @@ function Navbar() {
};
}, []);
const [links, setLinks] = useState<Category[]>([]);
const [searchTerm, setSearchTerm] = useState("");
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === "/") {
@@ -62,33 +62,33 @@ function Navbar() {
};
}, []);
const fetchLinks = async () => {
try {
const res = await fetch(
`${process.env.NEXT_PUBLIC_POCKETBASE_URL}/api/collections/proxmox_items/records`,
);
const data = await res.json();
setLinks(data.items as Category[]);
} catch (error) {
console.error("Error fetching links:", error);
}
};
const fetchLinks = async () => {
try {
// you can also fetch all records at once via getFullList
const res = await pb.collection("categories").getFullList({
expand: "items",
});
setLinks(res as unknown as Category[]);
} catch (error) {
console.error("Error fetching links:", error);
}
};
useEffect(() => {
fetchLinks();
}, []);
useEffect(() => {
fetchLinks();
}, []);
const handleSearch = (value: string) => {
setSearchTerm(value);
};
const handleSearch = (value: string) => {
setSearchTerm(value);
};
const filteredLinks = useMemo(() => {
return links.filter((category) =>
category.Items.some((script) =>
script.title.toLowerCase().includes(searchTerm.toLowerCase()),
),
);
}, [links, searchTerm]);
const filteredLinks = useMemo(() => {
return links.filter((category) =>
category.expand.items.some((script) =>
script.title.toLowerCase().includes(searchTerm.toLowerCase()),
),
);
}, [links, searchTerm]);
return (
<>
@@ -129,33 +129,33 @@ function Navbar() {
>
{filteredLinks.map((category) => (
<AccordionItem
key={category.id}
value={category.Catagory_Title}
key={category.collectionId}
value={category.catagoryName}
className={`sm:text-md flex flex-col gap-2`}
>
<AccordionTrigger>
{category.Catagory_Title}
{category.catagoryName}
</AccordionTrigger>
<AccordionContent>
{category.Items.filter((script) =>
script.title
.toLowerCase()
.includes(searchTerm.toLowerCase()),
).map((script, index) => (
<div key={index} className="py-1">
<SheetClose asChild>
{category.expand.items
.filter((script) =>
script.title
.toLowerCase()
.includes(searchTerm.toLowerCase()),
)
.map((script, index) => (
<p key={index} className="py-1">
<Link
href={{
pathname: "/scripts",
query: { id: script.scriptID },
query: { id: script.id },
}}
className="text-muted-foreground"
>
{script.title}
{script.title} {script.item_type}
</Link>
</SheetClose>
</div>
))}
</p>
))}
</AccordionContent>
</AccordionItem>
))}