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

import ChatButton from './ChatButton';
import { fetchCharacter } from './service';
import { Chip } from '@/components/ui/chip';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';

export default async function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const character = await fetchCharacter(id);

  return (
    <div className="flex px-4 pt-10">
      <div className="mx-auto w-full max-w-[752px]">
        <header className="flex items-end gap-10 justify-between">
          <div className="flex gap-6 items-end">
            <Avatar className="size-32">
              <AvatarImage src={character?.headPortrait} />
              <AvatarFallback>{character?.name?.slice(0, 2)}</AvatarFallback>
            </Avatar>
            <div>
              <div className="txt-headline-s">{character?.name}</div>
              <div className="flex flex-wrap mt-4 gap-2">
                {character?.tags?.map((tag: any) => (
                  <Chip className="rounded-xs" key={tag.tagId}>
                    {tag.name}
                  </Chip>
                ))}
              </div>
            </div>
          </div>
          <div>
            <ChatButton id={id}></ChatButton>
          </div>
        </header>
        <div className="mt-12 rounded-2xl bg-white/10 p-6">
          <div className="txt-headline-s">Introduction</div>
          <div className="mt-4">{character?.description}</div>
        </div>
      </div>
    </div>
  );
}