QuestCard

A cross-platform React card component for displaying quest or mission items with progress tracking, status indicators, and reward tags. Perfect for gamification systems, daily challenges, and achievement displays.

Installation

npm install @xsolla/xui-quest-card
# or
yarn add @xsolla/xui-quest-card

Demo

Basic QuestCard

import * as React from 'react';
import { QuestCard } from '@xsolla/xui-quest-card';
import { Flag } from '@xsolla/xui-icons-base';

export default function BasicQuestCard() {
  return (
    <QuestCard
      title="Play any game"
      subtitle="0/12 hours"
      icon={<Flag />}
    />
  );
}

QuestCard with Status and Rewards

import * as React from 'react';
import { QuestCard } from '@xsolla/xui-quest-card';
import { Tag } from '@xsolla/xui-tag';
import { AlertCircle } from '@xsolla/xui-icons';
import { Flag, CheckCr, Clock } from '@xsolla/xui-icons-base';
import { XsollaPoint } from '@xsolla/xui-icons-currency';

export default function QuestCardWithStatus() {
  return (
    <QuestCard
      title="Play any game (with Play Time Rewards On)"
      subtitle="0/12 hours"
      icon={<Flag />}
      status="alert"
      statusIcon={<AlertCircle />}
      trailing={
        <Tag size="sm" tone="secondary" icon={<XsollaPoint />}>
          5x
        </Tag>
      }
    />
  );
}

QuestCard Status Variants

import * as React from 'react';
import { QuestCard } from '@xsolla/xui-quest-card';
import { Tag } from '@xsolla/xui-tag';
import { AlertCircle } from '@xsolla/xui-icons';
import { Flag, CheckCr, Clock } from '@xsolla/xui-icons-base';
import { XsollaPoint, XsollaTicket } from '@xsolla/xui-icons-currency';

export default function QuestCardStatuses() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      {/* Alert Status */}
      <QuestCard
        title="Urgent quest"
        subtitle="Expires in 1 hour"
        icon={<Flag />}
        status="alert"
        statusIcon={<AlertCircle />}
        trailing={<Tag size="sm" tone="alert">Urgent</Tag>}
      />

      {/* Warning Status */}
      <QuestCard
        title="Expiring soon"
        subtitle="2 hours left"
        icon={<Clock />}
        status="warning"
        statusIcon={<AlertCircle />}
        trailing={<Tag size="sm" tone="warning">Soon</Tag>}
      />

      {/* Success Status */}
      <QuestCard
        title="Completed quest"
        subtitle="1/1 done"
        icon={<CheckCr />}
        status="success"
        statusIcon={<CheckCr />}
        trailing={<Tag size="sm" tone="success">Done</Tag>}
      />
    </div>
  );
}

Quest List

import * as React from 'react';
import { QuestCard } from '@xsolla/xui-quest-card';
import { Tag } from '@xsolla/xui-tag';
import { AlertCircle } from '@xsolla/xui-icons';
import { Flag, CheckCr } from '@xsolla/xui-icons-base';
import { XsollaPoint, XsollaTicket } from '@xsolla/xui-icons-currency';

export default function QuestList() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <QuestCard
        title="Play any game"
        subtitle="0/12 hours"
        icon={<Flag />}
        status="alert"
        statusIcon={<AlertCircle />}
        trailing={<Tag size="sm" tone="secondary" icon={<XsollaPoint />}>5x</Tag>}
        onPress={() => console.log('Quest 1 clicked')}
      />
      <QuestCard
        title="Complete daily login"
        subtitle="1/1 completed"
        icon={<CheckCr />}
        status="success"
        statusIcon={<CheckCr />}
        trailing={<Tag size="sm" tone="success">Done</Tag>}
      />
      <QuestCard
        title="Invite 3 friends"
        subtitle="1/3 invited"
        icon={<Flag />}
        trailing={<Tag size="sm" tone="brand" icon={<XsollaTicket />}>500</Tag>}
        onPress={() => console.log('Quest 3 clicked')}
      />
      <QuestCard
        title="Reach level 10"
        subtitle="Level 7/10"
        icon={<Flag />}
        trailing={
          <div style={{ display: 'flex', gap: 4 }}>
            <Tag size="sm" tone="brand" icon={<XsollaPoint />}>100</Tag>
            <Tag size="sm" tone="secondary">2x</Tag>
          </div>
        }
      />
    </div>
  );
}

Anatomy

Import the component and use it directly:

import { QuestCard } from '@xsolla/xui-quest-card';

<QuestCard
  title="Quest Title"        // Required: Quest name
  subtitle="0/10 progress"   // Optional: Progress text
  icon={<Flag />}            // Optional: Quest icon
  status="alert"             // Optional: Status indicator
  statusIcon={<AlertCircle />} // Optional: Custom status icon
  trailing={<Tag />}         // Optional: Reward/action content
  onPress={() => {}}         // Optional: Card press handler
/>

API Reference

QuestCard

A card component for displaying quest or mission items.

QuestCard Props:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | title | string | required | Quest title text. | | subtitle | string | - | Quest progress or description (e.g., "0/12 hours"). | | icon | ReactNode | - | Icon to display in the icon container. | | status | "default" \| "alert" \| "warning" \| "success" | - | Status indicator type. | | statusIcon | ReactNode | - | Custom status icon (overrides default status indicator). | | trailing | ReactNode | - | Reward tag or custom trailing content. | | onPress | () => void | - | Card press handler. | | className | string | - | Custom className for the container. | | testID | string | - | Test ID for testing. |

Status Types:

| Status | Description | | :----- | :---------- | | default | No special status styling | | alert | Red/alert color for urgent quests | | warning | Yellow/warning color for expiring quests | | success | Green/success color for completed quests |

Theming

QuestCard uses the design system theme for colors:

// Colors accessed via theme
theme.colors.background.primary  // Card background
theme.colors.content.primary     // Title text
theme.colors.content.tertiary    // Subtitle text
theme.colors.content.alert       // Alert status color
theme.colors.content.warning     // Warning status color
theme.colors.content.success     // Success status color
theme.colors.overlay.mono        // Icon container background

Accessibility

• Uses semantic HTML structure
• Interactive cards support keyboard navigation
• Status icons provide visual feedback
• Supports custom onPress for full card interaction
• Includes testID prop for testing