crush-level-web/src/app/(main)/character/[id]/page.tsx

import { Button } from '@/components/ui/button';
import { AvatarImage, AvatarFallback, Avatar } from '@radix-ui/react-avatar';
import Link from 'next/link';

export default async function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const user = {
    name: 'Honey Snow',
    headImage: 'https://picsum.photos/200/300',
    nickname: 'Crush',
  };

  return (
    <div className="flex px-4 pt-10">
      <div className="mx-auto w-full max-w-[752px]">
        <header className="flex items-end justify-between">
          <div className="flex gap-6 items-end">
            <Avatar className="size-32 rounded-full overflow-hidden cursor-pointer">
              <AvatarImage className="h-32 w-32 object-cover" src={user?.headImage} />
              <AvatarFallback className="!txt-headline-m">
                {user?.nickname?.slice(0, 1)}
              </AvatarFallback>
            </Avatar>
            <div>
              <div className="txt-headline-s">{user?.name}</div>
              <div className="text-sm mt-4 text-text-300">{user?.nickname}</div>
            </div>
          </div>
          <div>
            <Link href={`/character/${id}/chat`}>
              <Button variant="primary">Chat</Button>
            </Link>
          </div>
        </header>
        <div className="mt-12 rounded-2xl bg-white/10 p-6">
          <div className="txt-headline-s">Introduction</div>
          <div>
            She is a new and beautiful teacher and has just graduated. You are the most rebellious
            student of the whole school workers. She is a new and beautiful teacher and has just
            graduated. You are the most rebellious student of the whole school workers. In...
          </div>
        </div>
      </div>
    </div>
  );
}