qyg2297248353/svgl
qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2024-11-10 14:46:54 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

🛠 Design improvements.

Browse Source
This commit is contained in:
Pablo Hdez 2023-03-16 11:28:17 +00:00
parent 79e6b9ba8e
commit d71fe3993f
1 changed files with 9 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
src/routes/+page.svelte
View File

@ -1,53 +1,14 @@
<script lang="ts">
import download from 'downloadjs';
import toast from 'svelte-french-toast';
import type { iSVG } from '../types/svg';
// Get all svgs:
import svgData from '../data/svgs.json';
const allSvgs = JSON.parse(JSON.stringify(svgData));
// Icons:
import DownloadSimple from 'phosphor-svelte/lib/DownloadSimple';
import ArrowUpRight from 'phosphor-svelte/lib/ArrowUpRight';
import Copy from 'phosphor-svelte/lib/Copy';
import type { iSVG } from '../types/svg';
// Download SVG:
const downloadSvg = (url?: string) => {
download(url || '');
toast('Downloading', {
icon: '🎉',
style: 'border-radius: 200px; background: #333; color: #fff;'
});
};
// Get SVG content:
const MIMETYPE = 'text/plain';
const getSvgContent = async (url: string | undefined, isSupported: boolean) => {
const response = await fetch(url || '');
const content = await response.text();
const blob = new Blob([content], { type: MIMETYPE });
return isSupported ? blob : content;
};
// Copy SVG to clipboard:
const copyToClipboard = async (url?: string) => {
const data = {
[MIMETYPE]: getSvgContent(url, true)
};
try {
const clipboardItem = new ClipboardItem(data);
await navigator.clipboard.write([clipboardItem]);
} catch (error) {
// This section works as a fallback on Firefox
const content = (await getSvgContent(url, false)) as string;
await navigator.clipboard.writeText(content);
}
toast('Copied to clipboard', {
icon: '👏',
style: 'border-radius: 200px; background: #333; color: #fff;'
});
};
// Components:
import Search from '../components/search.svelte';
import Container from '../components/container.svelte';
import SvgCard from '../components/svgCard.svelte';
// Search:
let search = '';
@ -67,53 +28,11 @@
};
</script>
<div class="container mx-auto pt-4">
<input
type="text"
bind:value={search}
on:input={searchSvgs}
placeholder="Search..."
class="w-full rounded-md border border-neutral-800 bg-neutral-700/10 p-3 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-neutral-700"
/>
<Container>
<Search searchTerm={search} on:input={searchSvgs} />
<div class="mt-4 grid grid-cols-6 gap-4">
{#each filteredSvgs as svg}
<div
class="flex flex-col items-center justify-center rounded-md border border-neutral-800 bg-neutral-700/10 p-4"
>
<img src={svg.route} alt={svg.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">{svg.title}</p>
<span class="text-sm lowercase text-neutral-500">{svg.category}</span>
</div>
<div class="flex items-center space-x-1">
<button
title="Copy to clipboard"
on:click={() => {
copyToClipboard(svg.route);
}}
class="flex items-center space-x-2 rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40"
>
<Copy size={17} />
</button>
<button
title="Download"
on:click={() => {
downloadSvg(svg.route);
}}
class="flex items-center space-x-2 rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40"
>
<DownloadSimple size={17} />
</button>
<a
href={svg.url}
title="Website"
target="_blank"
class="flex items-center space-x-2 rounded-md p-2 transition-all duration-100 hover:bg-neutral-700/40"
>
<ArrowUpRight size={17} />
</a>
</div>
</div>
<SvgCard svgInfo={svg} />
{/each}
</div>
</div>
</Container>