Profile

import Card from '@/components/ui/Card'
import Avatar from '@/components/ui/Avatar'
import Button from '@/components/ui/Button'
import {
    PiCheckCircleFill,
    PiChatCircleDots,
    PiEnvelopeSimple,
    PiPhone,
} from 'react-icons/pi'

const assetBase = 'https://statics.nateui.com/img'

const attributes = [
    { label: 'Role', value: 'Admin' },
    { label: 'Team', value: 'Product' },
]

const quickActions = [
    {
        label: 'Email Nadia Okafor',
        icon: <PiEnvelopeSimple />,
    },
    {
        label: 'Message Nadia Okafor',
        icon: <PiChatCircleDots />,
    },
    {
        label: 'Call Nadia Okafor',
        icon: <PiPhone />,
    },
]

export default function StaffContactCard() {
    return (
        <Card bodyClass="px-4 py-8" className="w-full">
            <div className="flex flex-col items-center text-center">
                <span className="relative inline-flex">
                    <Avatar
                        src={`${assetBase}/avatars/thumb-2.jpg`}
                        alt="Nadia Okafor"
                        size={96}
                    />
                    <span className="absolute top-1 right-1 flex items-center justify-center rounded-full bg-card text-success ring-2 ring-card">
                        <PiCheckCircleFill className="text-xl" aria-hidden="true" />
                    </span>
                </span>

                <h5 className="mt-4 text-xl font-semibold text-card-foreground">
                    Nadia Okafor
                </h5>
                <p className="mt-1 text-muted-foreground">nadia@example.com</p>
            </div>

            <div className="mt-6 grid grid-cols-2 divide-x">
                {attributes.map((attribute) => (
                    <div
                        key={attribute.label}
                        className="flex flex-col items-center gap-1 px-2"
                    >
                        <span className="text-xs text-muted-foreground">
                            {attribute.label}
                        </span>
                        <span className="font-medium text-card-foreground">
                            {attribute.value}
                        </span>
                    </div>
                ))}
            </div>

            <div className="mt-8 flex items-center justify-center gap-4">
                {quickActions.map((action) => (
                    <Button
                        key={action.label}
                        shape="circle"
                        icon={action.icon}
                        aria-label={action.label}
                    />
                ))}
            </div>
        </Card>
    )
}

import Card from '@/components/ui/Card'
import Avatar from '@/components/ui/Avatar'
import Button from '@/components/ui/Button'
import {
    PiPencilSimple,
    PiMapPin,
    PiEnvelopeSimple,
    PiCalendarBlank,
    PiPhone,
    PiDribbbleLogo,
    PiXLogo,
    PiFigmaLogo,
} from 'react-icons/pi'

const assetBase = 'https://statics.nateui.com/img'

const socialLinks = [
    { id: 'dribbble', label: 'Dribbble', href: '#', icon: <PiDribbbleLogo /> },
    { id: 'x', label: 'X', href: '#', icon: <PiXLogo /> },
    { id: 'figma', label: 'Figma', href: '#', icon: <PiFigmaLogo /> },
]

export default function ProfileCoverCard() {
    return (
        <Card bodyClass="p-0" className="w-full overflow-hidden">
            <div className="relative h-32 sm:h-40">
                <img
                    src={`${assetBase}/thumbs/misc/img-12.png`}
                    alt=""
                    className="h-full w-full object-cover"
                />
                <Button
                    variant="subtle"
                    shape="circle"
                    size="sm"
                    icon={<PiPencilSimple />}
                    aria-label="Edit profile"
                    className="absolute top-3 right-3"
                />
                <div className="absolute -bottom-10 left-4 rounded-full bg-card p-1">
                    <Avatar
                        src={`${assetBase}/avatars/thumb-3.jpg`}
                        alt="Sofia Marsh"
                        size={80}
                    />
                </div>
            </div>

            <div className="px-4 pt-12 pb-4 sm:px-6">
                <div className="min-w-0">
                    <div className="truncate text-xl font-semibold text-card-foreground">Sofia Marsh</div>
                    <div className="mt-1 truncate">
                        Brand Strategist | Creative Director
                    </div>
                    <div className="mt-2 flex items-center gap-1.5">
                        <PiMapPin className="shrink-0 text-base text-muted-foreground" aria-hidden="true" />
                        <span className="min-w-0 truncate">Austin, Texas, United States</span>
                    </div>
                </div>

                <p className="mt-4 leading-relaxed text-muted-foreground">
                    Sofia leads brand storytelling for cross-functional product teams, translating
                    research into campaigns that stay consistent across every channel. Recent work
                    spans packaging refreshes, launch campaigns, and a content system now used
                    across four regional teams.
                </p>

                <div className="mt-4 space-y-2">
                    <div className="flex items-center gap-2 text-sm text-card-foreground">
                        <PiEnvelopeSimple className="shrink-0 text-base text-muted-foreground" aria-hidden="true" />
                        <span className="min-w-0 truncate">sofia@example.com</span>
                    </div>
                    <div className="flex items-center gap-2 text-sm text-card-foreground">
                        <PiCalendarBlank className="shrink-0 text-base text-muted-foreground" aria-hidden="true" />
                        <span className="min-w-0 truncate">22 Sep 1991</span>
                    </div>
                    <div className="flex items-center gap-2 text-sm text-card-foreground">
                        <PiPhone className="shrink-0 text-base text-muted-foreground" aria-hidden="true" />
                        <span className="min-w-0 truncate">(512) 555-0148</span>
                    </div>
                </div>

                <div className="mt-4 flex flex-wrap items-center justify-between gap-2">
                    <span className="text-xs text-muted-foreground">Joined on 04 Aug 2024</span>
                    <div className="flex items-center gap-2">
                        {socialLinks.map((link) => (
                            <Button
                                key={link.id}
                                asElement="a"
                                href={link.href}
                                variant="ghost"
                                shape="circle"
                                size="sm"
                                icon={link.icon}
                                aria-label={link.label}
                            />
                        ))}
                    </div>
                </div>
            </div>
        </Card>
    )
}

import Card from '@/components/ui/Card'
import Avatar from '@/components/ui/Avatar'
import Button from '@/components/ui/Button'
import { PiBookmarkSimple, PiMedalFill, PiStarFill } from 'react-icons/pi'

const assetBase = 'https://statics.nateui.com/img'

const skills = [
    'App Design',
    'Web Design',
    'Figma',
    'Prototyping',
    'User Research',
    'Design Systems',
    'Motion Design',
]
const visibleSkills = skills.slice(0, 3)
const hiddenSkillCount = skills.length - visibleSkills.length

const stats = [
    { label: 'Rating', value: '4.8', icon: <PiStarFill className="text-sm" aria-hidden="true" /> },
    { label: 'Clients', value: '60+', icon: <PiMedalFill className="text-sm" aria-hidden="true" /> },
    { label: 'Rate', value: '$72/hr', icon: null },
]

export default function TalentProfileCard() {
    return (
        <Card bodyClass="p-2" className="w-full">
            <div className="relative h-32 sm:h-40 rounded-card">
                <img
                    src={`${assetBase}/thumbs/misc/img-13.png`}
                    alt=""
                    className="h-full w-full object-cover rounded-card"
                />
                <Button
                    variant="subtle"
                    shape="circle"
                    size="sm"
                    icon={<PiBookmarkSimple />}
                    aria-label="Save profile"
                    className="absolute top-2 right-2"
                />

                <div className="absolute -bottom-10 left-4 rounded-full bg-card p-1">
                    <span className="relative inline-flex">
                        <Avatar
                            src={`${assetBase}/avatars/thumb-15.jpg`}
                            alt="Milo Andrade"
                            size={80}
                        />
                        <span className="absolute right-0.5 bottom-0.5 h-3.5 w-3.5 rounded-full bg-success ring-2 ring-card" />
                    </span>
                </div>
            </div>

            <div className="px-4 pt-12 pb-4">
                <div className="flex items-start justify-between gap-3">
                    <div className="min-w-0">
                        <div className="truncate text-xl font-semibold text-card-foreground">
                            Milo Andrade
                        </div>
                        <div className="mt-1 truncate text-muted-foreground">
                            UI/UX Designer
                        </div>
                    </div>
                </div>

                <div className="mt-4 flex flex-wrap items-center gap-2">
                    {visibleSkills.map((skill) => (
                        <span
                            key={skill}
                            className="rounded-full bg-muted px-3 py-1.5 font-medium text-foreground"
                        >
                            {skill}
                        </span>
                    ))}
                    {hiddenSkillCount > 0 && (
                        <span className="rounded-full bg-muted px-3 py-1.5 font-medium text-foreground">
                            +{hiddenSkillCount}
                        </span>
                    )}
                </div>

                <div className="mt-4 grid grid-cols-3 divide-x">
                    {stats.map((stat) => (
                        <div
                            key={stat.label}
                            className="flex flex-col items-center gap-0.5 px-2 text-center"
                        >
                            <span className="flex items-center gap-1 text-base font-semibold text-card-foreground">
                                {stat.icon}
                                {stat.value}
                            </span>
                            <span className="text-xs text-muted-foreground">{stat.label}</span>
                        </div>
                    ))}
                </div>

                <div className="mt-4">
                    <Button
                        variant="solid"
                        shape="circle"
                        block
                    >
                        Get in touch
                    </Button>
                </div>
            </div>
        </Card>
    )
}

import { useState } from 'react'
import Card from '@/components/ui/Card'
import Avatar from '@/components/ui/Avatar'
import Dropdown from '@/components/ui/Dropdown'
import Button from '@/components/ui/Button'
import InfoBar from '@/components/composites/InfoBar'
import {
    PiAt,
    PiTwitterLogo,
    PiLinkedinLogo,
    PiCaretDown,
} from 'react-icons/pi'

const assetBase = 'https://statics.nateui.com/img'

const contactTypeOptions = ['Executive Sponsor', 'Board Member', 'Advisor', 'Investor']

const positions = [
    { id: '1', role: 'Board Member', company: 'Fennwick Robotics (YC S21)', period: 'Mar 2022 to Present' },
    { id: '2', role: 'Advisor', company: 'Highline Metrics', period: 'Mar 2022 to Present' },
    { id: '3', role: 'Board Member', company: 'Cascade Freight', period: 'Jun 2019 to Nov 2022' },
]

export default function ContactOverviewCard() {
    const [contactType, setContactType] = useState(contactTypeOptions[0])

    return (
        <Card className="relative w-full">
            <Avatar
                src={`${assetBase}/avatars/thumb-20.jpg`}
                alt="Renata Ibarra"
                size={64}
            />

            <div className="mt-4 text-xl font-semibold text-card-foreground">Renata Ibarra</div>

            <div className="mt-2 flex items-center gap-3 text-lg">
                <a href="#" aria-label="Contact" className="text-muted-foreground hover:text-foreground">
                    <PiAt />
                </a>
                <a href="#" aria-label="Twitter" style={{ color: '#1DA1F2' }}>
                    <PiTwitterLogo />
                </a>
                <a href="#" aria-label="LinkedIn" style={{ color: '#0A66C2' }}>
                    <PiLinkedinLogo />
                </a>
            </div>

            <p className="mt-4 text-sm leading-relaxed text-muted-foreground">
                Backs early-stage teams across fintech and developer tools, with a focus on
                go-to-market and hiring. Open to intros from founders building in payments
                infrastructure.
            </p>

            <div className="mt-4 space-y-4">
                <div className="flex items-center justify-between gap-4">
                    <span className="text-sm text-muted-foreground">Contact type:</span>
                    <Dropdown
                        placement="bottom-end"
                        activeKey={contactType}
                        onSelect={(eventKey) => setContactType(eventKey)}
                        renderTitle={
                            <Button
                                variant="default"
                                size="sm"
                                icon={<PiCaretDown />}
                                iconAlignment="end"
                            >
                                {contactType}
                            </Button>
                        }
                    >
                        {contactTypeOptions.map((option) => (
                            <Dropdown.Item key={option} eventKey={option}>
                                {option}
                            </Dropdown.Item>
                        ))}
                    </Dropdown>
                </div>

                <div className="flex items-center justify-between gap-4">
                    <span className="text-sm text-muted-foreground">Relationship:</span>
                    <span className="flex items-center gap-1.5 text-sm font-medium text-success">
                        <InfoBar level="high" />
                        Strong
                    </span>
                </div>

                <div className="flex items-center justify-between gap-4">
                    <span className="text-sm text-muted-foreground">Days since last contact:</span>
                    <span className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium text-foreground">
                        5
                    </span>
                </div>
            </div>

            <div className="mt-4 space-y-4 border-t pt-4">
                {positions.map((position) => (
                    <div key={position.id}>
                        <div className="font-semibold text-card-foreground">{position.role}</div>
                        <div className="mt-0.5 text-sm text-muted-foreground">{position.company}</div>
                        <div className="text-sm text-muted-foreground">{position.period}</div>
                    </div>
                ))}
            </div>

            <div className="mt-4 border-t pt-4">
                <a href="#" className="text-sm font-medium text-primary hover:text-primary-hover">
                    View full profile
                </a>
            </div>
        </Card>
    )
}

import Card from '@/components/ui/Card'
import Button from '@/components/ui/Button'
import Tag from '@/components/ui/Tag'
import {
    PiArrowSquareOut,
    PiArticle,
    PiBuildings,
    PiCalendarBlank,
    PiCircleDashed,
    PiCurrencyDollar,
    PiFlag,
    PiIdentificationCard,
    PiMapPin,
    PiPencilSimple,
    PiPhone,
    PiStar,
    PiTag,
    PiUsersThree,
    PiGlobe,
} from 'react-icons/pi'

const assetBase = 'https://statics.nateui.com/img'

const industries = ['Cloud', 'Enterprise', 'SaaS']

const fieldGroups = [
    [
        {
            label: 'Company Name',
            icon: <PiIdentificationCard />,
            value: 'Google LLC',
        },
        {
            label: 'Industry',
            icon: <PiTag />,
            value: (
                <div className="flex flex-wrap gap-2">
                    {industries.map((industry) => (
                        <Tag key={industry}>{industry}</Tag>
                    ))}
                </div>
            ),
        },
        {
            label: 'Website',
            icon: <PiGlobe />,
            value: (
                <a
                    href="#"
                    className="inline-flex items-center gap-1 hover:underline"
                >
                    google.com
                    <PiArrowSquareOut className="shrink-0 text-sm" aria-hidden="true" />
                </a>
            ),
        },
        {
            label: 'Phone',
            icon: <PiPhone />,
            value: '+1 650-253-0000',
        },
    ],
    [
        {
            label: 'Company Size',
            icon: <PiUsersThree />,
            value: 'Enterprise',
        },
        {
            label: 'Annual Revenue',
            icon: <PiCurrencyDollar />,
            value: '$307.4B',
        },
        {
            label: 'Status',
            icon: <PiCircleDashed />,
            value: (
                <Tag prefix prefixClass="bg-success" className="bg-card">
                    Active
                </Tag>
            ),
        },
    ],
    [
        {
            label: 'Country',
            icon: <PiFlag />,
            value: 'United States',
        },
        {
            label: 'City',
            icon: <PiBuildings />,
            value: 'Mountain View, CA',
        },
        {
            label: 'Address',
            icon: <PiMapPin />,
            value: '1600 Amphitheatre Parkway',
        },
    ],
    [
        {
            label: 'Description',
            icon: <PiArticle />,
            value: (
                <p className="leading-relaxed">
                    Search, advertising, and cloud platform provider. Account covers cloud
                    infrastructure and workspace licensing across regional teams.
                </p>
            ),
        },
        {
            label: 'Customer Since',
            icon: <PiCalendarBlank />,
            value: '12 Mar 2019',
        },
    ],
]

export default function CompanyProfileCard() {
    return (
        <Card bodyClass="p-0" className="w-full">
            <div className="border-b px-4 pt-4 pb-6">
                <div className="flex items-center justify-end gap-1">
                    <Button
                        variant="ghost"
                        shape="circle"
                        size="sm"
                        icon={<PiStar />}
                        aria-label="Add Google LLC to favorites"
                    />
                    <Button
                        variant="ghost"
                        shape="circle"
                        size="sm"
                        icon={<PiPencilSimple />}
                        aria-label="Edit company profile"
                    />
                </div>

                <div className="flex flex-col items-center text-center">
                    <span className="flex h-20 w-20 items-center justify-center rounded-full bg-white p-3">
                        <img
                            src={`${assetBase}/thumbs/brands/google.png`}
                            alt="Google LLC"
                            className="block h-full w-full object-contain"
                        />
                    </span>
                    <h5 className="mt-4 text-xl font-semibold text-card-foreground">
                        Google LLC
                    </h5>
                    <p className="mt-1 text-muted-foreground">Software</p>
                </div>
            </div>

            {fieldGroups.map((group, groupIndex) => (
                <div
                    key={group[0].label}
                    className={
                        groupIndex < fieldGroups.length - 1
                            ? 'space-y-3 border-b px-4 py-4'
                            : 'space-y-3 px-4 py-4'
                    }
                >
                    {group.map((field) => (
                        <div
                            key={field.label}
                            className="grid grid-cols-[8.5rem_minmax(0,1fr)] items-start gap-4"
                        >
                            <span className="flex items-center gap-2 text-muted-foreground">
                                <span className="shrink-0 text-base" aria-hidden="true">
                                    {field.icon}
                                </span>
                                {field.label}
                            </span>
                            <div className="min-w-0 text-card-foreground">{field.value}</div>
                        </div>
                    ))}
                </div>
            ))}
        </Card>
    )
}

import { useState } from 'react'
import Popover from '@/components/ui/Popover'
import Avatar from '@/components/ui/Avatar'
import Button from '@/components/ui/Button'
import {
    PiBriefcase,
    PiUser,
    PiPhone,
    PiPhoneCall,
    PiEnvelopeSimple,
    PiLink,
    PiCheckSquare,
    PiChatCircleText,
} from 'react-icons/pi'

const assetBase = 'https://statics.nateui.com/img'

export default function ContactPreviewPopover() {
    const [open, setOpen] = useState(true)

    return (
        <div className="flex min-h-screen items-start justify-center pt-8">
            <Popover
                open={open}
                onOpenChange={setOpen}
                trigger="click"
                placement="bottom-start"
                width={320}
                className="p-0"
                renderTrigger={
                    <div className="inline-flex cursor-default items-center gap-2 rounded-control bg-card hover:bg-muted px-4 py-2 transition-opacity">
                        <Avatar
                            src={`${assetBase}/avatars/thumb-9.jpg`}
                            alt="Marcus Webb"
                        />
                        <div className="min-w-0">
                            <div className="truncate font-medium text-card-foreground">
                                Marcus Webb
                            </div>
                            <div className="truncate text-muted-foreground">(415) 555-0187</div>
                        </div>
                    </div>
                }
            >
                <div className="overflow-hidden rounded-popover">
                    <div className="relative h-28">
                        <img
                            src={`${assetBase}/thumbs/misc/img-14.png`}
                            alt=""
                            className="h-full w-full object-cover"
                        />
                        <div className="absolute top-3 right-3 flex items-center gap-2">
                            <Button
                                variant="default"
                                shape="circle"
                                size="sm"
                                icon={<PiPhoneCall />}
                                aria-label="Call Marcus Webb"
                            />
                            <Button
                                variant="default"
                                shape="circle"
                                size="sm"
                                icon={<PiChatCircleText />}
                                aria-label="Message Marcus Webb"
                            />
                        </div>
                        <div className="absolute -bottom-8 left-4 rounded-full bg-popover p-1">
                            <Avatar
                                src={`${assetBase}/avatars/thumb-9.jpg`}
                                alt="Marcus Webb"
                                size={64}
                            />
                        </div>
                    </div>

                    <div className="px-4 pt-10 pb-4">
                        <div className="text-lg font-semibold text-popover-foreground">Marcus Webb</div>
                        <div className="mt-1 text-muted-foreground">
                            Co-Founder at{' '}
                            <a href="#" className="text-primary hover:text-primary-hover">
                                Brightloom
                            </a>
                        </div>

                        <h6 className="mt-4">Details</h6>
                        <div className="mt-2 space-y-3">
                            <div className="flex items-center justify-between gap-4">
                                <span className="flex items-center gap-2 text-muted-foreground">
                                    <PiBriefcase className="shrink-0 text-base" aria-hidden="true" />
                                    Company
                                </span>
                                <span className="min-w-0 truncate text-popover-foreground">
                                    Brightloom
                                </span>
                            </div>

                            <div className="flex items-center justify-between gap-4">
                                <span className="flex items-center gap-2 text-muted-foreground">
                                    <PiUser className="shrink-0 text-base" aria-hidden="true" />
                                    Role
                                </span>
                                <span className="min-w-0 truncate text-popover-foreground">
                                    Co-Founder
                                </span>
                            </div>

                            <div className="flex items-center justify-between gap-4">
                                <span className="flex items-center gap-2 text-muted-foreground">
                                    <PiPhone className="shrink-0 text-base" aria-hidden="true" />
                                    Phone
                                </span>
                                <span className="min-w-0 truncate text-popover-foreground">
                                    (415) 555-0187
                                </span>
                            </div>

                            <div className="flex items-center justify-between gap-4">
                                <span className="flex items-center gap-2 text-muted-foreground">
                                    <PiEnvelopeSimple className="shrink-0 text-base" aria-hidden="true" />
                                    Email
                                </span>
                                <span className="min-w-0 truncate text-popover-foreground">
                                    marcus@brightloom.io
                                </span>
                            </div>

                            <div className="flex items-center justify-between gap-4">
                                <span className="flex items-center gap-2 text-muted-foreground">
                                    <PiLink className="shrink-0 text-base" aria-hidden="true" />
                                    Website
                                </span>
                                <a
                                    href="#"
                                    className="min-w-0 truncate rounded-control border px-2.5 py-1 text-popover-foreground hover:text-primary"
                                >
                                    brightloom.io
                                </a>
                            </div>

                            <div className="flex items-center justify-between gap-4">
                                <span className="flex items-center gap-2 text-muted-foreground">
                                    <PiCheckSquare className="shrink-0 text-base" aria-hidden="true" />
                                    Status
                                </span>
                                <span className="rounded-badge bg-primary-soft px-2 py-0.5 text-xs font-medium text-primary">
                                    Customer
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </Popover>
        </div>
    )
}