SkeletonSkeleton

내용이 오기 전 자리를 회색 면으로 잡아 둡니다.Holds a place with a gray surface until content arrives.

@horon-ai/react 표시Display

Solid

Glass

tsx

import { SkeletonCard } from "@horon-ai/react";

export default function SkeletonDemo() {
  return (
    <div className="flex w-full flex-col gap-6">
      <div className="flex flex-col gap-3">
        <p className="text-caption text-text-secondary">Solid</p>
        <div className="flex w-full flex-wrap items-center justify-center gap-4">
          <SkeletonCard surface="solid" type="row" />
          <SkeletonCard surface="solid" type="card" />
        </div>
      </div>
      <div className="flex flex-col gap-3">
        <p className="text-caption text-text-secondary">Glass</p>
        <>
          <SkeletonCard surface="glass" type="row" />
          <SkeletonCard surface="glass" type="card" />
        </>
      </div>
    </div>
  );
}