Skip to content

Commit bf0c738

Browse files
brendan-defibrendan-defi
committed
mobile live demo
1 parent 74cb738 commit bf0c738

File tree

2 files changed

+182
-9
lines changed

2 files changed

+182
-9
lines changed

Diff for: ‎apps/web/src/components/Developers/LiveDemo/index.tsx

+169-9
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,8 @@ function EarnDemo() {
164164
export function LiveDemo() {
165165
const [theme, setTheme] = useState<'light' | 'dark'>('dark');
166166
const [isMounted, setIsMounted] = useState(false);
167-
// const [highlightedCode, setHighlightedCode] = useState('');
167+
const [content, setContent] = useState<'code' | 'preview'>('code');
168+
const [isComponentMenuOpen, setIsComponentMenuOpen] = useState(false);
168169
const [activeTab, setActiveTab] = useState<Tab>('onboard');
169170
const [copied, setCopied] = useState(false);
170171

@@ -235,26 +236,145 @@ export function LiveDemo() {
235236
return (
236237
<section className="w-full">
237238
<style>{styles}</style>
238-
<div className="mb-9 flex flex-row gap-2">
239+
<div className="mb-9 flex flex-col gap-2 md:flex-row">
239240
<Title level={TitleLevel.Title1}>Try it out!</Title>
240241
<Title level={TitleLevel.Title1} className="text-dark-palette-foregroundMuted">
241242
Experience how easy it is to build on Base.
242243
</Title>
243244
</div>
244245
<div
245246
className={classNames(
246-
'rounded-xl border transition-colors',
247+
'relative rounded-xl border transition-colors',
247248
theme === 'dark'
248249
? 'border-dark-palette-line/50 bg-black'
249250
: 'border-dark-palette-line/50 bg-white',
250251
)}
251252
>
253+
{isComponentMenuOpen && (
254+
<div
255+
className={classNames(
256+
'md:hidden',
257+
'h-full w-3/4 p-6',
258+
'absolute right-0 top-0 z-10',
259+
'border-l border-palette-lineHeavy/65',
260+
'rounded-r-xl',
261+
'font-medium',
262+
theme === 'dark' ? 'bg-palette-foreground' : 'bg-white',
263+
)}
264+
>
265+
<div className="flex w-full flex-col items-start space-y-4 px-1">
266+
<div className="flex w-full justify-between">
267+
<button
268+
type="button"
269+
onClick={() => {
270+
setActiveTab('onboard');
271+
setIsComponentMenuOpen(false);
272+
}}
273+
className={classNames(
274+
'whitespace-nowrap rounded-lg text-base font-medium transition-colors',
275+
activeTab === 'onboard' ? buttonClasses.active : buttonClasses.inactive,
276+
)}
277+
>
278+
Sign in
279+
</button>
280+
<button
281+
type="button"
282+
aria-label="Close component menu"
283+
onClick={() => setIsComponentMenuOpen(false)}
284+
className={classNames(
285+
'rounded-lg p-2',
286+
theme === 'dark' ? 'text-white' : 'text-dark-palette-backgroundAlternate',
287+
)}
288+
>
289+
<Icon name="close" color="currentColor" width={16} height={16} />
290+
</button>
291+
</div>
292+
<button
293+
type="button"
294+
onClick={() => {
295+
setActiveTab('onramp');
296+
setIsComponentMenuOpen(false);
297+
}}
298+
className={classNames(
299+
'whitespace-nowrap rounded-lg text-base font-medium transition-colors',
300+
activeTab === 'onramp' ? buttonClasses.active : buttonClasses.inactive,
301+
)}
302+
>
303+
Onramp
304+
</button>
305+
<button
306+
type="button"
307+
onClick={() => {
308+
setActiveTab('pay');
309+
setIsComponentMenuOpen(false);
310+
}}
311+
className={classNames(
312+
'whitespace-nowrap rounded-lg text-base font-medium transition-colors',
313+
activeTab === 'pay' ? buttonClasses.active : buttonClasses.inactive,
314+
)}
315+
>
316+
Pay
317+
</button>
318+
<button
319+
type="button"
320+
onClick={() => {
321+
setActiveTab('swap');
322+
setIsComponentMenuOpen(false);
323+
}}
324+
className={classNames(
325+
'whitespace-nowrap rounded-lg text-base font-medium transition-colors',
326+
activeTab === 'swap' ? buttonClasses.active : buttonClasses.inactive,
327+
)}
328+
>
329+
Swap
330+
</button>
331+
<button
332+
type="button"
333+
onClick={() => {
334+
setActiveTab('earn');
335+
setIsComponentMenuOpen(false);
336+
}}
337+
className={classNames(
338+
'whitespace-nowrap rounded-lg text-base font-medium transition-colors',
339+
activeTab === 'earn' ? buttonClasses.active : buttonClasses.inactive,
340+
)}
341+
>
342+
Earn yield
343+
</button>
344+
</div>
345+
</div>
346+
)}
252347
<div
253-
className={`flex items-center justify-between border-b py-2 pl-6 pr-2 transition-colors ${
254-
theme === 'dark' ? 'border-dark-palette-line/50' : 'border-dark-palette-line/50'
255-
}`}
348+
className={classNames(
349+
'flex items-center justify-between border-b py-2 pl-6 pr-2 transition-colors',
350+
theme === 'dark' ? 'border-dark-palette-line/50' : 'border-dark-palette-line/50',
351+
)}
256352
>
257-
<div className="no-scrollbar flex items-center space-x-8 overflow-x-auto">
353+
<div className="no-scrollbar flex items-center space-x-8 overflow-x-auto md:hidden">
354+
<div className="flex space-x-8 px-1">
355+
<button
356+
type="button"
357+
onClick={() => setContent('code')}
358+
className={classNames(
359+
'whitespace-nowrap rounded-lg text-base font-medium transition-colors',
360+
content === 'code' ? buttonClasses.active : buttonClasses.inactive,
361+
)}
362+
>
363+
Code
364+
</button>
365+
<button
366+
type="button"
367+
onClick={() => setContent('preview')}
368+
className={classNames(
369+
'whitespace-nowrap rounded-lg text-base font-medium transition-colors',
370+
content === 'preview' ? buttonClasses.active : buttonClasses.inactive,
371+
)}
372+
>
373+
Preview
374+
</button>
375+
</div>
376+
</div>
377+
<div className="no-scrollbar hidden items-center space-x-8 overflow-x-auto md:flex">
258378
<div className="flex space-x-8 px-1">
259379
<button
260380
type="button"
@@ -314,7 +434,7 @@ export function LiveDemo() {
314434
type="button"
315435
onClick={handleCopy}
316436
className={classNames(
317-
'rounded-lg border p-2 transition-colors',
437+
'hidden rounded-lg border p-2 transition-colors md:block',
318438
theme === 'dark'
319439
? 'border-dark-palette-line/50 hover:bg-white/10'
320440
: 'border-dark-palette-line/50 text-dark-palette-backgroundAlternate hover:bg-white/10',
@@ -328,6 +448,25 @@ export function LiveDemo() {
328448
<Icon name="copy" color="currentColor" width={16} height={16} />
329449
)}
330450
</button>
451+
<button
452+
type="button"
453+
aria-label="Toggle component menu"
454+
onClick={() => setIsComponentMenuOpen((prev) => !prev)}
455+
className={classNames(
456+
'rounded-lg border p-2 transition-colors md:hidden',
457+
theme === 'dark'
458+
? 'border-dark-palette-line/50 hover:bg-white/10'
459+
: 'border-dark-palette-line/50 text-dark-palette-backgroundAlternate hover:bg-white/10',
460+
)}
461+
>
462+
<div
463+
className={classNames(
464+
theme === 'dark' ? 'text-white' : 'text-dark-palette-backgroundAlternate',
465+
)}
466+
>
467+
<Icon name="hamburger" color="currentColor" width={16} height={16} />
468+
</div>
469+
</button>
331470
<button
332471
type="button"
333472
onClick={toggleTheme}
@@ -347,7 +486,28 @@ export function LiveDemo() {
347486
</div>
348487
</div>
349488

350-
<div className="grid grid-cols-1 lg:grid-cols-2">
489+
<div className="grid grid-cols-1 text-xs md:hidden">
490+
{content === 'preview' ? (
491+
<div
492+
className={classNames(
493+
'h-[300px] p-8 lg:h-[500px] lg:p-12',
494+
'border-b lg:border-b-0 lg:border-r',
495+
'flex items-center justify-center transition-colors',
496+
'overflow-visible',
497+
theme === 'dark' ? 'border-dark-palette-line/50' : 'border-dark-palette-line/50',
498+
)}
499+
>
500+
<DynamicCryptoProviders>{demoComponent}</DynamicCryptoProviders>
501+
</div>
502+
) : (
503+
<div className="h-[300px] p-6">
504+
<div className={`${theme} relative h-full`}>
505+
<DynamicCodeSnippet code={codeSnippets[activeTab]} />
506+
</div>
507+
</div>
508+
)}
509+
</div>
510+
<div className="hidden grid-cols-1 md:grid lg:grid-cols-2">
351511
<div
352512
className={classNames(
353513
'h-[300px] p-8 lg:h-[500px] lg:p-12',

Diff for: ‎apps/web/src/components/Icon/Icon.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -623,6 +623,19 @@ const ICONS: Record<string, (props: SvgProps) => JSX.Element> = {
623623
/>
624624
</svg>
625625
),
626+
hamburger: ({ color, width, height }: SvgProps) => (
627+
<svg
628+
width={width}
629+
height={height}
630+
viewBox="0 0 16 16"
631+
fill="none"
632+
xmlns="http://www.w3.org/2000/svg"
633+
>
634+
<path d="M14.9883 4.59512H0.988292V2.99512H14.9883V4.59512Z" fill={color} />
635+
<path d="M14.9883 8.79511H0.988281V7.19511H14.9883V8.79511Z" fill={color} />
636+
<path d="M0.988292 12.9951H14.9883V11.3951H0.988292V12.9951Z" fill={color} />
637+
</svg>
638+
),
626639
};
627640

628641
export function Icon({ name, color = 'white', width = '24', height = '24' }: IconProps) {

0 commit comments

Comments
 (0)