OXGN UI

Component Library

Artist Admin Card

A horizontal card component designed for admin interfaces to manage artist profiles. Features large avatar, artist information, badges, and edit functionality.

Basic Artist Admin Card

Jelly Roll

Jelly Roll

@JELLY
JUVENILE JUSTICE REFORM
77 POSTS
<ArtistAdminCard
  artist={{
    name: "Jelly Roll",
    username: "JELLY",
    avatar: "profile.jpg",
    verified: true
  }}
  badges={[
    { 
      text: "JUVENILE JUSTICE REFORM", 
      variant: "secondary",
      icon: "heart"
    }
  ]}
  postCount={77}
  onEdit={() => handleEdit()}
/>
        

Verified Artist

Post Malone

Post Malone

@POSTY
JUVENILE JUSTICE REFORM
77 POSTS

Artist with Multiple Badges

Taylor Swift

Taylor Swift

@TAYLOR
ERAS TOUR
GRAMMY WINNER
NEW ALBUM
234 POSTS
<ArtistAdminCard
  artist={{
    name: "Taylor Swift",
    username: "TAYLOR",
    avatar: "profile.jpg",
    verified: true
  }}
  badges={[
    { text: "ERAS TOUR", variant: "success" },
    { text: "GRAMMY WINNER", variant: "primary" },
    { text: "NEW ALBUM", variant: "secondary" }
  ]}
  postCount={234}
  onEdit={() => handleEdit()}
/>
        

New Artist (No Avatar)

EA

Emerging Artist

@NEWBIE
NEW ARTIST
3 POSTS
<ArtistAdminCard
  artist={{
    name: "Emerging Artist",
    username: "NEWBIE",
    verified: false
  }}
  badges={[
    { text: "NEW ARTIST", variant: "muted" }
  ]}
  postCount={3}
  onEdit={() => handleEdit()}
/>
        

Admin List View

Chris Stapleton

Chris Stapleton

@CHRIS
COUNTRY
LIVE TOUR
156 POSTS
Billie Eilish

Billie Eilish

@BILLIE
POP
WORLD TOUR
89 POSTS
The Weeknd

The Weeknd

@WEEKND
R&B
PLATINUM
201 POSTS

Props Reference

Prop Type Default Description
artist object required Artist info with name, username, avatar, verified
badges array [] Badge objects with text, variant, and optional icon
postCount number undefined Number of posts by the artist
onEdit function undefined Callback when edit button is clicked
className string undefined Additional CSS classes