mirror of
https://github.com/pheralb/svgl.git
synced 2025-02-11 17:50:32 +08:00
⚡️ Add new icons + update sidebar.
This commit is contained in:
pheralb
parent
81dc918ab7
commit
b7b1a6de58
86
src/components/navbar.svelte
Normal file
86
src/components/navbar.svelte
Normal file
@ -0,0 +1,86 @@
|
||||
<script>
|
||||
import { cn } from '@/utils/cn';
|
||||
import Logo from './logo.svelte';
|
||||
import { ArrowUpRight, CloudyIcon, GithubIcon, TwitterIcon } from 'lucide-svelte';
|
||||
import Theme from './theme.svelte';
|
||||
|
||||
const socials = [
|
||||
{
|
||||
name: 'Twitter',
|
||||
url: 'https://twitter.com/pheralb_',
|
||||
icon: GithubIcon
|
||||
},
|
||||
{
|
||||
name: 'GitHub',
|
||||
url: 'https://github.com/pheralb/svgl',
|
||||
icon: TwitterIcon
|
||||
}
|
||||
];
|
||||
|
||||
const links = [
|
||||
{
|
||||
name: 'API',
|
||||
url: '/api',
|
||||
icon: CloudyIcon,
|
||||
external: false
|
||||
},
|
||||
{
|
||||
name: 'Submit logo',
|
||||
url: 'https://github.com/pheralb/svgl#-getting-started',
|
||||
icon: ArrowUpRight,
|
||||
external: true
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<nav
|
||||
class={cn(
|
||||
'dark:bg-neutral-900 bg-neutral-100',
|
||||
'w-full px-5 py-4 border-b border-neutral-200 dark:border-neutral-800',
|
||||
'sticky top-0 z-50',
|
||||
'backdrop-blur-md opacity-95'
|
||||
)}
|
||||
>
|
||||
<div class="flex items-center justify-between mx-auto">
|
||||
<div class="flex items-center space-x-2">
|
||||
<a href="/">
|
||||
<div class="flex items-center space-x-2 hover:opacity-80 transition-opacity">
|
||||
<svelte:component this={Logo} />
|
||||
<span class="text-[19px] font-medium tracking-wide">svgl</span>
|
||||
<p class="text-neutral-500">v4.0.0</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex items-center space-x-7">
|
||||
<div class="flex items-center space-x-4 divide-x divide-neutral-300 dark:divide-neutral-700">
|
||||
{#each links as link}
|
||||
<a
|
||||
href={link.url}
|
||||
target={link.external ? '_blank' : '_self'}
|
||||
class="flex items-center hover:opacity-80 transition-opacity text-[15px] pl-3"
|
||||
>
|
||||
{#if !link.external}
|
||||
<svelte:component this={link.icon} size={16} strokeWidth={1.5} class="mr-2" />
|
||||
{/if}
|
||||
<span>{link.name}</span>
|
||||
{#if link.external}
|
||||
<svelte:component this={link.icon} size={16} strokeWidth={1.5} class="ml-1" />
|
||||
{/if}
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="flex items-center space-x-3">
|
||||
{#each socials as social}
|
||||
<a
|
||||
href={social.url}
|
||||
target="_blank"
|
||||
class="flex items-center space-x-1 hover:opacity-80 transition-opacity"
|
||||
>
|
||||
<svelte:component this={social.icon} size={20} strokeWidth={1.5} />
|
||||
</a>
|
||||
{/each}
|
||||
<Theme />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@ -1,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { SearchIcon } from 'lucide-svelte';
|
||||
export let searchTerm: string;
|
||||
export let placeholder: string = 'Search...';
|
||||
export let clearSearch: () => void;
|
||||
@ -9,7 +10,7 @@
|
||||
<div class="relative w-full">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-500">
|
||||
<div class="pointer-events-none">
|
||||
<MagnifyingGlass size={18} weight={searchTerm ? 'duotone' : 'regular'} />
|
||||
<SearchIcon size={18} strokeWidth={searchTerm ? 2.5 : 1.5} />
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
|
||||
<CardSpotlight>
|
||||
<div class="flex flex-col items-center justify-center rounded-md p-4">
|
||||
<img src={svgInfo.route} alt={svgInfo.title} class="mb-4 mt-2 h-10" />
|
||||
<img src={svgInfo.route} alt={svgInfo.title} class="mb-4 mt-2 h-10" loading="lazy" />
|
||||
<div class="mb-3 flex flex-col items-center justify-center">
|
||||
<p class="truncate text-[15px] font-medium">{svgInfo.title}</p>
|
||||
<a
|
||||
|
||||
@ -35,12 +35,10 @@
|
||||
}
|
||||
|
||||
// Icons:
|
||||
import Moon from 'phosphor-svelte/lib/Moon';
|
||||
import Sun from 'phosphor-svelte/lib/Sun';
|
||||
import { MoonIcon, SunIcon } from 'lucide-svelte';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<!-- set dark mode class based on user preference / device settings (in head to avoid FOUC) -->
|
||||
<script>
|
||||
if (
|
||||
localStorage.theme === 'dark' ||
|
||||
@ -53,15 +51,11 @@
|
||||
</script>
|
||||
</svelte:head>
|
||||
|
||||
<button
|
||||
on:click={toggle}
|
||||
class="duration-100 hover:-translate-y-0.5 focus:outline-none"
|
||||
aria-label="Toggle dark mode"
|
||||
>
|
||||
<button on:click={toggle} aria-label="Toggle dark mode">
|
||||
<!-- moon icon -->
|
||||
{#if dark}
|
||||
<Sun size={18} />
|
||||
<SunIcon size={20} strokeWidth={1.5} />
|
||||
{:else}
|
||||
<Moon size={18} />
|
||||
<MoonIcon size={20} strokeWidth={1.5} />
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
@ -13,11 +13,8 @@
|
||||
|
||||
// Icons:
|
||||
import Heart from 'phosphor-svelte/lib/Heart';
|
||||
import ArrowUpRight from 'phosphor-svelte/lib/ArrowUpRight';
|
||||
import ArrowLeft from 'phosphor-svelte/lib/ArrowLeft';
|
||||
import Star from 'phosphor-svelte/lib/Star';
|
||||
import GithubLogo from 'phosphor-svelte/lib/GithubLogo';
|
||||
import Box from 'phosphor-svelte/lib/Cube';
|
||||
import { ArrowUpRight } from 'lucide-svelte';
|
||||
|
||||
// Toaster:
|
||||
import { Toaster } from 'svelte-sonner';
|
||||
@ -25,32 +22,24 @@
|
||||
// Components for all pages:
|
||||
import Transition from '@/components/transition.svelte';
|
||||
import Container from '@/components/container.svelte';
|
||||
import Theme from '@/components/theme.svelte';
|
||||
|
||||
// Layout:
|
||||
import Navbar from '@/components/navbar.svelte';
|
||||
import { cn } from '@/utils/cn';
|
||||
</script>
|
||||
|
||||
<Navbar />
|
||||
<main>
|
||||
<aside
|
||||
class="z-50 w-full overflow-y-auto overflow-x-hidden border-b border-neutral-300 dark:border-neutral-800 md:fixed md:left-0 md:h-full md:w-60 md:border-none md:pb-10"
|
||||
class={cn(
|
||||
'z-50 w-full overflow-y-auto overflow-x-hidden',
|
||||
'dark:border-neutral-800 md:fixed md:left-0 md:h-full md:w-56 md:pb-10',
|
||||
'bg-neutral-100 dark:bg-neutral-900',
|
||||
'backdrop-blur-md opacity-95',
|
||||
'border-r border-neutral-200 dark:border-neutral-800'
|
||||
)}
|
||||
>
|
||||
<div class="px-6 py-6">
|
||||
<div class="mb-3 border-b border-neutral-300 pb-3 dark:border-neutral-700/40">
|
||||
<div class="flex items-center justify-between">
|
||||
<a href="/">
|
||||
<div
|
||||
class="flex items-center space-x-2 duration-150 hover:text-neutral-500 dark:hover:text-neutral-300"
|
||||
>
|
||||
<h3 class="text-xl font-medium">svgl</h3>
|
||||
<p class="text-neutral-500">v3.2.2</p>
|
||||
</div>
|
||||
</a>
|
||||
<Theme />
|
||||
</div>
|
||||
<p class="mt-2 font-medium text-neutral-400">✨ Optimized SVGs for web</p>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center space-x-1 overflow-y-auto border-b border-neutral-300 pb-3 dark:border-neutral-700/40 md:mb-3 md:flex-col md:space-x-0 md:space-y-1 md:overflow-y-visible"
|
||||
>
|
||||
@ -77,53 +66,21 @@
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
<div
|
||||
class="mt-3 flex flex-row items-center space-x-2 border-b border-neutral-300 pb-3 dark:border-neutral-700/40 md:mt-0 md:flex-col md:space-x-0 md:space-y-1"
|
||||
>
|
||||
<a
|
||||
href="https://github.com/pheralb/svgl#-getting-started"
|
||||
target="_blank"
|
||||
class="flex w-full items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
|
||||
>
|
||||
<div><Box size={18} /></div>
|
||||
<span>Submit logo</span>
|
||||
<div><ArrowUpRight size={12} /></div>
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/pheralb/svgl"
|
||||
target="_blank"
|
||||
class="flex w-full items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
|
||||
>
|
||||
<div class="flex items-center space-x-2">
|
||||
<div><GithubLogo size={18} /></div>
|
||||
<span class="flex items-center justify-center">Repository</span>
|
||||
{#if data.stars}
|
||||
<div class="flex items-center space-x-1 text-neutral-600 dark:text-neutral-400">
|
||||
<div>
|
||||
<Star size={14} weight="duotone" class="text-yellow-700 dark:text-yellow-500" />
|
||||
</div>
|
||||
<span>{data.stars}</span>
|
||||
</div>
|
||||
{/if}
|
||||
<div><ArrowUpRight size={12} /></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<a
|
||||
href="https://twitter.com/pheralb_"
|
||||
target="_blank"
|
||||
class="mt-5 flex items-center space-x-2 duration-100 hover:text-dark dark:text-neutral-400 dark:hover:text-white"
|
||||
class="mt-5 md:flex hidden items-center space-x-2 duration-100 hover:text-dark dark:text-neutral-400 dark:hover:text-white"
|
||||
>
|
||||
<Heart color="#991b1b" size={18} weight={'duotone'} />
|
||||
<div class="flex items-center space-x-1">
|
||||
<p class="text-muted text-sm">Created by pheralb</p>
|
||||
<ArrowUpRight size={12} />
|
||||
<ArrowUpRight size={14} />
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<div class="py-2 md:ml-60 md:py-6">
|
||||
{#if data.pathname !== '/'}
|
||||
<div class="py-2 md:ml-56 md:py-2">
|
||||
{#if data.pathname !== '/' && data.pathname !== 'directory'}
|
||||
<Container>
|
||||
<a href="/">
|
||||
<div
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user