Skeleton

1
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
2
import type { ValidComponent } from "solid-js";
3

4
import { splitProps } from "solid-js";
5
import * as SkeletonPrimitive from "@kobalte/core/skeleton";
6

7
import { cn } from "~/lib/utils";
8

9
type SkeletonRootProps<T extends ValidComponent = "div"> =
10
  SkeletonPrimitive.SkeletonRootProps<T> & { class?: string | undefined };
11

12
const Skeleton = <T extends ValidComponent = "div">(
13
  props: PolymorphicProps<T, SkeletonRootProps<T>>,
14
) => {
15
  const [local, others] = splitProps(props as SkeletonRootProps, ["class"]);
16
  return (
17
    <SkeletonPrimitive.Root
18
      data-slot="skeleton"
19
      class={cn(
20
        "bg-primary/20 data-[animate='true']:animate-pulse",
21
        local.class,
22
      )}
23
      {...others}
24
    />
25
  );
26
};
27

28
export { Skeleton };