Rotimi Bestandemmanuel
3ee7cf10e3
* chore: remove bin * fix: restore bin * change dist to bin * publish only dist folder * publish with src folder. * fix ci * merge steps in CI * update workflow * deploy with src * update to v9 * delete unused code * complete landing page * complete landing page * feat: webflow template (#518) * created a new branch for webflow from debug/course-app * added webflow and reverted neccessary changes * fixed commit issues * clean up posthog * clean up classic * clean up minimal * clean up posthog * clean up webflow * v0.0.10 * markdown lint * feat: add prep template (#522) * working on the ielts template * working on the ielts template * finished the ielts template --------- Co-authored-by: emmanuel <chifez1@gmail.com> * clean up examprep * v0.0.11 --------- Co-authored-by: Em_Dev <Chifez1@gmail.com>
67 lines
2.1 KiB
Svelte
67 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import { cn } from '$lib/utils';
|
|
|
|
export let href: string;
|
|
export let target: string = '';
|
|
export let rel: string = '';
|
|
export let shimmerColor = '#ffffff';
|
|
export let shimmerSize = '0.05em';
|
|
export let shimmerDuration = '3s';
|
|
export let borderRadius = '100px';
|
|
export let background = 'rgba(0, 0, 0, 1)';
|
|
let className: any = '';
|
|
export { className as class };
|
|
</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 whitespace-nowrap border border-white/10 px-6 py-3 text-white [background:var(--bg)] [border-radius:var(--radius)] dark:text-white',
|
|
'transform-gpu transition-transform duration-300 ease-in-out active:translate-y-[1px]',
|
|
className
|
|
)}
|
|
{href}
|
|
{target}
|
|
{rel}
|
|
>
|
|
<div class={cn('-z-30 blur-[2px]', 'absolute inset-0 overflow-visible [container-type:size]')}>
|
|
<div
|
|
class="animate-magicslide absolute inset-0 h-[100cqh] [aspect-ratio:1] [border-radius:0] [mask:none]"
|
|
>
|
|
<!-- spark before -->
|
|
<div
|
|
class="animate-spin-around absolute inset-[-100%] w-auto rotate-0 [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))] [translate:0_0]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<slot>Shimmer Button</slot>
|
|
<!-- Highlight -->
|
|
<div
|
|
class={cn(
|
|
'insert-0 absolute h-full w-full',
|
|
|
|
'rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#ffffff1f]',
|
|
|
|
// transition
|
|
'transform-gpu transition-all duration-300 ease-in-out',
|
|
|
|
// on hover
|
|
'group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]',
|
|
|
|
// on click
|
|
'group-active:shadow-[inset_0_-10px_10px_#ffffff3f]'
|
|
)}
|
|
></div>
|
|
<!-- backdrop -->
|
|
<div
|
|
class={cn(
|
|
'absolute -z-20 [background:var(--bg)] [border-radius:var(--radius)] [inset:var(--cut)]'
|
|
)}
|
|
></div>
|
|
</a>
|