documenso/apps/remix/app/components/general/user-profile-skeleton.tsx

import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
import { VerifiedIcon } from '@documenso/ui/icons/verified';
import { cn } from '@documenso/ui/lib/utils';
import { Button } from '@documenso/ui/primitives/button';
import { Trans } from '@lingui/react/macro';
import { File, User2 } from 'lucide-react';

export type UserProfileSkeletonProps = {
  className?: string;
  user: {
    name: string;
    url: string;
  };
  rows?: number;
};

export const UserProfileSkeleton = ({ className, user, rows = 2 }: UserProfileSkeletonProps) => {
  const baseUrl = new URL(NEXT_PUBLIC_WEBAPP_URL() ?? 'http://localhost:3000');

  return (
    <div className={cn('flex flex-col items-center rounded-xl bg-neutral-100 p-4 dark:bg-background', className)}>
      <div className="inline-block max-w-full truncate rounded-md border border-border bg-background px-2.5 py-1.5 text-muted-foreground text-sm lowercase">
        {baseUrl.host}/u/{user.url}
      </div>

      <div className="mt-4">
        <div className="rounded-full bg-primary/10 p-1.5">
          <div className="flex h-20 w-20 items-center justify-center rounded-full border-2 bg-background">
            <User2 className="h-12 w-12 text-[hsl(228,10%,90%)]" />
          </div>
        </div>
      </div>

      <div className="mt-6">
        <div className="flex items-center justify-center gap-x-2">
          <h2 className="max-w-[12rem] truncate font-semibold text-2xl">{user.name}</h2>

          <VerifiedIcon className="h-8 w-8 text-primary" />
        </div>

        <div className="mx-auto mt-4 h-2 w-52 rounded-full bg-neutral-300 dark:bg-foreground/30" />
        <div className="mx-auto mt-2 h-2 w-36 rounded-full bg-neutral-200 dark:bg-foreground/20" />
      </div>

      <div className="mt-8 w-full">
        <div className="divide-y-2 divide-neutral-200 overflow-hidden rounded-lg border-2 border-neutral-200 dark:divide-foreground/30 dark:border-foreground/30">
          <div className="bg-neutral-50 p-4 font-medium text-muted-foreground dark:bg-foreground/20">
            <Trans>Documents</Trans>
          </div>

          {Array(rows)
            .fill(0)
            .map((_, index) => (
              <div key={index} className="flex items-center justify-between gap-x-6 bg-background p-4">
                <div className="flex items-center gap-x-2">
                  <File className="h-8 w-8 text-muted-foreground/80" strokeWidth={1.5} />

                  <div className="space-y-2">
                    <div className="h-1.5 w-24 rounded-full bg-neutral-300 md:w-36 dark:bg-foreground/30" />
                    <div className="h-1.5 w-16 rounded-full bg-neutral-200 md:w-24 dark:bg-foreground/20" />
                  </div>
                </div>

                <div className="flex-shrink-0">
                  <Button type="button" size="sm" className="pointer-events-none w-32">
                    <Trans>Sign</Trans>
                  </Button>
                </div>
              </div>
            ))}
        </div>
      </div>
    </div>
  );
};