Skip to content

Commit 20c56a4

Browse files
huozhihuozhi
authored
redesign codesandbox (#55)
1 parent da80490 commit 20c56a4

File tree

10 files changed

+478
-118
lines changed

10 files changed

+478
-118
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
"@types/react": "^19.0.7",
3232
"@types/react-dom": "^19.0.3",
3333
"bunchee": "^6.3.3",
34-
"codice": "^1.3.2",
34+
"codice": "^1.5.4",
3535
"devjar": "link:",
3636
"next": "^16.0.3",
3737
"react": "^19.2.0",

‎pnpm-lock.yaml‎

Lines changed: 9 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎site/app/page.tsx‎

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Codesandbox } from '../ui/codesandbox'
1+
import PlaygroundSection from './playground-section'
22

33
const codeSampleCssImport = {
44
'index.js': `\
@@ -104,6 +104,12 @@ export default function App() {
104104
`,
105105
}
106106

107+
const examples = [
108+
{ id: 'playground', name: 'Playground', files: codeSamplePlayground },
109+
{ id: 'tailwind', name: 'Tailwind CSS', files: codeSampleTheme },
110+
{ id: 'plain-css', name: 'Plain CSS', files: codeSampleCssImport },
111+
]
112+
107113
export default function Page() {
108114
return (
109115
<main>
@@ -123,24 +129,7 @@ export default function Page() {
123129
</p>
124130
</div>
125131

126-
<div className="playground section">
127-
<h1>Playground</h1>
128-
<Codesandbox files={codeSamplePlayground} />
129-
</div>
130-
131-
<div className='showcase'>
132-
<h1>Showcase</h1>
133-
<div className="codesandboxes section">
134-
<div>
135-
<h2>Tailwind CSS</h2>
136-
<Codesandbox files={codeSampleTheme} />
137-
</div>
138-
<div>
139-
<h2>Plain CSS</h2>
140-
<Codesandbox files={codeSampleCssImport} />
141-
</div>
142-
</div>
143-
</div>
132+
<PlaygroundSection examples={examples} />
144133
</main>
145134
)
146135
}

‎site/app/playground-section.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
'use client'
2+
3+
import { Codesandbox } from '../ui/codesandbox'
4+
import { useState } from 'react'
5+
6+
export default function PlaygroundSection({ examples }: { examples: Array<{ id: string; name: string; files: Record<string, string> }> }) {
7+
const [activeExample, setActiveExample] = useState('playground')
8+
const currentExample = examples.find(ex => ex.id === activeExample) || examples[0]
9+
10+
return (
11+
<div className="playground-container">
12+
<div className="examples-section">
13+
<div className="examples-label">Examples</div>
14+
<div className="example-tabs">
15+
{examples.map((example) => (
16+
<button
17+
key={example.id}
18+
className={`example-tab ${activeExample === example.id ? 'active' : ''}`}
19+
onClick={() => setActiveExample(example.id)}
20+
>
21+
{example.name}
22+
</button>
23+
))}
24+
</div>
25+
</div>
26+
<div className="playground-wrapper">
27+
<Codesandbox key={activeExample} files={currentExample.files} />
28+
</div>
29+
</div>
30+
)
31+
}
32+

‎site/styles.css‎

Lines changed: 93 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,20 @@ a:hover {
3131
color: #424d5b;
3232
}
3333

34-
main,
34+
main {
35+
padding: 0 1.5rem;
36+
}
37+
3538
footer {
3639
padding: 0 1.5rem;
40+
display: flex;
41+
justify-content: center;
42+
}
43+
44+
footer > p {
45+
max-width: 680px;
46+
width: 100%;
47+
text-align: center;
3748
}
3849

3950
.text-center {
@@ -68,6 +79,7 @@ footer {
6879
line-height: 1.4;
6980
width: 100%;
7081
max-width: 680px;
82+
margin: 0 auto;
7183
color: #404756;
7284
}
7385

@@ -88,6 +100,65 @@ footer {
88100
padding: 8px 0;
89101
}
90102

103+
.playground-container {
104+
display: flex;
105+
flex-direction: column;
106+
align-items: center;
107+
justify-content: center;
108+
min-height: calc(100vh - 300px);
109+
width: 100%;
110+
padding: 2rem 0;
111+
}
112+
113+
.playground-wrapper {
114+
width: 100%;
115+
max-width: 960px;
116+
margin: 0 auto;
117+
}
118+
119+
.examples-section {
120+
display: flex;
121+
flex-direction: column;
122+
align-items: center;
123+
gap: 0.75rem;
124+
margin-bottom: 1.5rem;
125+
}
126+
127+
.examples-label {
128+
font-size: 12px;
129+
font-weight: 500;
130+
color: #9ca3af;
131+
text-transform: uppercase;
132+
letter-spacing: 0.5px;
133+
}
134+
135+
.example-tabs {
136+
display: flex;
137+
gap: 0;
138+
flex-wrap: wrap;
139+
justify-content: center;
140+
}
141+
142+
.example-tab {
143+
padding: 4px 12px;
144+
border: none;
145+
background: none;
146+
cursor: pointer;
147+
font-size: 13px;
148+
font-weight: 400;
149+
color: #374151;
150+
transition: background-color 0.15s ease;
151+
}
152+
153+
.example-tab:hover {
154+
background-color: #f3f4f6;
155+
}
156+
157+
.example-tab.active {
158+
color: #111827;
159+
background-color: #f9fafb;
160+
}
161+
91162
.playground {
92163
display: flex;
93164
flex-direction: column;
@@ -114,10 +185,30 @@ footer {
114185
footer {
115186
padding: 0 0.5rem;
116187
}
188+
.codesandbox-layout {
189+
flex-direction: column;
190+
}
117191
.filetree {
118-
padding-right: 0;
192+
width: 100%;
193+
min-width: 100%;
194+
border-right: none;
195+
border-bottom: 1px solid #e5e7eb;
196+
}
197+
.filetree-root {
198+
display: none;
199+
}
200+
.filetree-files {
201+
display: flex;
202+
flex-direction: row;
203+
overflow-x: auto;
204+
padding: 8px;
119205
gap: 4px;
120206
}
207+
.filetree-item {
208+
padding: 8px 12px;
209+
white-space: nowrap;
210+
flex-shrink: 0;
211+
}
121212
.titles h1 {
122213
font-size: 36px;
123214
}

0 commit comments

Comments
 (0)