Answers to: Convert the image to React Component

WRKAIAnswers

WRKAI

AI Tools

Files

Pricing

Design to Code

Convert the image to React Component

Asked on 11/20/2025, 4 pageviews

Converted Designs

import React from 'react';

export default function WalletScreen() {
  const styles = {
    page: {
      fontFamily: 'Inter, Arial, sans-serif',
      background: '#f4f5f7',
      minHeight: '100vh',
      padding: '16px 12px',
      color: '#111'
    },
    topBar: {
      height: 40,
      display: 'flex',
      alignItems: 'center'
    },
    backBtn: {
      background: '#fff',
      border: '1px solid #eee',
      borderRadius: 10,
      padding: '6px 10px',
      cursor: 'pointer',
      boxShadow: '0 1px 2px rgba(0,0,0,0.04)'
    },
    card: {
      background: '#fff',
      borderRadius: 16,
      padding: 0,
      marginTop: 12,
      boxShadow: '0 1px 0 rgba(0,0,0,0.04)',
      position: 'relative',
      overflow: 'hidden'
    },
    corner: {
      position: 'absolute',
      left: -60,
      top: -60,
      width: 140,
      height: 140,
      background: 'linear-gradient(135deg, #ffd26b 0%, #ffd26b 40%, rgba(255,255,255,0) 60%)',
      transform: 'rotate(-15deg)',
      borderRadius: 100,
      opacity: 0.25
    },
    cardContent: {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      padding: '22px 20px'
    },
    titleRow: {
      display: 'flex',
      alignItems: 'center',
      gap: 8
    },
    cardTitle: {
      fontWeight: 700,
      fontSize: 22
    },
    infoDot: {
      width: 16,
      height: 16,
      borderRadius: 8,
      background: '#f0f0f0',
      color: '#555',
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      fontSize: 12
    },
    balanceLabel: {
      color: '#888',
      fontSize: 13,
      marginTop: 6
    },
    balance: {
      fontSize: 28,
      fontWeight: 700,
      marginTop: 6
    },
    walletIcon: {
      width: 52,
      height: 52,
      borderRadius: 26,
      background: '#fff',
      border: '1px solid #eee',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    },
    sectionTitle: {
      marginTop: 18,
      padding: '0 6px',
      color: '#6b7280',
      fontSize: 12,
      letterSpacing: 1,
      textTransform: 'uppercase'
    },
    list: {
      marginTop: 6,
      padding: '0 6px'
    },
    listItem: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      background: '#fff',
      borderRadius: 12,
      padding: '14px 16px',
      margin: '8px 0',
      boxShadow: '0 1px 3px rgba(0,0,0,0.04)'
    },
    itemLeft: {
      display: 'flex',
      alignItems: 'center'
    },
    itemIcon: {
      color: '#e53935',
      fontSize: 20,
      marginRight: 12
    },
    itemLabel: {
      fontSize: 16,
      color: '#333'
    },
    chevron: {
      fontSize: 20,
      color: '#9ca3af'
    }
  };

const actions = [
    { id: 1, label: 'Recharge', icon: '↻' },
    { id: 2, label: 'Transactions History', icon: '🧾' }
  ];

return (
    <div style={styles.page}>
      <div style={styles.topBar}>
        <button aria-label="Back" style={styles.backBtn}>←</button>
      </div>

<div style={styles.card}>
        <div style={styles.corner} />
        <div style={styles.cardContent}>
          <div style={styles.titleRow}>
            <span style={styles.cardTitle}>Red Wallet</span>
            <span style={styles.infoDot}>i</span>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={styles.balanceLabel}>Available Balance</div>
            <div style={styles.balance}>₹ 0.0</div>
          </div>
          <div style={styles.walletIcon} aria-label="wallet-icon" title="Wallet">
            <span role="img" aria-label="wallet" style={{ fontSize: 22 }}>💼</span>
          </div>
        </div>
      </div>

<div style={styles.sectionTitle}>ACTIONS</div>

<div style={styles.list}>
        {actions.map((a) => (
          <div key={a.id} style={styles.listItem}>
            <div style={styles.itemLeft}>
              <span style={styles.itemIcon}>{a.icon}</span>
              <span style={styles.itemLabel}>{a.label}</span>
            </div>
            <span style={styles.chevron}>›</span>
          </div>
        ))}
      </div>
    </div>
  );
}

by GPT-5 Nano

Converted Designs

Request another