SteamWar/Website
8
0
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
Chaoscaot
2024-11-24 22:57:21 +01:00
parent bbf13cf203
commit 72933a46d1
48 changed files with 752 additions and 450 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/Card.svelte
View File

@ -21,8 +21,7 @@
import {twMerge} from "tailwind-merge";
import {onMount} from "svelte";
let cardElement: HTMLDivElement;
export let hoverEffect: boolean = true;
let cardElement: HTMLDivElement = $state();
function rotateElement(event: MouseEvent) {
if(!hoverEffect) return;
@ -46,12 +45,18 @@
cardElement.style.setProperty('--rotate-y', "0");
}
export let extraClasses: string = '';
$: classes = twMerge("w-72 border-2 bg-zinc-50 border-gray-100 flex flex-col items-center p-8 m-4 rounded-xl shadow-lg dark:bg-zinc-900 dark:border-gray-800 dark:text-gray-100", extraClasses)
interface Props {
hoverEffect?: boolean;
extraClasses?: string;
children?: import('svelte').Snippet;
}
let { hoverEffect = true, extraClasses = '', children }: Props = $props();
let classes = $derived(twMerge("w-72 border-2 bg-zinc-50 border-gray-100 flex flex-col items-center p-8 m-4 rounded-xl shadow-lg dark:bg-zinc-900 dark:border-gray-800 dark:text-gray-100", extraClasses))
</script>
<div class={classes} bind:this={cardElement} on:mousemove={rotateElement} on:mouseleave={resetElement} class:hoverEffect>
<slot></slot>
<div class={classes} bind:this={cardElement} onmousemove={rotateElement} onmouseleave={resetElement} class:hoverEffect>
{@render children?.()}
</div>
<style lang="scss">