Remove unused MobileNav and ShineBorder components for codebase cleanup
This commit is contained in:
Bram Suurd
@@ -1,108 +0,0 @@
|
||||
"use client";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "@/components/ui/accordion";
|
||||
import {
|
||||
Sheet,
|
||||
SheetClose,
|
||||
SheetContent,
|
||||
SheetDescription,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
SheetTrigger,
|
||||
} from "@/components/ui/sheet";
|
||||
import { Category } from "@/lib/types";
|
||||
import clsx from "clsx";
|
||||
import { Menu } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import { Badge } from "./ui/badge";
|
||||
|
||||
export default function MobileNav() {
|
||||
const [links, setLinks] = useState<Category[]>([]);
|
||||
|
||||
const fetchLinks = async () => {
|
||||
const res = await fetch("/api/categories", {});
|
||||
if (!res.ok) {
|
||||
throw new Error("Failed to fetch categories");
|
||||
}
|
||||
const links = await res.json();
|
||||
setLinks(links);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center sm:hidden">
|
||||
<Sheet>
|
||||
<SheetTrigger onClick={fetchLinks}>
|
||||
<Menu className="h-8 w-8" />
|
||||
</SheetTrigger>
|
||||
<SheetContent
|
||||
side={"left"}
|
||||
className="max-w-screen max-h-screen w-full overflow-y-scroll"
|
||||
>
|
||||
<SheetHeader>
|
||||
<SheetTitle>Proxmox VE Helper-Scripts</SheetTitle>
|
||||
<SheetDescription className=" overflow-scroll">
|
||||
<div className="flex min-w-72 flex-col overflow-scroll sm:max-w-72">
|
||||
<p className="mb-5 text-xl font-bold">Scripts</p>
|
||||
<Accordion
|
||||
type={"single"}
|
||||
collapsible
|
||||
className="overflow-scroll"
|
||||
>
|
||||
{links.map((category) => (
|
||||
<AccordionItem
|
||||
key={category.categoryId}
|
||||
value={category.catagoryName}
|
||||
className={`sm:text-md flex flex-col gap-2 text-left text-foreground`}
|
||||
>
|
||||
<AccordionTrigger>
|
||||
{category.catagoryName}
|
||||
</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
{category.expand.items.map((script, index) => (
|
||||
<div key={"navbar:" + index} className="py-1">
|
||||
<SheetClose asChild>
|
||||
<Link
|
||||
href={{
|
||||
pathname: "/scripts",
|
||||
query: { id: script.title },
|
||||
}}
|
||||
className="flex justify-between text-muted-foreground"
|
||||
>
|
||||
{script.title}{" "}
|
||||
<Badge
|
||||
className={clsx(
|
||||
"w-[37.69px] justify-center text-center",
|
||||
{
|
||||
"border-blue-500/75 text-blue-500/75":
|
||||
script.item_type === "VM",
|
||||
"border-yellow-500/75 text-yellow-500/75":
|
||||
script.item_type === "LXC",
|
||||
hidden: !["VM", "LXC"].includes(
|
||||
script.item_type,
|
||||
),
|
||||
},
|
||||
)}
|
||||
>
|
||||
{script.item_type}
|
||||
</Badge>
|
||||
</Link>
|
||||
</SheetClose>
|
||||
</div>
|
||||
))}
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
))}
|
||||
</Accordion>
|
||||
</div>
|
||||
</SheetDescription>
|
||||
</SheetHeader>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,61 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type TColorProp = string | string[];
|
||||
|
||||
interface ShineBorderProps {
|
||||
borderRadius?: number;
|
||||
borderWidth?: number;
|
||||
duration?: number;
|
||||
color?: TColorProp;
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* @name Shine Border
|
||||
* @description It is an animated background border effect component with easy to use and configurable props.
|
||||
* @param borderRadius defines the radius of the border.
|
||||
* @param borderWidth defines the width of the border.
|
||||
* @param duration defines the animation duration to be applied on the shining border
|
||||
* @param color a string or string array to define border color.
|
||||
* @param className defines the class name to be applied to the component
|
||||
* @param children contains react node elements.
|
||||
*/
|
||||
export default function ShineBorder({
|
||||
borderRadius = 8,
|
||||
borderWidth = 1,
|
||||
duration = 14,
|
||||
color = "#000000",
|
||||
className,
|
||||
children,
|
||||
}: ShineBorderProps) {
|
||||
return (
|
||||
<div
|
||||
style={
|
||||
{
|
||||
"--border-radius": `${borderRadius}px`,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
className={cn(
|
||||
"relative grid min-h-[60px] w-fit min-w-[300px] place-items-center rounded-[--border-radius] bg-white p-3 text-black dark:bg-black dark:text-white",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<div
|
||||
style={
|
||||
{
|
||||
"--border-width": `${borderWidth}px`,
|
||||
"--border-radius": `${borderRadius}px`,
|
||||
"--shine-pulse-duration": `${duration}s`,
|
||||
"--mask-linear-gradient": `linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)`,
|
||||
"--background-radial-gradient": `radial-gradient(transparent,transparent, ${color instanceof Array ? color.join(",") : color},transparent,transparent)`,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
className={`before:bg-shine-size before:absolute before:inset-0 before:aspect-square before:size-full before:rounded-[--border-radius] before:p-[--border-width] before:will-change-[background-position] before:content-[""] before:![-webkit-mask-composite:xor] before:[background-image:--background-radial-gradient] before:[background-size:300%_300%] before:![mask-composite:exclude] before:[mask:--mask-linear-gradient] motion-safe:before:animate-[shine-pulse_var(--shine-pulse-duration)_infinite_linear]`}
|
||||
></div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user