144 lines
3.3 KiB
TypeScript
144 lines
3.3 KiB
TypeScript
import * as React from "react";
|
|
import { cva, type VariantProps } from "class-variance-authority";
|
|
|
|
import { Card } from "@/components/ui/card";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const appCardVariants = cva(
|
|
"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/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,
|
|
},
|
|
},
|
|
);
|
|
|
|
export interface AppCardProps
|
|
extends React.HTMLAttributes<HTMLDivElement>,
|
|
VariantProps<typeof appCardVariants>,
|
|
VariantProps<typeof appCardInnerVariants> {
|
|
layer?: "double" | "single";
|
|
}
|
|
|
|
const AppCard = React.forwardRef<HTMLDivElement, AppCardProps>(
|
|
({ 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";
|
|
|
|
export { AppCard, appCardVariants };
|