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

Merge pull request #33 from tnware/script-browser-style

Browse Source
This commit is contained in:
Bram Suurd
2024-06-08 08:18:09 +02:00
committed by GitHub
parent 77042b1841 59963e676f
commit f37f0efe5b
2 changed files with 67 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
components/Script.tsx
View File

@@ -5,7 +5,7 @@ import { Suspense, useEffect, useState, useMemo } from "react";
import { extractDate } from "@/lib/time";
import { Button } from "./ui/button";
import { toast } from "sonner";
import { Clipboard, Info, X, Code, Globe, BookOpenText, ExternalLink } from "lucide-react";
import { Clipboard, Info, X, Code, Globe, BookOpenText, ExternalLink, Copy } from "lucide-react";
import { Separator } from "@/components/ui/separator";
import Link from "next/link";
import { Category, Script } from "@/lib/types";
@@ -315,12 +315,14 @@ function ScriptItem({
<Separator className="mt-4" />
<div>
<div className="mt-4">
<h2 className="max-w-prose text-lg font-semibold">
<div className="p-2">
<h2 className="max-w-prose text-lg font-semibold mb-2">
Description
</h2>
<p className="text-sm">
{descriptionCodeBlock(item.description)}
</p>
</div>
{item.alert1 && (
<div className="mt-4 flex flex-col gap-2">
<p className="inline-flex items-center gap-2 rounded-lg border border-red-500/25 bg-destructive/25 p-2 pl-4 text-sm">
@@ -343,10 +345,12 @@ function ScriptItem({
)}
</div>
<div className="mt-4 rounded-lg border bg-accent/50 p-4">
<h2 className="text-lg font-semibold">
<div className="mt-4 rounded-lg border bg-accent/50">
<h2 className="py-2 px-4 text-lg font-semibold">
How to {item.item_type ? "install" : "use"}
</h2>
<Separator className="w-full"></Separator>
<div className="p-4">
{item.hasAlpineScript ? (
<Tabs
defaultValue="default"
@@ -419,6 +423,7 @@ function ScriptItem({
{!isMobile && item.alpineScript
? item.alpineScript
: "Copy install command"}
<Copy></Copy>
</Button>
</>
)}
@@ -454,9 +459,12 @@ function ScriptItem({
{!isMobile && installCommand
? installCommand
: "Copy install command"}
<span className="p-2"></span>
<Copy className="w-4"></Copy>
</Button>
</>
)}
</div>
</div>
</div>
</div>

83
components/ScriptBrowser.tsx
View File

@@ -12,6 +12,7 @@ import { X, EyeOff, Eye, Star } from "lucide-react";
import React, { useState, useEffect, useRef, useMemo, useCallback } from "react";
import { Category } from "@/lib/types";
import { Badge } from "./ui/badge";
import { Button } from "./ui/button";
import clsx from "clsx";
const ScriptBrowser = ({
@@ -151,7 +152,7 @@ const ScriptBrowser = ({
<Input
className="flex-grow bg-accent/30"
type="text"
placeholder="Type '/' to search"
placeholder="Search..."
onChange={(e) => handleSearch(e.target.value)}
ref={inputRef}
value={searchTerm}
@@ -168,43 +169,49 @@ const ScriptBrowser = ({
)}
</div>
{searchTerm ? (
<p className="mb-2 ml-2 text-xs text-muted-foreground">
Press &apos;Esc&apos; to clear the search
</p>
<div className="mb-2 ml-2 text-xs text-muted-foreground">
<p className="text-sm">
Press
<kbd className="m-1 inline-flex h-5 items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium">
<span className="text-xs">esc</span>
</kbd>
to clear the search
</p>
</div>
) : (
<p className="mb-2 ml-2 text-xs text-muted-foreground">
<a
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
</>
)}
</a>
</p>
<div className="mb-2 ml-2 text-xs text-muted-foreground">
<p className="text-sm">
Press
<kbd className="m-1 inline-flex h-5 items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium">
<span className="text-xs">/</span>
</kbd>
to search
</p>
</div>
)}
</div>
<div className="rounded-lg">
<Accordion {...accordionProps}>
{filteredLinks.map((category) => (
<AccordionItem
key={category.collectionId}
value={category.catagoryName}
className="sm:text-md flex flex-col"
className={clsx(
'sm:text-md flex flex-col border-none px-2',
{ 'bg-accent/30 rounded-lg': expandedItems.includes(category.catagoryName) && expandedItems.length <= 1 }
)}
>
<AccordionTrigger className="hover:underline">
<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) }
)}
>
<div className="mr-2 flex w-full items-center justify-between">
<span className="hover:underline">
<span className="ml-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">
<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>{" "}
@@ -228,9 +235,9 @@ const ScriptBrowser = ({
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-blue-300/20 hover:bg-neutral-50 hover:dark:bg-blue-900/20 ${
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-blue-300/20 font-semibold dark:bg-blue-900/20 dark:text-white"
? "rounded-lg bg-accent font-semibold dark:bg-accent/30 dark:text-white"
: ""
}`}
onClick={() => handleSelected(script.title)}
@@ -279,6 +286,26 @@ const ScriptBrowser = ({
))}
</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>
</p>
</div>
);
};