Refine global card system
This commit is contained in:
MOH
+107
-23
@@ -5,29 +5,78 @@ import { Card } from "@/components/ui/card";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const appCardVariants = cva(
|
||||
"rounded-surface transition-colors",
|
||||
"rounded-surface border p-2.5 transition-colors",
|
||||
{
|
||||
variants: {
|
||||
level: {
|
||||
1: "border-border/80 bg-surface-2 text-card-foreground shadow-card",
|
||||
2: "border-border/80 bg-surface-2 text-foreground shadow-xs",
|
||||
3: "border-border/80 bg-surface-2 text-foreground shadow-panel",
|
||||
inverse: "border-transparent bg-foreground/92 text-background shadow-card",
|
||||
},
|
||||
interactive: {
|
||||
true: "hover:bg-accent/30 hover:text-accent-foreground",
|
||||
false: "",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
level: 1,
|
||||
interactive: false,
|
||||
},
|
||||
});
|
||||
|
||||
const appCardInnerVariants = cva(
|
||||
"h-full rounded-nested border p-4 transition-colors",
|
||||
{
|
||||
variants: {
|
||||
level: {
|
||||
1: "border-border/70 bg-background dark:bg-surface-1",
|
||||
2: "border-border/70 bg-background dark:bg-surface-1",
|
||||
3: "border-border/70 bg-background dark:bg-surface-1",
|
||||
inverse: "border border-background/10 bg-background/10 text-inherit",
|
||||
},
|
||||
padding: {
|
||||
none: "p-0",
|
||||
sm: "p-4",
|
||||
md: "p-6",
|
||||
lg: "p-8",
|
||||
},
|
||||
interactive: {
|
||||
true: "hover:bg-accent/40 hover:text-accent-foreground",
|
||||
false: "",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
level: 1,
|
||||
padding: "sm",
|
||||
interactive: false,
|
||||
},
|
||||
});
|
||||
|
||||
const appCardSingleLayerVariants = cva(
|
||||
"rounded-nested border transition-colors",
|
||||
{
|
||||
variants: {
|
||||
level: {
|
||||
1: "border border-border/80 bg-card text-card-foreground shadow-card",
|
||||
2: "border border-input bg-background text-foreground shadow-xs",
|
||||
3: "border border-border/80 bg-surface-2 text-foreground shadow-panel",
|
||||
inverse: "border-transparent bg-foreground text-background shadow-card",
|
||||
1: "border-border/70 bg-background dark:bg-surface-1",
|
||||
2: "border-border/70 bg-background dark:bg-surface-1",
|
||||
3: "border-border/70 bg-background dark:bg-surface-1",
|
||||
inverse: "border border-background/10 bg-background/10 text-inherit",
|
||||
},
|
||||
padding: {
|
||||
none: "",
|
||||
none: "p-0",
|
||||
sm: "p-4",
|
||||
md: "p-6",
|
||||
lg: "p-8",
|
||||
},
|
||||
interactive: {
|
||||
true: "hover:bg-accent/30 hover:text-accent-foreground",
|
||||
true: "hover:bg-accent/40 hover:text-accent-foreground",
|
||||
false: "",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
level: 1,
|
||||
padding: "none",
|
||||
padding: "sm",
|
||||
interactive: false,
|
||||
},
|
||||
},
|
||||
@@ -35,23 +84,58 @@ const appCardVariants = cva(
|
||||
|
||||
export interface AppCardProps
|
||||
extends React.HTMLAttributes<HTMLDivElement>,
|
||||
VariantProps<typeof appCardVariants> {}
|
||||
VariantProps<typeof appCardVariants>,
|
||||
VariantProps<typeof appCardInnerVariants> {
|
||||
layer?: "double" | "single";
|
||||
}
|
||||
|
||||
const AppCard = React.forwardRef<HTMLDivElement, AppCardProps>(
|
||||
({ className, level, padding, interactive, ...props }, ref) => (
|
||||
<Card
|
||||
ref={ref}
|
||||
className={cn(
|
||||
appCardVariants({
|
||||
level,
|
||||
padding,
|
||||
interactive,
|
||||
}),
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
({ className, level, padding, interactive, layer = "double", children, ...props }, ref) => {
|
||||
if (layer === "single") {
|
||||
return (
|
||||
<Card
|
||||
ref={ref}
|
||||
className={cn(
|
||||
appCardSingleLayerVariants({
|
||||
level,
|
||||
padding,
|
||||
interactive,
|
||||
}),
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card
|
||||
ref={ref}
|
||||
className={cn(
|
||||
appCardVariants({
|
||||
level,
|
||||
interactive,
|
||||
}),
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
appCardInnerVariants({
|
||||
level,
|
||||
padding,
|
||||
interactive,
|
||||
}),
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
AppCard.displayName = "AppCard";
|
||||
|
||||
@@ -78,6 +78,8 @@ export function UiKitShowcase({ localeKey }: UiKitShowcaseProps) {
|
||||
nestedContent: "Verschachtelte Inhalte nutzen den zweiten Radius und eine weichere Oberflaeche.",
|
||||
nestedSurface: "Verschachtelte Ebene",
|
||||
nestedSurfaceText: "Mehr Tiefe ohne einen neuen Component Stil zu erfinden.",
|
||||
singleLayerCard: "Single Layer Card",
|
||||
singleLayerCardText: "Fuer kompakte Kennzahlen und kleine Infobloecke ohne zweite innere Schale.",
|
||||
interactiveOuterCard: "Interaktive aeussere Card",
|
||||
hoverText: "Das Hover Verhalten bleibt an dieselbe Oberflaechenebene gebunden.",
|
||||
inverseOuterCard: "Inverse aeussere Card",
|
||||
@@ -175,6 +177,8 @@ export function UiKitShowcase({ localeKey }: UiKitShowcaseProps) {
|
||||
nestedContent: "Nested content uses the secondary radius and a softer surface.",
|
||||
nestedSurface: "Nested surface",
|
||||
nestedSurfaceText: "Deeper emphasis without inventing a new component style.",
|
||||
singleLayerCard: "Single layer card",
|
||||
singleLayerCardText: "For compact metrics and small info blocks without a second inner shell.",
|
||||
interactiveOuterCard: "Interactive outer card",
|
||||
hoverText: "Hover behavior stays attached to the same surface level.",
|
||||
inverseOuterCard: "Inverse outer card",
|
||||
@@ -298,7 +302,19 @@ export function UiKitShowcase({ localeKey }: UiKitShowcaseProps) {
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
|
||||
<div className="grid gap-4">
|
||||
<div className="grid gap-4 lg:grid-cols-2">
|
||||
<AppCard level={1} layer="single">
|
||||
<CardContent className="space-y-3 p-5">
|
||||
<p className="text-sm font-medium text-muted-foreground">{copy.singleLayerCard}</p>
|
||||
<p className="text-3xl font-semibold tracking-[-0.05em] text-foreground">06+</p>
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.14em] text-foreground/58">
|
||||
{copy.surfaceLevel}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{copy.singleLayerCardText}
|
||||
</p>
|
||||
</CardContent>
|
||||
</AppCard>
|
||||
<AppCard level={1} interactive>
|
||||
<CardContent className="p-5">
|
||||
<p className="text-sm font-medium text-muted-foreground">{copy.interactiveOuterCard}</p>
|
||||
|
||||
Reference in New Issue
Block a user