ProfileCard

v1.0.0

bash

npm install @hua-labs/hua

tsx

import { ProfileCard } from "@hua-labs/ui/advanced/dashboard";

John Doe!Premium

john@example.com

가입일 2024년 1월 1일

Hello

Jane Smith!Pro

jane@example.com

가입일 2023년 6월 15일

default

Default Style!Basic

default@example.com

gradient

Gradient!Premium

gradient@example.com

minimal

Minimal!Pro

minimal@example.com

Basic!Basic

basic@example.com

Pro!Pro

pro@example.com

Premium!Premium

premium@example.com

Admin!Admin

admin@example.com

Bob Wilson!Pro

bob@example.com

Props


`name*`	`string`	-	User name
`email`	`string`	-	User email address
`avatar`	`string`	-	Avatar image URL
`avatarAlt`	`string`	-	Avatar alt text
`greeting`	`string`	-	Greeting message shown above the name
`memberSince`	`Date \| string`	-	Date when user joined
`membershipTier`	`"basic" \| "pro" \| "premium" \| "admin"`	-	Membership tier level
`membershipLabel`	`string`	-	Custom label for membership badge
`onSettingsClick`	`() => void`	-	Handler for settings button click
`settingsHref`	`string`	-	URL for settings link
`variant`	`"default" \| "gradient" \| "minimal"`	`"default"`	Visual style variant
`showAvatar`	`boolean`	`true`	Whether to show the avatar
`showMembership`	`boolean`	`true`	Whether to show the membership badge
`showSettings`	`boolean`	`true`	Whether to show the settings button

BasicProfileCard.tsxtsx

import { ProfileCard } from "@hua-labs/ui/advanced/dashboard";

export function BasicProfileCard() {
  return (
    <ProfileCard
      name="John Doe"
      email="john@example.com"
      membershipTier="premium"
      memberSince={new Date("2024-01-01")}
      onSettingsClick={() => console.log("Settings clicked")}
    />
  );
}

ProfileCardWithGreeting.tsxtsx

import { ProfileCard } from "@hua-labs/ui/advanced/dashboard";

export function ProfileCardWithGreeting() {
  return (
    <ProfileCard
      name="Jane Smith"
      greeting="Hello"
      variant="gradient"
      membershipTier="pro"
      settingsHref="/settings"
    />
  );
}

ActivityFeedPro MembershipBadgePro