Profile

import { Avatar } from '@/components/ui/Avatar';
import { IconEdit } from '@tabler/icons-react';
import Button from '@/components/ui/Button';
import Divider from '@/components/ui/Divider';
const sectionCls = 'flex justify-between flex-col w-full gap-4 px-5 sm:w-180 sm:flex-row';
export default function Page() {
  return (
    <div className="flex h-screen flex-col items-center justify-center">
      <section className={sectionCls}>
        <div className="flex items-center gap-2">
          <Avatar src="/images/avatar/avatar-01.png" size="xl" className="shrink-0" />
          <div className="text-description text-sm">
            <p className="text-foreground text-lg font-bold">Michael John</p>
            <p>Product Designer</p>
            <p className="mt-1">Springfield, Illinois, United States</p>
          </div>
        </div>
        <Button className="gap-1" colors="neutral" pill variant="bordered" size="sm">
          <IconEdit size="1.1em" />
          Edit
        </Button>
      </section>
      <Divider className="my-6 px-5 sm:w-180" />
      <section className={sectionCls}>
        <div>
          <p className="text-lg font-bold">Personal information</p>
          <div className="mt-10 grid grid-cols-2 gap-x-25 gap-y-8 sm:gap-x-60">
            <InfoItem title="First Name" content="Michael" />
            <InfoItem title="Last Name" content="John" />
            <InfoItem title="Email" content="John_123@gmail.com" />
            <InfoItem title="Phone" content="(123)-****-4567" />
            <InfoItem title="Bio" content="Product Designer" />
          </div>
        </div>
        <Button className="gap-1" colors="neutral" pill variant="bordered" size="sm">
          <IconEdit size="1.1em" />
          Edit
        </Button>
      </section>
    </div>
  );
}

function InfoItem({ title, content }: { title: string; content: string }) {
  return (
    <div className="space-y-2 text-sm">
      <p className="text-description">{title}</p>
      <p className="font-semibold whitespace-nowrap">{content}</p>
    </div>
  );
}