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 12/16/2025, 2 pageviews

Converted Designs

import React from 'react';

export default function DashboardUI() {
  const names = [
    'AARONSON Eliezer - RE' , 'ACKERMAN SHAYA', 'ADLER GITA - HADAR',
    'ADLER TAHO - LITAL', 'ADLER RUTH - ISRAEL', 'ALONI ITAI - RON', 'ALPEN BEREN', 'ALPERT TZACHI', 'AMIR NERIA', 'AMEIR RACHEL', 'AMOS YONI', 'ANDELSON TAL', 'ARKIN MOR', 'ARIEL SHAYA', 'ARONSON ITAI', 'BAKER DAVID', 'BAR-EL LEORA', 'BARNETT LINA', 'BEN-ARI NOAH', 'BEN-ELI ZEEV'
  ];

const styles = {
    grid: {
      display: 'grid',
      gridTemplateColumns: '320px 1fr 320px',
      gridTemplateRows: '60px 1fr 160px',
      gridTemplateAreas: `
        "header header header"
        "left center right"
        "bottom bottom bottom"
      `,
      height: '100vh',
      fontFamily: 'Segoe UI, Arial, sans-serif',
      backgroundColor: '#e8eef4',
    },
    header: {
      gridColumn: '1 / span 3',
      gridRow: 1,
      backgroundColor: '#1b2730',
      color: '#d9e4f2',
      display: 'flex',
      alignItems: 'center',
      padding: '0 16px',
      borderBottom: '1px solid #0f1b25',
      boxShadow: 'inset 0 -1px 0 rgba(0,0,0,.15)',
    },
    brand: {
      display: 'flex',
      alignItems: 'center',
      gap: 12,
      fontWeight: 700,
      fontSize: 18,
    },
    brandDot: {
      width: 10,
      height: 10,
      borderRadius: '50%',
      background: '#2bd58b',
      display: 'inline-block',
    },
    brandText: {
      letterSpacing: 0.5,
    },
    left: {
      gridColumn: '1',
      gridRow: 2,
      borderRight: '1px solid #cbd5e1',
      background: '#f5f7fb',
      padding: 12,
      overflow: 'auto',
    },
    leftHeader: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      fontSize: 14,
      color: '#2a3a57',
      marginBottom: 8,
    },
    searchBox: {
      width: '100%',
      padding: '6px 8px',
      borderRadius: 4,
      border: '1px solid #cbd5e1',
      outline: 'none',
      background: '#fff',
    },
    group: {
      margin: '10px 0',
      padding: '6px 8px',
      background: '#fff',
      borderRadius: 4,
      border: '1px solid #d9e3f2',
    },
    label: {
      fontSize: 12,
      color: '#5b6b7a',
      marginRight: 8,
    },
    select: {
      padding: '6px 8px',
      borderRadius: 4,
      border: '1px solid #cbd5e1',
      background: '#fff',
    },
    list: {
      listStyle: 'none',
      padding: 0,
      margin: 0,
    },
    listItem: {
      padding: '6px 8px',
      fontSize: 13,
      color: '#1d2b3a',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      borderBottom: '1px solid #e5eaf3',
    },
    dot: {
      width: 8,
      height: 8,
      borderRadius: '50%',
      background: '#17a2ff',
      display: 'inline-block',
      marginLeft: 6,
    },
    center: {
      gridColumn: '2',
      gridRow: 2,
      background: '#fff',
      padding: 12,
      overflow: 'auto',
    },
    centerTop: {
      display: 'flex',
      alignItems: 'center',
      gap: 8,
      height: 28,
      borderBottom: '1px solid #e6eaf2',
      marginBottom: 8,
    },
    activePill: {
      display: 'inline-flex',
      alignItems: 'center',
      gap: 6,
      padding: '4px 10px',
      borderRadius: 12,
      background: '#eaf3ff',
      color: '#1c5fbd',
      fontWeight: 600,
      fontSize: 12,
      border: '1px solid #b7d0fb',
    },
    canvas: {
      height: '100%',
      background: '#fff',
      borderRadius: 4,
      border: '1px solid #e6e6e6',
      minHeight: 420,
    },
    right: {
      gridColumn: '3',
      gridRow: 2,
      borderLeft: '1px solid #cbd5e1',
      background: '#f7faff',
      padding: 12,
      overflow: 'auto',
    },
    rightHeader: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      fontSize: 14,
      color: '#2a3a57',
      marginBottom: 8,
    },
    bottom: {
      gridColumn: '1 / span 3',
      gridRow: 3,
      background: '#f0f6fe',
      borderTop: '1px solid #cbd5e1',
      display: 'flex',
      alignItems: 'center',
      padding: '8px 12px',
      gap: 12,
      overflow: 'auto',
    },
    bottomSection: {
      display: 'flex',
      alignItems: 'center',
      gap: 8,
    },
    bottomLabel: {
      fontSize: 12,
      color: '#5b6b7a',
    },
    searchSmall: {
      padding: '4px 8px',
      borderRadius: 4,
      border: '1px solid #cbd5e1',
      fontSize: 12,
    },
  };

return (
    <div style={styles.grid}>
      <header style={{ ...styles.header }}>
        <div style={styles.brand}>
          <span style={styles.brandDot}></span>
          <span style={styles.brandText}>NOSSON</span>
          <span style={{ marginLeft: 8, fontSize: 12, color: '#a8b8cc' }}>00:00</span>
        </div>
      </header>

<aside style={styles.left}>
        <div style={styles.leftHeader}>
          <span style={{ fontWeight: 600 }}>Search Clients</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#2ecc71' }}></span>
          </span>
        </div>
        <input type="text" placeholder="Search" style={styles.searchBox} />
        <div style={styles.group}>
          <label style={styles.label}>Default Search</label>
          <select style={styles.select}>
            <option>A-Z</option>
            <option>AAA</option>
            <option>BBB</option>
          </select>
        </div>
        <ul style={styles.list}>
          {names.map((n, idx) => (
            <li key={idx} style={styles.listItem}>
              <span>{n}</span>
              <span style={{ display: 'inline-flex', alignItems: 'center' }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#2ecc71', marginLeft: 6 }}></span>
              </span>
            </li>
          ))}
        </ul>
      </aside>

<main style={styles.center}>
        <div style={styles.centerTop}>
          <span style={styles.activePill}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#2b9af2' }}></span>
            Active
          </span>
          <span style={{ fontSize: 12, color: '#6b7b8c' }}>Logs</span>
        </div>
        <div style={styles.canvas} aria-label="Main work area (canvas)"></div>
      </main>

<aside style={styles.right}>
        <div style={styles.rightHeader}>
          <span>Fees</span>
          <span style={{ fontSize: 12, color: '#6b7b8c' }}>Active</span>
        </div>
        <input type="text" placeholder="Search Fees" style={styles.searchSmall} />
        <div style={{ height: 12 }} />
        <div style={{ fontSize: 12, color: '#6b7b8c', marginBottom: 6 }}>Active Fees</div>
        <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
          {['ACTIVE FEE 1', 'ACTIVE FEE 2', 'ACTIVE FEE 3'].map((f, i) => (
            <li key={i} style={{ padding: '6px 0', borderBottom: '1px solid #e5eaf3', display: 'flex', justifyContent: 'space-between' }}>
              <span>{f}</span>
              <span style={{ color: '#2b6cb8' }}>Edit</span>
            </li>
          ))}
        </ul>
      </aside>

<footer style={styles.bottom}>
        <div style={styles.bottomSection}>
          <span style={styles.bottomLabel}>Logs</span>
          <input type="text" placeholder="Search Logs" style={styles.searchSmall} />
          <button style={{ padding: '6px 12px', borderRadius: 4, border: '1px solid #cbd5e1', background: '#fff' }}>
            Show
          </button>
        </div>
        <div style={{ width: 20 }} />
        <div style={styles.bottomSection}>
          <span style={styles.bottomLabel}>Income</span>
          <span style={{ padding: '6px 8px', borderRadius: 4, background: '#e9f0fb', border: '1px solid #cbd5e1', fontSize: 12 }}>
            0
          </span>
        </div>
        <div style={{ width: 20 }} />
        <div style={styles.bottomSection}>
          <span style={styles.bottomLabel}>Bar</span>
          <span style={{ padding: '6px 8px', borderRadius: 4, background: '#e9f0fb', border: '1px solid #cbd5e1', fontSize: 12 }}>
            0
          </span>
        </div>
      </footer>
    </div>
  );
}

by GPT-5 Nano

Converted Designs

Request another