Profile

import { Avatar } from '@/components/ui/Avatar';
import Badge from '@/components/ui/Badge';
import Tag from '@/components/ui/Tag';
import Button from '@/components/ui/Button';
export default function Page() {
  return (
    <div className="flex h-screen items-center justify-center">
      <div className="relative sm:w-120">
        <div className="p-4">
          <Badge asDot placement="bottom-right" className="bg-secondary size-4">
            <Avatar bordered size="xl" src="/images/avatar-01.png" className="" />
          </Badge>
          <p className="mt-5 text-xl font-bold">Ethan Carter</p>
          <div className="mt-4 flex gap-2">
            <Tag bordered colors="neutral">
              UI Design
            </Tag>
            <Tag bordered colors="neutral">
              Product Manager
            </Tag>
          </div>
          <div className="mt-4 flex gap-4">
            <li className="flex list-none flex-col">
              <span className="text-lg font-bold">214</span>
              <span className="text-description text-sm">Posts</span>
            </li>
            <li className="flex list-none flex-col">
              <span className="text-lg font-bold">2,123</span>
              <span className="text-description text-sm">Followers</span>
            </li>
            <li className="flex list-none flex-col">
              <span className="text-lg font-bold">451</span>
              <span className="text-description text-sm">Following</span>
            </li>
            <li className="flex list-none flex-col">
              <span className="text-lg font-bold">23</span>
              <span className="text-description text-sm">Projects</span>
            </li>
          </div>
          <div className="mt-6 flex gap-3">
            <Button colors="neutral" variant="bordered">
              Send Message
            </Button>
            <Button colors="primary">Follow</Button>
          </div>
        </div>
      </div>
    </div>
  );
}

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-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>
  );
}