visual-novel-web/src/app/(main)/character/[id]/(detail)/components/BasicInfo.tsx

'use client';
import { TagSelect, Rate } from '@/components';
import Image from 'next/image';
import { RightArrowIcon } from '@/assets/chatacter';
import { ReportIcon } from '@/assets/common';
import { useParams, useRouter } from 'next/navigation';

export default function CharacterBasicInfo() {
  const router = useRouter();
  const { id } = useParams();
  return (
    <div className="flex w-full">
      <Image
        src="/test.png"
        alt="character-basic-info"
        width={338}
        height={600}
      />
      <div className="w-full pt-5">
        <div className="flex items-center justify-between">
          <span className="text-text-color text-4xl">Maeve o'connell</span>
          <div>
            <ReportIcon />
          </div>
        </div>
        <div className="text-text-color/60 mt-4 flex items-center gap-2">
          <div
            style={{ backgroundColor: 'rgba(255, 102, 0, 1)' }}
            className="text-text-color inline-flex h-4 w-4 justify-center rounded-md text-xs"
          >
            ID
          </div>
          <div>user123456</div>
          <div
            style={{ background: 'rgba(255, 255, 255, 0.2)' }}
            className="h-2 w-0.25"
          ></div>
          <div>18</div>
          <div
            style={{ background: 'rgba(255, 255, 255, 0.2)' }}
            className="h-2 w-0.25"
          ></div>
          <div>The Male Lead</div>
        </div>
        {/* 角色评分 */}
        <Rate className="mt-8" value={7} readonly />
        {/* 角色TAG */}
        <TagSelect
          className="mt-10"
          readonly
          options={[
            { label: 'tag1', value: 'tag1' },
            {
              label: 'tag2',
              value: 'tag2',
            },
          ]}
        />
        {/* divider */}
        <div className="bg-text-color/10 mt-10 h-0.25 w-full"></div>

        {/* description */}
        <div className="mt-10.5">
          <div className="flex">
            <Image
              src={'/character/desc.svg'}
              alt="description"
              className="mr-1"
              width={18}
              height={20}
            />
            Description:
          </div>
          <div className="text-text-color/60 mt-5 text-sm">
            {
              'description text description textdescription textdescription textdescription textdescription textdescription textdescription text'
            }
          </div>
        </div>

        {/* from and chat */}
        <div className="flex items-center justify-between gap-10 pt-5">
          {/* FROM  */}
          <div className="bg-text-color/5 flex h-15 items-center justify-between rounded-lg pr-5">
            <div className="flex items-center">
              <Image
                src="/images/character/from.png"
                alt="from"
                className="rounded-lg"
                width={45}
                height={60}
              />
              <div className="text-text-color/80 max-w-110 pr-2 text-sm">
                <span style={{ color: 'rgb(0, 102, 255' }}>Form:</span>
                {" The CEO's Contract Wife"}
              </div>
            </div>
            <RightArrowIcon />
          </div>

          {/* Chat Button */}
          <div
            onClick={() => router.push(`/character/${id}/chat`)}
            className="inline-flex h-12.5 w-75 items-center justify-center gap-3 rounded-full hover:cursor-pointer"
            style={{
              background: `linear-gradient(92.76deg,rgba(166, 83, 255, 1) 0%,rgba(0, 101, 255, 1) 80%,rgba(0, 157, 255, 1) 100%)`,
            }}
          >
            <Image
              src={'/component/send.svg'}
              alt="chat"
              width={20}
              height={20}
            />
            Chat Now
          </div>
        </div>
      </div>
    </div>
  );
}