qyg2297248353/svgl
qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2025-04-08 01:08:12 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

🎨 Add alert UI component

Browse Source
This commit is contained in:
pheralb 2025-03-05 17:44:35 +00:00
parent 416b5257e8
commit ed61a22ab0
3 changed files with 52 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/routes/api/+page.svelte
View File

@ -42,7 +42,8 @@
'prose dark:prose-invert',
'mx-auto max-w-3xl px-4 py-10',
'prose-h2:font-medium prose-h2:tracking-tight prose-h2:underline prose-h2:decoration-neutral-300 prose-h2:underline-offset-[6px] prose-h2:transition-opacity hover:prose-h2:opacity-70 dark:prose-h2:decoration-neutral-700/65',
'prose-pre:m-0 prose-pre:border prose-pre:border-neutral-200 dark:prose-pre:border dark:prose-pre:border-neutral-800/65'
'prose-pre:m-0 prose-pre:border prose-pre:border-neutral-200 dark:prose-pre:border dark:prose-pre:border-neutral-800/65',
'prose-inline-code:rounded prose-inline-code:border prose-inline-code:border-neutral-300 prose-inline-code:bg-neutral-200/50 prose-inline-code:p-[2px] prose-inline-code:font-mono prose-inline-code:dark:border-neutral-800 prose-inline-code:dark:bg-neutral-800/50'
)}
>
<svelte:component this={data.content} />

36
src/ui/alert/alert-component.svelte Normal file
View File

@ -0,0 +1,36 @@
<script lang="ts">
import { cn } from '@/utils/cn';
import { AlertTriangleIcon, CheckCircleIcon, InfoIcon, XCircleIcon } from 'lucide-svelte';
type iAlertType = 'success' | 'error' | 'warning' | 'info';
export let type: iAlertType = 'info';
const icons = {
success: CheckCircleIcon,
error: XCircleIcon,
warning: AlertTriangleIcon,
info: InfoIcon
};
</script>
<div
class={cn(
'flex items-center space-x-3 rounded-lg border px-3 py-2 text-sm dark:border-gray-700/20 dark:text-gray-200',
type === 'success' &&
'border-emerald-600/20 bg-emerald-100/50 text-emerald-900 selection:bg-emerald-500/20 dark:border-emerald-500/30 dark:bg-emerald-500/10 dark:text-emerald-200 dark:selection:bg-emerald-500/30',
type === 'error' &&
'border-red-600/20 bg-red-100/50 text-red-900 selection:bg-red-500/20 dark:border-red-500/30 dark:bg-red-500/10 dark:text-red-200 dark:selection:bg-red-500/30',
type === 'warning' &&
'border-yellow-600/20 bg-yellow-100/50 text-yellow-900 selection:bg-yellow-500/20 dark:border-yellow-500/30 dark:bg-yellow-500/10 dark:text-yellow-200 dark:selection:bg-yellow-500/30',
type === 'info' &&
'border-blue-600/20 bg-blue-100/50 text-blue-900 selection:bg-blue-500/20 dark:border-blue-500/30 dark:bg-blue-500/10 dark:text-blue-200 dark:selection:bg-blue-500/30'
)}
>
{#if icons[type]}
<svelte:component this={icons[type]} class="flex-shrink-0" size={16} />
{/if}
<div>
<slot />
</div>
</div>

15
tailwind.config.ts
View File

@ -1,6 +1,7 @@
import type { Config } from 'tailwindcss';
// Plugins:
import plugin from 'tailwindcss/plugin';
import defaultTheme from 'tailwindcss/defaultTheme';
import twTypography from '@tailwindcss/typography';
@ -28,6 +29,12 @@ const config = {
'font-style': 'normal'
}
}
},
quoteless: {
css: {
'blockquote p:first-of-type::before': { content: 'none' },
'blockquote p:first-of-type::after': { content: 'none' }
}
}
},
colors: {
@ -51,7 +58,13 @@ const config = {
'text-wrap': 'balance'
}
});
}
},
plugin(function ({ addVariant }) {
addVariant(
'prose-inline-code',
'&.prose :where(:not(pre)>code):not(:where([class~="not-prose"] *))'
);
})
]
} satisfies Config;