Skeleton

import { Skeleton } from "@nexera-ui/react";

const types = [
  "text",
  "avatar-row",
  "card",
  "table-row",
] as const satisfies readonly SkeletonType[];

export function NarrowContainer() {
  return (
    <div className="flex max-w-xs flex-col gap-6">
      {types.map((type) => (
        <Skeleton key={type} type={type} />
      ))}
    </div>
  );
}

import { useState } from "react";
import { Avatar, Skeleton } from "@nexera-ui/react";

export function LoadingRegion() {
  const [loading, setLoading] = useState(true);
  return (
    <section
      aria-labelledby="team-heading"
      aria-busy={loading}
      className="flex max-w-sm flex-col gap-3"
    >
      <div className="flex items-center justify-between gap-3">
        <h3 id="team-heading" className="text-heading-h4 text-primary m-0">
          Team
        </h3>
        <button
          type="button"
          onClick={() => {
            setLoading((value) => !value);
          }}
          className="text-body-small text-brand-text m-0 cursor-pointer appearance-none border-0 bg-transparent p-1 underline"
        >
          {loading ? "Show content" : "Show skeleton"}
        </button>
      </div>
      {loading ? (
        <>
          <Skeleton type="avatar-row" />
          <Skeleton type="avatar-row" />
        </>
      ) : (
        <ul className="m-0 flex list-none flex-col gap-3 p-0">
          {["Ayesha Khan", "Bilal Ahmed"].map((name) => (
            <li key={name} className="flex items-center gap-3">
              <Avatar isDecorative initials={name.slice(0, 1)} size="lg" />
              <span className="text-body-default text-primary">{name}</span>
            </li>
          ))}
        </ul>
      )}
    </section>
  );
}

import { Skeleton } from "@nexera-ui/react";

export function RightToLeft() {
  return (
    <div dir="rtl" lang="ar" className="flex max-w-sm flex-col gap-6">
      <Skeleton type="avatar-row" />
      <Skeleton type="table-row" />
    </div>
  );
}