Peter Meier
d327798ce6
- Introduced `class-variance-authority` to manage card component styles, allowing for flexible variant and layout options. - Added a new color palette for "Fire" to the CSS for improved theming. - Updated `Card` and `PostCard` components to utilize the new styling system, enhancing visual consistency and responsiveness. - Refined layout and styling in various components for better user experience.
90 lines
2.3 KiB
Svelte
90 lines
2.3 KiB
Svelte
<script lang="ts">
|
||
import type { Snippet } from "svelte";
|
||
import { cva, type VariantProps } from "class-variance-authority";
|
||
|
||
/**
|
||
* tile + stack/inline: Org-Karten (Padding im Shell).
|
||
* tile + post: PostCard – Shell ohne Padding, Medien bündig, Text mit p-4 im Kind.
|
||
* callout: CTA; layout wird ignoriert.
|
||
*/
|
||
const cardSurface = cva("relative min-w-0 overflow-hidden", {
|
||
variants: {
|
||
variant: {
|
||
tile: "",
|
||
callout:
|
||
"flex flex-col gap-1.5 border border-dashed border-wald-300 bg-wald-50 p-3",
|
||
},
|
||
layout: {
|
||
stack: "",
|
||
inline: "",
|
||
post: "",
|
||
},
|
||
},
|
||
compoundVariants: [
|
||
{
|
||
variant: "tile",
|
||
layout: "stack",
|
||
class:
|
||
"flex flex-col gap-2 border border-gray-200 bg-white p-4 text-slate-950",
|
||
},
|
||
{
|
||
variant: "tile",
|
||
layout: "inline",
|
||
class:
|
||
"flex flex-row items-start gap-3 border border-gray-200 bg-white p-4 text-slate-950",
|
||
},
|
||
{
|
||
variant: "tile",
|
||
layout: "post",
|
||
class:
|
||
"flex flex-col gap-0 border border-gray-200 bg-white p-0 text-slate-950",
|
||
},
|
||
],
|
||
defaultVariants: { variant: "tile", layout: "stack" },
|
||
});
|
||
|
||
const cardAsLink = cva("", {
|
||
variants: {
|
||
variant: {
|
||
callout: "cursor-pointer transition-all no-underline text-inherit",
|
||
tile: "transition-all no-underline hover:border-gray-300",
|
||
},
|
||
},
|
||
defaultVariants: { variant: "tile" },
|
||
});
|
||
|
||
type SurfaceProps = VariantProps<typeof cardSurface>;
|
||
type CardLinkVariant = NonNullable<SurfaceProps["variant"]>;
|
||
|
||
let {
|
||
children,
|
||
href,
|
||
target,
|
||
rel,
|
||
variant = "tile",
|
||
layout = "stack",
|
||
class: className = "",
|
||
}: {
|
||
children?: Snippet;
|
||
href?: string;
|
||
target?: string;
|
||
rel?: string;
|
||
class?: string;
|
||
} & SurfaceProps = $props();
|
||
|
||
const surface = $derived(cardSurface({ variant, layout }));
|
||
const linkSurface = $derived(
|
||
href ? cardAsLink({ variant: (variant ?? "tile") as CardLinkVariant }) : "",
|
||
);
|
||
</script>
|
||
|
||
{#if href}
|
||
<a {href} {target} {rel} class="{surface} {linkSurface} {className}">
|
||
{@render children?.()}
|
||
</a>
|
||
{:else}
|
||
<div class="{surface} {className}">
|
||
{@render children?.()}
|
||
</div>
|
||
{/if}
|