DEVJAR

React Live Preview in browser░□▄▒▪ ▀▓▫■ █░□▄▒▪▀ ▓▫ ■█░□▄▒▪

           DEVJAR               .------------------------.   /  ▓▫■█░□        ▄▒▪▀▓▫■  /| +------------------------+  | | ▄▒▪▀▓▫■█               |  | |                        |  | |  ■█░□▄▒▪▀▓▫■█░□▄▒▪▀    |  | |  □▄▒▪▀▓▫■█░□▄▒▪        |  | |                        |  | |  .------------------.  |  | |  |                  |  |  | |  |    ▒▪▀▓▫■█░□▄    |  |  | |  |                  |  |  | |  +------------------+  | /  +------------------------+

index.js

ascii.js

styles.css

1import { useState } from 'react'2import { art } from './ascii'3import './styles.css'45const site = {6  name: 'DEVJAR',7  cta: 'WIGGLE',8  accent: '#525252',9}1011export default function App() {12  const [refreshes, setRefreshes] = useState(0)1314  return (15    <div className="page" style={{ '--accent': site.accent }}>16      <main>17        <section className="copy">18          <h1>{site.name}</h1>19          <p className="eyebrow">React Live Preview in browser</p>20          <button type="button" onClick={() => setRefreshes((count) => count + 1)}>21            {site.cta}22          </button>23        </section>2425        <pre className={refreshes > 0 ? 'ascii is-shuffling' : 'ascii'} aria-label="Devjar preview">26          <code key={refreshes}>27            {art.map((line, index) => (28              <span className="ascii-line" key={index}>{line}</span>29            ))}30          </code>31        </pre>32      </main>33    </div>34  )35}