Update MostViewedScripts component to include a comment for RecentlyUpdatedScripts
This commit is contained in:
Bram Suurd
@@ -139,7 +139,7 @@ const ScriptBrowser = ({
|
||||
<div className="flex min-w-72 flex-col sm:max-w-72">
|
||||
<div className="mb-2 flex items-end justify-between">
|
||||
<h1 className=" text-xl font-bold">Categories</h1>
|
||||
<p className="text-xs text-muted-foreground italic">
|
||||
<p className="text-xs italic text-muted-foreground">
|
||||
{links.reduce(
|
||||
(acc, category) => acc + category.expand.items.length,
|
||||
0,
|
||||
@@ -191,121 +191,122 @@ const ScriptBrowser = ({
|
||||
)}
|
||||
</div>
|
||||
<div className="rounded-lg">
|
||||
<Accordion {...accordionProps}>
|
||||
{filteredLinks.map((category) => (
|
||||
<AccordionItem
|
||||
key={category.collectionId}
|
||||
value={category.catagoryName}
|
||||
className={clsx(
|
||||
'sm:text-md flex flex-col border-none',
|
||||
{ 'bg-accent/30 rounded-lg': expandedItems.includes(category.catagoryName) && expandedItems.length <= 1 }
|
||||
)}
|
||||
>
|
||||
<AccordionTrigger
|
||||
className={clsx(
|
||||
'transition ease-in-out hover:-translate-y-1 hover:scale-105 hover:bg-accent duration-250 rounded-lg',
|
||||
{ '': expandedItems.includes(category.catagoryName) }
|
||||
)}
|
||||
<Accordion {...accordionProps}>
|
||||
{filteredLinks.map((category) => (
|
||||
<AccordionItem
|
||||
key={category.collectionId}
|
||||
value={category.catagoryName}
|
||||
className={clsx("sm:text-md flex flex-col border-none", {
|
||||
"rounded-lg bg-accent/30":
|
||||
expandedItems.includes(category.catagoryName) &&
|
||||
expandedItems.length <= 1,
|
||||
})}
|
||||
>
|
||||
<div className="mr-2 flex w-full items-center justify-between">
|
||||
<span className="pl-2">
|
||||
{category.catagoryName}{" "}
|
||||
</span>
|
||||
<span className="rounded-full bg-gray-200 px-2 py-1 text-xs text-muted-foreground hover:no-underline dark:bg-blue-800/20">
|
||||
{category.expand.items.length}
|
||||
</span>
|
||||
</div>{" "}
|
||||
</AccordionTrigger>
|
||||
<AccordionContent
|
||||
data-state={
|
||||
expandedItems.includes(category.catagoryName)
|
||||
? "open"
|
||||
: "closed"
|
||||
}
|
||||
className="pt-0"
|
||||
>
|
||||
{category.expand.items
|
||||
.filter((script) =>
|
||||
script.title.toLowerCase().includes(searchTerm.toLowerCase()),
|
||||
)
|
||||
.map((script, index) => (
|
||||
<p key={index}>
|
||||
<Link
|
||||
href={{
|
||||
pathname: "/scripts",
|
||||
query: { id: script.title },
|
||||
}}
|
||||
className={`flex cursor-pointer items-center justify-between gap-1 px-1 py-1 text-muted-foreground hover:rounded-lg hover:bg-accent/60 hover:dark:bg-accent/20 ${
|
||||
selectedScript === script.title
|
||||
? "rounded-lg bg-accent font-semibold dark:bg-accent/30 dark:text-white"
|
||||
: ""
|
||||
}`}
|
||||
onClick={() => handleSelected(script.title)}
|
||||
ref={(el) => {
|
||||
linkRefs.current[script.title] = el;
|
||||
}}
|
||||
>
|
||||
{showLogos && script.logo && (
|
||||
<Image
|
||||
src={script.logo}
|
||||
priority
|
||||
alt={script.title}
|
||||
width={16}
|
||||
height={16}
|
||||
className="mr-1 rounded-full"
|
||||
/>
|
||||
)}
|
||||
<span className="flex items-center gap-2">
|
||||
{script.title}
|
||||
{script.isMostViewed && (
|
||||
<Star className="h-3 w-3 text-yellow-500"></Star>
|
||||
)}
|
||||
</span>
|
||||
<Badge
|
||||
className={clsx(
|
||||
"ml-auto w-[37.69px] justify-center text-center",
|
||||
{
|
||||
"border-primary/75 text-primary/75":
|
||||
script.item_type === "VM",
|
||||
"border-yellow-500/75 text-yellow-500/75":
|
||||
script.item_type === "LXC",
|
||||
"border-none": script.item_type === "",
|
||||
hidden: !["VM", "LXC", ""].includes(
|
||||
script.item_type,
|
||||
),
|
||||
},
|
||||
)}
|
||||
<AccordionTrigger
|
||||
className={clsx(
|
||||
"duration-250 rounded-lg transition ease-in-out hover:-translate-y-1 hover:scale-105 hover:bg-accent",
|
||||
{ "": expandedItems.includes(category.catagoryName) },
|
||||
)}
|
||||
>
|
||||
<div className="mr-2 flex w-full items-center justify-between">
|
||||
<span className="pl-2">{category.catagoryName} </span>
|
||||
<span className="rounded-full bg-gray-200 px-2 py-1 text-xs text-muted-foreground hover:no-underline dark:bg-blue-800/20">
|
||||
{category.expand.items.length}
|
||||
</span>
|
||||
</div>{" "}
|
||||
</AccordionTrigger>
|
||||
<AccordionContent
|
||||
data-state={
|
||||
expandedItems.includes(category.catagoryName)
|
||||
? "open"
|
||||
: "closed"
|
||||
}
|
||||
className="pt-0"
|
||||
>
|
||||
{category.expand.items
|
||||
.filter((script) =>
|
||||
script.title
|
||||
.toLowerCase()
|
||||
.includes(searchTerm.toLowerCase()),
|
||||
)
|
||||
.map((script, index) => (
|
||||
<p key={index}>
|
||||
<Link
|
||||
href={{
|
||||
pathname: "/scripts",
|
||||
query: { id: script.title },
|
||||
}}
|
||||
className={`flex cursor-pointer items-center justify-between gap-1 px-1 py-1 text-muted-foreground hover:rounded-lg hover:bg-accent/60 hover:dark:bg-accent/20 ${
|
||||
selectedScript === script.title
|
||||
? "rounded-lg bg-accent font-semibold dark:bg-accent/30 dark:text-white"
|
||||
: ""
|
||||
}`}
|
||||
onClick={() => handleSelected(script.title)}
|
||||
ref={(el) => {
|
||||
linkRefs.current[script.title] = el;
|
||||
}}
|
||||
>
|
||||
{script.item_type}
|
||||
</Badge>
|
||||
</Link>
|
||||
</p>
|
||||
))}
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
))}
|
||||
</Accordion>
|
||||
</div>
|
||||
<p className="mt-6 ml-4 text-xs text-muted-foreground flex justify-center">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="cursor-pointer"
|
||||
onClick={() => setShowLogos(!showLogos)}
|
||||
>
|
||||
{showLogos ? (
|
||||
<>
|
||||
<EyeOff className="mr-1 inline-block h-4 w-4 align-text-bottom" />
|
||||
Hide Logos
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Eye className="mr-1 inline-block h-4 w-4 align-text-bottom" />
|
||||
Show Logos
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
{showLogos && script.logo && (
|
||||
<Image
|
||||
src={script.logo}
|
||||
priority={true}
|
||||
alt={script.title}
|
||||
width={16}
|
||||
height={16}
|
||||
className="mr-1 rounded-full"
|
||||
/>
|
||||
)}
|
||||
<span className="flex items-center gap-2">
|
||||
{script.title}
|
||||
{script.isMostViewed && (
|
||||
<Star className="h-3 w-3 text-yellow-500"></Star>
|
||||
)}
|
||||
</span>
|
||||
<Badge
|
||||
className={clsx(
|
||||
"ml-auto w-[37.69px] justify-center text-center",
|
||||
{
|
||||
"border-primary/75 text-primary/75":
|
||||
script.item_type === "VM",
|
||||
"border-yellow-500/75 text-yellow-500/75":
|
||||
script.item_type === "LXC",
|
||||
"border-none": script.item_type === "",
|
||||
hidden: !["VM", "LXC", ""].includes(
|
||||
script.item_type,
|
||||
),
|
||||
},
|
||||
)}
|
||||
>
|
||||
{script.item_type}
|
||||
</Badge>
|
||||
</Link>
|
||||
</p>
|
||||
))}
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
))}
|
||||
</Accordion>
|
||||
</div>
|
||||
<p className="ml-4 mt-6 flex justify-center text-xs text-muted-foreground">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="cursor-pointer"
|
||||
onClick={() => setShowLogos(!showLogos)}
|
||||
>
|
||||
{showLogos ? (
|
||||
<>
|
||||
<EyeOff className="mr-1 inline-block h-4 w-4 align-text-bottom" />
|
||||
Hide Logos
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Eye className="mr-1 inline-block h-4 w-4 align-text-bottom" />
|
||||
Show Logos
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user