mirror of
https://github.com/pheralb/svgl.git
synced 2024-09-20 11:16:19 +08:00
✨ Design improvements.
This commit is contained in:
pheralb
parent
9adafef87f
commit
551192053d
55
src/components/cardSpotlight.svelte
Normal file
55
src/components/cardSpotlight.svelte
Normal file
@ -0,0 +1,55 @@
|
||||
<script lang="ts">
|
||||
let div: HTMLDivElement;
|
||||
let focused = false;
|
||||
let position = { x: 0, y: 0 };
|
||||
let opacity = 0;
|
||||
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
if (!div || focused) return;
|
||||
|
||||
const rect = div.getBoundingClientRect();
|
||||
|
||||
position = {
|
||||
x: e.clientX - rect.left,
|
||||
y: e.clientY - rect.top
|
||||
};
|
||||
};
|
||||
|
||||
const handleFocus = () => {
|
||||
focused = true;
|
||||
opacity = 1;
|
||||
};
|
||||
|
||||
const handleBlur = () => {
|
||||
focused = false;
|
||||
opacity = 0;
|
||||
};
|
||||
|
||||
const handleMouseEnter = () => {
|
||||
opacity = 1;
|
||||
};
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
opacity = 0;
|
||||
};
|
||||
</script>
|
||||
|
||||
<div
|
||||
aria-hidden="true"
|
||||
bind:this={div}
|
||||
on:mousemove={handleMouseMove}
|
||||
on:focus={handleFocus}
|
||||
on:blur={handleBlur}
|
||||
on:mouseenter={handleMouseEnter}
|
||||
on:mouseleave={handleMouseLeave}
|
||||
class="relative flex items-center justify-center overflow-hidden rounded-md border border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-800/20"
|
||||
>
|
||||
<div
|
||||
class="pointer-events-none absolute -inset-px opacity-0 transition duration-300"
|
||||
style={`
|
||||
opacity: ${opacity};
|
||||
background: radial-gradient(600px circle at ${position.x}px ${position.y}px, rgba(97, 97, 97, 0.1), transparent 40%);
|
||||
`}
|
||||
/>
|
||||
<slot />
|
||||
</div>
|
||||
@ -9,6 +9,7 @@
|
||||
import Copy from 'phosphor-svelte/lib/Copy';
|
||||
import Link from 'phosphor-svelte/lib/Link';
|
||||
import Star from 'phosphor-svelte/lib/Star';
|
||||
import CardSpotlight from './cardSpotlight.svelte';
|
||||
|
||||
// Props:
|
||||
export let svgInfo: iSVG;
|
||||
@ -38,43 +39,43 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="flex flex-col items-center justify-center rounded-md border border-neutral-300 bg-neutral-100 p-4 dark:border-neutral-800 dark:bg-neutral-700/10"
|
||||
>
|
||||
<img src={svgInfo.route} alt={svgInfo.title} class="mb-4 mt-2 h-10" />
|
||||
<div class="mb-3 flex flex-col items-center justify-center">
|
||||
<p class="truncate text-[15px] font-medium">{svgInfo.title}</p>
|
||||
<a
|
||||
href={`/directory/${svgInfo.category.toLowerCase()}`}
|
||||
class="text-sm lowercase text-neutral-500 hover:underline">{svgInfo.category}</a
|
||||
>
|
||||
<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" />
|
||||
<div class="mb-3 flex flex-col items-center justify-center">
|
||||
<p class="truncate text-[15px] font-medium">{svgInfo.title}</p>
|
||||
<a
|
||||
href={`/directory/${svgInfo.category.toLowerCase()}`}
|
||||
class="text-sm lowercase text-neutral-500 hover:underline">{svgInfo.category}</a
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-center space-x-1">
|
||||
<button
|
||||
title="Copy to clipboard"
|
||||
on:click={() => {
|
||||
copyToClipboard(svgInfo.route);
|
||||
}}
|
||||
class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
|
||||
>
|
||||
<Copy size={17} />
|
||||
</button>
|
||||
<button
|
||||
title="Download"
|
||||
on:click={() => {
|
||||
downloadSvg(svgInfo.route);
|
||||
}}
|
||||
class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
|
||||
>
|
||||
<DownloadSimple size={17} />
|
||||
</button>
|
||||
<a
|
||||
href={svgInfo.url}
|
||||
title="Website"
|
||||
target="_blank"
|
||||
class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
|
||||
>
|
||||
<Link size={17} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-1">
|
||||
<button
|
||||
title="Copy to clipboard"
|
||||
on:click={() => {
|
||||
copyToClipboard(svgInfo.route);
|
||||
}}
|
||||
class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
|
||||
>
|
||||
<Copy size={17} />
|
||||
</button>
|
||||
<button
|
||||
title="Download"
|
||||
on:click={() => {
|
||||
downloadSvg(svgInfo.route);
|
||||
}}
|
||||
class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
|
||||
>
|
||||
<DownloadSimple size={17} />
|
||||
</button>
|
||||
<a
|
||||
href={svgInfo.url}
|
||||
title="Website"
|
||||
target="_blank"
|
||||
class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
|
||||
>
|
||||
<Link size={17} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</CardSpotlight>
|
||||
|
||||
@ -16,6 +16,8 @@
|
||||
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';
|
||||
|
||||
// Toaster:
|
||||
import { Toaster } from 'svelte-sonner';
|
||||
@ -50,18 +52,21 @@
|
||||
>
|
||||
<a
|
||||
href="/"
|
||||
class={`flex w-full items-center rounded-md p-2 transition-none duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40
|
||||
${data.pathname === `/` ? 'bg-neutral-200 dark:bg-neutral-700/30' : ''}`}
|
||||
class={`flex w-full items-center rounded-md p-2 transition-none duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40 text-neutral-600 hover:text-dark dark:hover:text-white dark:text-neutral-400 ${
|
||||
data.pathname === `/`
|
||||
? 'bg-neutral-200 dark:bg-neutral-700/30 font-medium dark:text-white text-dark'
|
||||
: ''
|
||||
}`}
|
||||
data-sveltekit-preload-data>All</a
|
||||
>
|
||||
<!-- Order alfabetically: -->
|
||||
{#each categories.sort() as category}
|
||||
<a
|
||||
href={`/directory/${category.toLowerCase()}`}
|
||||
class={`flex w-full items-center rounded-md p-2 transition-none duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40
|
||||
class={`flex w-full items-center rounded-md p-2 transition-none duration-100 text-neutral-600 hover:text-dark dark:hover:text-white dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700/40
|
||||
${
|
||||
data.pathname === `/directory/${category.toLowerCase()}`
|
||||
? 'bg-neutral-200 dark:bg-neutral-700/30'
|
||||
? 'bg-neutral-200 dark:bg-neutral-700/30 font-medium dark:text-white text-dark'
|
||||
: ''
|
||||
}`}
|
||||
data-sveltekit-preload-data>{category}</a
|
||||
@ -76,8 +81,9 @@
|
||||
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={16} /></div>
|
||||
<div><ArrowUpRight size={12} /></div>
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/pheralb/svgl"
|
||||
@ -85,6 +91,7 @@
|
||||
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">
|
||||
@ -94,7 +101,7 @@
|
||||
<span>{data.stars}</span>
|
||||
</div>
|
||||
{/if}
|
||||
<div><ArrowUpRight size={16} /></div>
|
||||
<div><ArrowUpRight size={12} /></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user