Skeleton

"use client";

import React from "react";
import {Skeleton, TextSkeleton} from "@brynlabs/fusion-ui";

export const SkeletonExample = () => (
  <div style={{display: "grid", gap: "1rem"}}>
    <div style={{display: "flex", gap: "1rem", alignItems: "center"}}>
      <div style={{width: 100, height: 100, flexShrink: 0}}>
        <Skeleton></Skeleton>
      </div>

      <div style={{display: "flex", gap: ".5rem", flexDirection: "column"}}>
        <h3 className={"heading-2-font"}>
          <TextSkeleton randomSeed={1} minLength={10} maxLength={20}></TextSkeleton>
        </h3>
        <p className={"body-font"}>
          <TextSkeleton randomSeed={2} minLength={75} maxLength={90}></TextSkeleton>
        </p>
      </div>
    </div>
    <div style={{display: "flex", gap: "1rem", alignItems: "center"}}>
      <div style={{width: 100, height: 100, flexShrink: 0}}>
        <Skeleton></Skeleton>
      </div>

      <div style={{display: "flex", gap: ".5rem", flexDirection: "column"}}>
        <h3 className={"heading-2-font"}>
          <TextSkeleton randomSeed={3} minLength={10} maxLength={20}></TextSkeleton>
        </h3>
        <p className={"body-font"}>
          <TextSkeleton randomSeed={4} minLength={75} maxLength={90}></TextSkeleton>
        </p>
      </div>
    </div>
    <div style={{display: "flex", gap: "1rem", alignItems: "center"}}>
      <div style={{width: 100, height: 100, flexShrink: 0}}>
        <Skeleton></Skeleton>
      </div>

      <div style={{display: "flex", gap: ".5rem", flexDirection: "column"}}>
        <h3 className={"heading-2-font"}>
          <TextSkeleton randomSeed={5} minLength={10} maxLength={20}></TextSkeleton>
        </h3>
        <p className={"body-font"}>
          <TextSkeleton randomSeed={6} minLength={75} maxLength={90}></TextSkeleton>
        </p>
      </div>
    </div>
  </div>
);