ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: widgets and ai chat

Browse Source
This commit is contained in:
Rotimi Best
2026-04-27 11:40:38 +01:00
parent ae1801f85f
commit 5717dd8004
391 changed files with 28177 additions and 22467 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/custom/animation/shimmerbutton/shimmerbutton.svelte
+55 -28
View File
@@ -3,9 +3,10 @@
import type { Snippet } from 'svelte';
interface Props {
href: string;
href?: string;
target?: string;
rel?: string;
onclick?: (event: MouseEvent) => void;
shimmerColor?: string;
shimmerSize?: string;
shimmerDuration?: string;
@@ -19,6 +20,7 @@
href,
target = '',
rel = '',
onclick,
shimmerColor = '#ffffff',
shimmerSize = '0.05em',
shimmerDuration = '3s',
@@ -29,39 +31,64 @@
}: Props = $props();
</script>
<a
style:--spread="90deg"
style:--shimmer-color={shimmerColor}
style:--radius={borderRadius}
style:--speed={shimmerDuration}
style:--cut={shimmerSize}
style:--bg={background}
class={cn(
'group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden rounded-(--radius) border border-white/10 px-6 py-3 whitespace-nowrap text-white [background:var(--bg)] dark:text-white',
'transform-gpu transition-transform duration-300 ease-in-out active:translate-y-px',
className
)}
{href}
{target}
{rel}
data-rewardful
>
<div class={cn('-z-30 blur-[2px]', '@container-[size] absolute inset-0 overflow-visible')}>
<div class="animate-magicslide absolute inset-0 aspect-[1] h-[100cqh] rounded-none [mask:none]">
{#snippet shimmerContent()}
<div class={cn('ui:-z-30 ui:blur-[2px]', 'ui:@container-[size] ui:absolute ui:inset-0 ui:overflow-visible')}>
<div
class="ui:animate-magicslide ui:absolute ui:inset-0 ui:aspect-[1] ui:h-[100cqh] ui:rounded-none ui:[mask:none]"
>
<div
class="animate-spin-around absolute -inset-full w-auto [translate:0_0] rotate-0 [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))]"
class="ui:animate-spin-around ui:absolute ui:-inset-full ui:w-auto ui:[translate:0_0] ui:rotate-0 ui:[background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))]"
></div>
</div>
</div>
{@render children?.()}
<div
class={cn(
'absolute inset-0 h-full w-full',
'rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#ffffff1f]',
'transform-gpu transition-all duration-300 ease-in-out',
'group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]',
'group-active:shadow-[inset_0_-10px_10px_#ffffff3f]'
'ui:absolute ui:inset-0 ui:h-full ui:w-full',
'ui:rounded-2xl ui:px-4 ui:py-1.5 ui:text-sm ui:font-medium ui:shadow-[inset_0_-8px_10px_#ffffff1f]',
'ui:transform-gpu ui:transition-all ui:duration-300 ui:ease-in-out',
'ui:group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]',
'ui:group-active:shadow-[inset_0_-10px_10px_#ffffff3f]'
)}
></div>
<div class={cn('absolute inset-(--cut) -z-20 rounded-(--radius) [background:var(--bg)]')}></div>
</a>
<div class={cn('ui:absolute ui:inset-(--cut) ui:-z-20 ui:rounded-(--radius) ui:[background:var(--bg)]')}></div>
{/snippet}
{#if href}
<a
style:--spread="90deg"
style:--shimmer-color={shimmerColor}
style:--radius={borderRadius}
style:--speed={shimmerDuration}
style:--cut={shimmerSize}
style:--bg={background}
class={cn(
'ui:group ui:relative ui:z-0 ui:flex ui:cursor-pointer ui:items-center ui:justify-center ui:overflow-hidden ui:rounded-(--radius) ui:border ui:border-white/10 ui:px-6 ui:py-3 ui:whitespace-nowrap ui:text-white ui:[background:var(--bg)] ui:dark:text-white',
'ui:transform-gpu ui:transition-transform ui:duration-300 ui:ease-in-out ui:active:translate-y-px',
className
)}
{href}
{target}
{rel}
data-rewardful
>
{@render shimmerContent()}
</a>
{:else}
<button
style:--spread="90deg"
style:--shimmer-color={shimmerColor}
style:--radius={borderRadius}
style:--speed={shimmerDuration}
style:--cut={shimmerSize}
style:--bg={background}
class={cn(
'ui:group ui:relative ui:z-0 ui:flex ui:cursor-pointer ui:items-center ui:justify-center ui:overflow-hidden ui:rounded-(--radius) ui:border ui:border-white/10 ui:px-6 ui:py-3 ui:whitespace-nowrap ui:text-white ui:[background:var(--bg)] ui:dark:text-white',
'ui:transform-gpu ui:transition-transform ui:duration-300 ui:ease-in-out ui:active:translate-y-px',
className
)}
{onclick}
>
{@render shimmerContent()}
</button>
{/if}