qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2025-12-29 08:01:36 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

🛠️ Update GitHub link title, remove unused SvglVersion component, improve search input with name attribute & dialog, popover and tabs improvements

Browse Source
This commit is contained in:
pheralb
2025-09-24 14:08:07 +01:00
parent 26f6bb9061
commit 60314a9648
11 changed files with 40 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/githubLink.svelte
+1 -1
View File
@@ -26,7 +26,7 @@
<a
target="_blank"
title="GitHub Repository"
title="pheralb/svgl Repository"
href={globals.githubUrl}
class={cn(
buttonVariants({ variant: "ghost" }),
src/components/layout/header.svelte
+2 -4
View File
@@ -9,7 +9,6 @@
import { Separator } from "@/components/ui/separator";
import { buttonVariants } from "@/components/ui/button";
import SvglVersion from "@/components/svglVersion.svelte";
import SendIcon from "@/components/ui/moving-icons/send-icon.svelte";
import SidebarMobileMenu from "@/components/layout/sidebarMobileMenu.svelte";
import SettingsMenu from "@/components/settings/settingsMenu.svelte";
@@ -20,16 +19,15 @@
class="sticky top-0 z-50 w-full bg-neutral-100 px-2 py-3 md:px-4 md:py-4 dark:bg-neutral-950"
>
<nav class="flex w-full items-center justify-between">
<div class="flex items-center space-x-3">
<div class="flex items-center space-x-2">
<SidebarMobileMenu className="md:hidden" />
<a
href="/"
class="flex items-center space-x-2.5 transition-colors hover:text-neutral-700 dark:hover:text-neutral-300"
class="flex items-center space-x-2 transition-colors hover:text-neutral-700 dark:hover:text-neutral-300"
>
<Svgl size={28} />
<h2 class="text-xl font-medium tracking-tight">svgl</h2>
</a>
<SvglVersion className="hidden md:block" />
</div>
<div class="flex h-5 items-center space-x-2.5">
<div class="flex items-center space-x-1.5">
src/components/search.svelte
+1
View File
@@ -60,6 +60,7 @@
autocomplete="off"
placeholder={placeholder || "Search..."}
oninput={onInput}
name="search"
value={searchValue}
class={cn(
"overflow-hidden shadow-sm",
src/components/svglVersion.svelte
-14
View File
@@ -1,14 +0,0 @@
<script lang="ts">
import { PUBLIC_SVGL_VERSION } from "$env/static/public";
import Badge from "@/components/ui/badge/badge.svelte";
interface Props {
className?: string;
}
let { className }: Props = $props();
</script>
{#if PUBLIC_SVGL_VERSION}
<Badge variant="outline" class={className}>{PUBLIC_SVGL_VERSION}</Badge>
{/if}
src/components/svgs/copySvg.svelte
+20 -17
View File
@@ -16,6 +16,7 @@
// UI Components:
import { toast } from "svelte-sonner";
import { Separator } from "@/components/ui/separator";
import * as Tabs from "@/components/ui/tabs";
import { Button, buttonVariants } from "@/components/ui/button";
import * as Popover from "@/components/ui/popover";
@@ -37,6 +38,7 @@
import React from "@/components/logos/react.svelte";
import Astro from "@/components/logos/astro.svelte";
import Svelte from "@/components/logos/svelte.svelte";
import Shadcn from "@/components/logos/shadcn.svelte";
import Angular from "@/components/logos/angular.svelte";
import WebComponents from "@/components/logos/webComponents.svelte";
@@ -389,42 +391,43 @@
<CopyIcon {size} strokeWidth={iconStroke} />
{/if}
</Popover.Trigger>
<Popover.Content class="flex w-fit flex-col space-y-2 p-4" sideOffset={2}>
<Popover.Content class="flex flex-col space-y-2 p-4" sideOffset={2}>
<Tabs.Root value="source" class="flex w-full flex-col space-y-1">
<Tabs.List class="w-fit border-none bg-transparent">
<Tabs.Trigger value="source">Source</Tabs.Trigger>
<Tabs.Trigger value="shadcn">shadcn/ui</Tabs.Trigger>
<div
class="ml-3 flex flex-row space-x-1 border-l border-neutral-200 pl-3 dark:border-neutral-800"
>
<Tabs.Trigger
class="px-2.5"
value="web-component"
title="Web Component"
>
<Tabs.List
class="flex h-auto w-auto flex-col space-y-2 space-x-0 border-0 md:h-9 md:flex-row md:space-y-0 md:space-x-1"
>
<div class="flex items-center space-x-1">
<Tabs.Trigger value="source">Source</Tabs.Trigger>
<Tabs.Trigger value="shadcn" title="shadcn/ui">
<Shadcn size={18} />
</Tabs.Trigger>
</div>
<div class="flex items-center space-x-1">
<Tabs.Trigger value="web-component" title="Web Component">
<WebComponents size={21} />
</Tabs.Trigger>
<Tabs.Trigger class="px-2.5" value="react" title="React">
<Tabs.Trigger value="react" title="React">
<React size={20} />
</Tabs.Trigger>
<Tabs.Trigger class="px-2.5" value="vue" title="Vue">
<Tabs.Trigger value="vue" title="Vue">
<Vue size={20} />
</Tabs.Trigger>
<Tabs.Trigger class="px-2.5" value="svelte" title="Svelte">
<Tabs.Trigger value="svelte" title="Svelte">
<Svelte size={20} />
</Tabs.Trigger>
<Tabs.Trigger class="px-2.5" value="angular" title="Angular">
<Tabs.Trigger value="angular" title="Angular">
<Angular size={20} />
</Tabs.Trigger>
<Tabs.Trigger
value="astro"
title="Astro"
class="px-2.5 text-black dark:text-white"
class="text-black dark:text-white"
>
<Astro size={21} />
</Tabs.Trigger>
</div>
</Tabs.List>
<Separator class="block md:hidden" />
<!-- Source -->
<Tabs.Content value="source">
<section class="flex flex-col space-y-2">
src/components/svgs/svgCard.svelte
+11 -5
View File
@@ -46,9 +46,9 @@
<div
class={cn(
"group flex flex-col items-center justify-center px-3.5 py-3",
"flex flex-col items-center justify-center px-3.5 py-3",
"rounded-md border border-neutral-200 dark:border-neutral-800",
"transition-colors duration-100 hover:bg-neutral-100/80 dark:hover:bg-neutral-800/20",
"hover:bg-neutral-100/80 dark:hover:bg-neutral-800/20",
)}
>
<!-- Image Options -->
@@ -72,6 +72,7 @@
<!-- Image -->
{#if wordmarkSvg && svgInfo.wordmark !== undefined}
<img
loading="lazy"
class={cn("hidden dark:block", globalImageStyles)}
src={getSvgImgUrl({ url: svgInfo.wordmark, isDark: true })}
alt={svgInfo.title}
@@ -80,6 +81,7 @@
height="40"
/>
<img
loading="lazy"
class={cn("block dark:hidden", globalImageStyles)}
src={getSvgImgUrl({ url: svgInfo.wordmark, isDark: false })}
alt={svgInfo.title}
@@ -89,6 +91,7 @@
/>
{:else}
<img
loading="lazy"
class={cn("hidden dark:block", globalImageStyles)}
src={getSvgImgUrl({ url: svgInfo.route, isDark: true })}
alt={svgInfo.title}
@@ -97,6 +100,7 @@
height="40"
/>
<img
loading="lazy"
class={cn("block dark:hidden", globalImageStyles)}
src={getSvgImgUrl({ url: svgInfo.route, isDark: false })}
alt={svgInfo.title}
@@ -127,7 +131,6 @@
{c}
</a>
{/each}
{#if svgInfo.category.length > maxVisibleCategories}
<Popover.Root
open={moreTagsOptions}
@@ -148,11 +151,14 @@
{/if}
</Popover.Trigger>
<Popover.Content class="flex w-auto flex-col space-y-2">
<p class="font-medium">More tags:</p>
<p class="font-medium">More tags</p>
{#each svgInfo.category.slice(maxVisibleCategories) as c (c)}
<a
href={`/directory/${c.toLowerCase()}`}
class={cn(buttonVariants({ variant: "outline" }), "w-full")}
class={cn(
buttonVariants({ variant: "outline" }),
"w-full justify-start",
)}
>
<TagIcon size={15} strokeWidth={1.5} />
<span>{c}</span>
src/components/ui/button/button.variants.ts
+1 -1
View File
@@ -7,7 +7,7 @@ const buttonVariants = tv({
default:
"bg-neutral-900 text-neutral-50 shadow hover:bg-neutral-900/90 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/70",
radial:
"bg-radial-[at_52%_-52%] **:[text-shadow:0_1px_0_var(--color-neutral-950)] border-neutral-950 from-neutral-950/70 to-neutral-950/95 text-white inset-shadow-2xs inset-shadow-white/25 border text-sm shadow-md shadow-neutral-950/30 ring-0 transition-[filter] duration-200 hover:brightness-125 active:brightness-95 dark:border-0 dark:from-neutral-950/70 dark:to-neutral-900/90",
"bg-radial-[at_52%_-52%] **:[text-shadow:0_1px_0_var(--color-neutral-950)] border-neutral-950 from-neutral-950/70 to-neutral-950/95 text-white inset-shadow-2xs inset-shadow-white/25 border text-sm shadow-md shadow-neutral-950/30 ring-0 transition-[filter] duration-200 hover:brightness-125 active:brightness-95 dark:bg-white dark:text-neutral-50 dark:shadow-none dark:border-0",
destructive:
"bg-red-500 text-neutral-50 shadow-sm hover:bg-red-500/90 dark:bg-red-900 dark:text-neutral-50 dark:hover:bg-red-900/90",
outline:
src/components/ui/dialog/dialog-content.svelte
+1
View File
@@ -36,6 +36,7 @@
{@render children?.()}
{#if showCloseButton}
<DialogPrimitive.Close
title="Close"
class={cn(
"absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
"ring-offset-white focus:ring-neutral-400 focus:ring-offset-2 data-[state=open]:bg-white data-[state=open]:text-neutral-500 dark:ring-offset-neutral-300 dark:focus:ring-neutral-700 dark:data-[state=open]:bg-neutral-900 dark:data-[state=open]:text-neutral-400",
src/components/ui/popover/popover-content.svelte
+1 -1
View File
@@ -21,7 +21,7 @@
{sideOffset}
{align}
class={cn(
"z-50 w-fit max-w-[480px] origin-(--bits-popover-content-transform-origin) rounded-md border border-neutral-200 bg-white p-4 text-neutral-900 shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-50",
"z-50 w-auto max-w-96 origin-(--bits-popover-content-transform-origin) rounded-md border border-neutral-200 bg-white p-4 text-neutral-900 shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 md:max-w-[480px] dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-50",
className,
)}
{...restProps}
src/components/ui/tabs/tabs-list.svelte
+1 -1
View File
@@ -13,7 +13,7 @@
bind:ref
data-slot="tabs-list"
class={cn(
"inline-flex h-9 items-center justify-center rounded-md border border-neutral-200 bg-white p-1 text-neutral-500 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-400",
"inline-flex h-9 items-center justify-center rounded-md border border-neutral-200 bg-white text-neutral-500 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-400",
className,
)}
{...restProps}
src/components/ui/tabs/tabs-trigger.svelte
+1 -1
View File
@@ -13,7 +13,7 @@
bind:ref
data-slot="tabs-trigger"
class={cn(
"inline-flex cursor-pointer items-center justify-center rounded-md px-3 py-1 text-sm font-medium whitespace-nowrap ring-offset-white transition-all hover:text-black focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-neutral-200 data-[state=active]:text-neutral-950 data-[state=active]:shadow dark:ring-offset-neutral-950 dark:hover:text-white dark:focus-visible:ring-neutral-300 dark:data-[state=active]:bg-neutral-800 dark:data-[state=active]:text-neutral-50",
"inline-flex cursor-pointer items-center justify-center rounded-md px-3 py-1 text-sm font-medium whitespace-nowrap ring-offset-white transition-all hover:bg-neutral-200 hover:text-black focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-neutral-200 data-[state=active]:text-neutral-950 data-[state=active]:shadow dark:ring-offset-neutral-950 dark:hover:bg-neutral-800 dark:hover:text-white dark:focus-visible:ring-neutral-300 dark:data-[state=active]:bg-neutral-800 dark:data-[state=active]:text-neutral-50",
className,
)}
{...restProps}