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

✨ Design improvements.

Browse Source
This commit is contained in:
pheralb
2023-11-14 10:42:03 +00:00
parent 9adafef87f
commit 551192053d
3 changed files with 108 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/cardSpotlight.svelte
+55
View 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>
src/components/svgCard.svelte
+40 -39
View File
@@ -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>