Tailwind Skeleton Generatorを使ってスケルトンローダーを作成してみました

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Twitter, Instagram, Linkedin } from 'lucide-react'

export default function UserProfile({
  name = "佐藤 花子",
  job = "ウェブデベロッパー",
  followers = 1234,
  following = 567,
  bio = "Next.jsとReactが大好きなウェブデベロッパーです。新しい技術を学ぶのが趣味で、休日はオープンソースプロジェクトにコントリビュートしています。",
  avatarUrl = "/placeholder.svg?height=100&width=100"
}) {
  return (
    <Card className="w-full max-w-md mx-auto">
      <CardHeader className="flex flex-col items-center space-y-4">
        <Avatar className="w-24 h-24">
          <AvatarImage src={avatarUrl} alt={name} />
          <AvatarFallback>{name.slice(0, 2)}</AvatarFallback>
        </Avatar>
        <div className="text-center">
          <h2 className="text-2xl font-bold">{name}</h2>
          <p className="text-muted-foreground">{job}</p>
        </div>
      </CardHeader>
      <CardContent className="text-center space-y-4">
        <div className="flex justify-center space-x-4">
          <div>
            <p className="font-semibold">{followers.toLocaleString()}</p>
            <p className="text-sm text-muted-foreground">フォロワー</p>
          </div>
          <div>
            <p className="font-semibold">{following.toLocaleString()}</p>
            <p className="text-sm text-muted-foreground">フォロー中</p>
          </div>
        </div>
        <p className="text-sm">{bio}</p>
      </CardContent>
      <CardFooter className="flex justify-center space-x-4">
        <Button variant="ghost" size="icon" aria-label="Twitterプロフィール">
          <Twitter className="h-5 w-5" />
        </Button>
        <Button variant="ghost" size="icon" aria-label="Instagramプロフィール">
          <Instagram className="h-5 w-5" />
        </Button>
        <Button variant="ghost" size="icon" aria-label="LinkedInプロフィール">
          <Linkedin className="h-5 w-5" />
        </Button>
      </CardFooter>
    </Card>
  )
}