sass-mohfarawati/components/ui/app-card.tsx

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/80 bg-surface-2",
        2: "border-border/80 bg-surface-2",
        3: "border-border/80 bg-surface-2",
        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";
  /**
   * Classes applied to the element that directly wraps `children` (the inner
   * shell in `double` layer, the single shell in `single` layer). Use it for
   * content utilities such as `space-y-*` / `grid` / `flex` so they keep
   * working after switching a card to the layered (double) look, where
   * `className` lands on the outer shell instead.
   */
  contentClassName?: string;
}

const AppCard = React.forwardRef<HTMLDivElement, AppCardProps>(
  (
    { className, contentClassName, level, padding, interactive, layer = "double", children, ...props },
    ref,
  ) => {
    if (layer === "single") {
      return (
        <Card
          ref={ref}
          className={cn(
            appCardSingleLayerVariants({
              level,
              padding,
              interactive,
            }),
            className,
            contentClassName,
          )}
          {...props}
        >
          {children}
        </Card>
      );
    }

    return (
      <Card
        ref={ref}
        className={cn(
          appCardVariants({
            level,
            interactive,
          }),
          className,
        )}
        {...props}
      >
        <div
          className={cn(
            appCardInnerVariants({
              level,
              padding,
              interactive,
            }),
            contentClassName,
          )}
        >
          {children}
        </div>
      </Card>
    );
  },
);

AppCard.displayName = "AppCard";

export { AppCard, appCardVariants };