forge/examples/profile.tsx

import { define } from '../src'
import { ExampleSection } from './ssr/helpers'
import { theme } from './ssr/themes'

const UserProfile = define('UserProfile', {
  base: 'div',

  padding: theme('spacing-lg'),
  maxWidth: 600,
  margin: "0 auto",
  background: theme('colors-bgElevated'),
  border: `1px solid ${theme('colors-border')}`,
  borderRadius: theme('radius-md'),

  parts: {
    Header: {
      display: "flex",
      alignItems: "center",
      gap: theme('spacing-md'),
      marginBottom: theme('spacing-md'),
    },
    Avatar: {
      base: 'img',
      width: 64,
      height: 64,
      borderRadius: "50%",
      objectFit: "cover",
      border: `2px solid ${theme('colors-border')}`,
    },
    Info: {
      flex: 1,
    },
    Name: {
      marginBottom: 4,
      fontSize: 18,
      fontWeight: 400,
      color: theme('colors-fg'),
    },
    Handle: {
      fontSize: 14,
      color: theme('colors-fgMuted'),
    },
    Bio: {
      marginBottom: theme('spacing-md'),
      width: "100%",
      fontSize: 14,
      lineHeight: 1.6,
      color: theme('colors-fgMuted'),
      wordWrap: "break-word",
    },
    Stats: {
      display: "flex",
      gap: theme('spacing-lg'),
      paddingTop: theme('spacing-md'),
      borderTop: `1px solid ${theme('colors-border')}`,
    },
    Stat: {
      display: "flex",
      flexDirection: "column",
      gap: 4,
    },
    StatValue: {
      fontSize: 18,
      fontWeight: 400,
      color: theme('colors-fg'),
    },
    StatLabel: {
      fontSize: 12,
      color: theme('colors-fgMuted'),
      textTransform: "uppercase",
    },
  },

  variants: {
    size: {
      compact: {
        padding: 16,
        maxWidth: 300,
        parts: {
          Avatar: { width: 48, height: 48 },
          Name: { fontSize: 16 },
          Bio: { fontSize: 13 },
        },
      },
      skinny: {
        padding: 20,
        maxWidth: 125,
        parts: {
          Header: {
            flexDirection: "column",
            alignItems: "center",
            gap: 12,
          },
          Avatar: { width: 80, height: 80 },
          Info: { flex: 0, width: "100%" },
          Name: { textAlign: "center", fontSize: 18 },
          Handle: { textAlign: "center" },
          Bio: { textAlign: "center", fontSize: 13 },
          Stats: {
            flexDirection: "column",
            gap: 16,
          },
          Stat: { alignItems: "center" },
        },
      },
      large: {
        padding: 32,
        maxWidth: 800,
        parts: {
          Avatar: { width: 96, height: 96 },
          Name: { fontSize: 24 },
        },
      },
    },
    verified: {
      parts: {
        Avatar: {
          border: `2px solid ${theme('colors-accent')}`,
        },
      },
    },
  },

  render({ props, parts: { Root, Header, Avatar, Info, Name, Handle, Bio, Stats, Stat, StatValue, StatLabel } }) {
    return (
      <Root>
        <Header>
          <Avatar src={props.avatarUrl} alt={props.name} />
          <Info>
            <Name>
              {props.name}
              {props.verified && " ✓"}
            </Name>
            <Handle>@{props.username}</Handle>
          </Info>
        </Header>

        <Bio>{props.bio}</Bio>

        <Stats>
          <Stat>
            <StatValue>{props.followers?.toLocaleString() || 0}</StatValue>
            <StatLabel>Followers</StatLabel>
          </Stat>
          <Stat>
            <StatValue>{props.following?.toLocaleString() || 0}</StatValue>
            <StatLabel>Following</StatLabel>
          </Stat>
          <Stat>
            <StatValue>{props.posts?.toLocaleString() || 0}</StatValue>
            <StatLabel>Posts</StatLabel>
          </Stat>
        </Stats>
      </Root>
    )
  },
})

export const ProfileExamplesContent = () => (
  <>
    <ExampleSection title="Default Profile">
      <UserProfile
        name="Sarah Chen"
        username="sarahc"
        avatarUrl="https://i.pravatar.cc/150?img=5"
        bio="Designer & developer. Building beautiful interfaces. Based in SF."
        followers={1234}
        following={567}
        posts={89}
      />
    </ExampleSection>

    <ExampleSection title="Compact Variant">
      <UserProfile
        size="compact"
        name="Alex Rivera"
        username="arivera"
        avatarUrl="https://i.pravatar.cc/150?img=12"
        bio="Creative director. Coffee enthusiast."
        followers={456}
        following={234}
        posts={45}
      />
    </ExampleSection>

    <ExampleSection title="Skinny Variant">
      <UserProfile
        size="skinny"
        name="Taylor Kim"
        username="tkim"
        avatarUrl="https://i.pravatar.cc/150?img=3"
        bio="Minimalist designer."
        followers={2890}
        following={125}
        posts={312}
      />
    </ExampleSection>

    <ExampleSection title="Verified User">
      <UserProfile
        verified={true}
        name="Jordan Smith"
        username="jordansmith"
        avatarUrl="https://i.pravatar.cc/150?img=8"
        bio="Tech entrepreneur. Angel investor. Sharing insights on startups and innovation."
        followers={52300}
        following={892}
        posts={1240}
      />
    </ExampleSection>

    <ExampleSection title="Large Verified Profile">
      <UserProfile
        size="large"
        verified={true}
        name="Morgan Taylor"
        username="mtaylor"
        avatarUrl="https://i.pravatar.cc/150?img=20"
        bio="Product designer with 10 years of experience. Passionate about accessibility and inclusive design. Speaker at design conferences."
        followers={8900}
        following={234}
        posts={567}
      />
    </ExampleSection>
  </>
)