jedmund/jedmund-svelte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: extract File and Copy icons as reusable components

Browse source 
- Create FileIcon.svelte and CopyIcon.svelte components
- Update MediaDetailsModal to use new icon components
- Maintain consistent icon sizing and styling

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Justin Edmund 2025-06-26 08:45:25 -04:00
parent df3dd1abd9
commit 6ff2818e72
3 changed files with 84 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
src/lib/components/admin/MediaDetailsModal.svelte
View file

@ -7,6 +7,8 @@
import AlbumSelector from './AlbumSelector.svelte'
import AlbumIcon from '$icons/album.svg?component'
import CloseButton from '$components/icons/CloseButton.svelte'
import FileIcon from '$components/icons/FileIcon.svelte'
import CopyIcon from '$components/icons/CopyIcon.svelte'
import { authenticatedFetch } from '$lib/admin-auth'
import { toast } from '$lib/stores/toast'
import type { Media } from '@prisma/client'
@ -237,28 +239,7 @@
</div>
{:else}
<div class="file-placeholder">
<svg
width="64"
height="64"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 2H6A2 2 0 0 0 4 4V20A2 2 0 0 0 6 22H18A2 2 0 0 0 20 20V8L14 2Z"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<polyline
points="14,2 14,8 20,8"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<FileIcon size={64} />
<span class="file-type">{getFileType(media.mimeType)}</span>
</div>
{/if}
@ -272,29 +253,7 @@
<div class="header-actions">
{#if !isSaving}
<Button variant="ghost" onclick={copyUrl} iconOnly aria-label="Copy URL">
<svg
slot="icon"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="9"
y="9"
width="13"
height="13"
rx="2"
stroke="currentColor"
stroke-width="2"
/>
<path
d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"
stroke="currentColor"
stroke-width="2"
/>
</svg>
<CopyIcon slot="icon" size={20} />
</Button>
<Button variant="ghost" onclick={handleClose} iconOnly aria-label="Close modal">
<CloseButton slot="icon" />

40
src/lib/components/icons/CopyIcon.svelte Normal file
View file

@ -0,0 +1,40 @@
<script lang="ts">
interface Props {
size?: number | string
color?: string
strokeWidth?: number
class?: string
}
let {
size = 24,
color = 'currentColor',
strokeWidth = 2,
class: className = ''
}: Props = $props()
</script>
<svg
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class={className}
aria-hidden="true"
>
<rect
x="9"
y="9"
width="13"
height="13"
rx="2"
stroke={color}
stroke-width={strokeWidth}
/>
<path
d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"
stroke={color}
stroke-width={strokeWidth}
/>
</svg>

40
src/lib/components/icons/FileIcon.svelte Normal file
View file

@ -0,0 +1,40 @@
<script lang="ts">
interface Props {
size?: number | string
color?: string
strokeWidth?: number
class?: string
}
let {
size = 24,
color = 'currentColor',
strokeWidth = 2,
class: className = ''
}: Props = $props()
</script>
<svg
width={size}
height={size}
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class={className}
aria-hidden="true"
>
<path
d="M14 2H6A2 2 0 0 0 4 4V20A2 2 0 0 0 6 22H18A2 2 0 0 0 20 20V8L14 2Z"
stroke={color}
stroke-width={strokeWidth}
stroke-linecap="round"
stroke-linejoin="round"
/>
<polyline
points="14,2 14,8 20,8"
stroke={color}
stroke-width={strokeWidth}
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>