polish codesandbox component (#53)

Author: huozhi

package.json

@@ -31,8 +31,8 @@
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
     "bunchee": "^6.3.3",
-    "codice": "^1.2.1",
-    "devjar": "link:./",
+    "codice": "^1.3.2",
+    "devjar": "link:",
     "next": "^15.1.5",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

pnpm-lock.yaml

@@ -123,16 +123,24 @@ export default function Page() {
         </p>
       </div>
 
-      <h2 className="text-center">Examples</h2>
-      <div className="codesandboxes">
-        <Codesandbox title="Tailwind CSS" files={codeSampleTheme} />
-        <Codesandbox title="Plain CSS" files={codeSampleCssImport} />
-      </div>
-
-      <div className="playground">
+      <div className="playground section">
         <h1>Playground</h1>
         <Codesandbox files={codeSamplePlayground} />
       </div>
+
+      <div className='showcase'>
+        <h1>Showcase</h1>
+        <div className="codesandboxes section">
+          <div>
+            <h2>Tailwind CSS</h2>
+            <Codesandbox files={codeSampleTheme} />
+          </div>
+          <div>
+            <h2>Plain CSS</h2>
+            <Codesandbox files={codeSampleCssImport} />
+          </div>
+        </div>
+      </div>
     </main>
   )
 }

site/app/page.tsx

@@ -11,8 +11,6 @@ html {
 body {
   margin: 0;
   padding: 0 8px;
-  max-width: 1260px;
-  margin: 0 auto;
   width: 100vw;
 }
 :root {
@@ -47,21 +45,16 @@ a:hover {
   overflow-y: scroll;
   justify-content: stretch;
   flex-direction: column;
-  box-shadow: 0 24px 40px 4px rgb(200 200 200 / 50%);
-}
-.preview--result {
-  font-family: Consolas, Monaco, monospace;
-  border: none;
-  font-size: 16px;
-  line-height: 1.25em;
 }
+
 textarea:focus,
 textarea:focus-visible {
   outline: none;
 }
 .preview {
   position: relative;
-  border-top: 1px solid rgb(229, 231, 235);
+  border-top: 1px solid #dfe0e5;
+  padding: 1.5rem 1rem;
 }
 .preview--error {
   margin: 0;
@@ -84,78 +77,80 @@ textarea:focus-visible {
   color: #fff;
 }
 .preview--result {
-  padding: 8px 12px;
+  font-family: Consolas, Monaco, monospace;
+  border: none;
+  font-size: 16px;
+  line-height: 1.25em;
+  background-color: #fff;
   width: 100%;
-  background-color: rgb(246 247 249);
-  box-shadow: 0 16px 40px 4px rgb(200 200 200 / 50%);
 }
 
 .filetree {
   display: flex;
   position: relative;
-  padding-right: 60px;
-  border-bottom: 2px solid rgb(235 236 240);
+  padding-right: 2rem;
 }
 
 .filetab {
   position: relative;
-  padding: 3px 12px;
+  padding: 0.4rem 1.5rem;
   border: none;
+  line-height: 1;
   background-color: #fff;
   cursor: pointer;
   color: #000;
 }
 .filetab:hover {
-  opacity: .6;
+  opacity: .8;
 }
 .filetab--active {
-  color: rgb(8, 126, 164);
+  color: #087ea4;
 }
 .filetab--active::after {
   content: '';
   position: absolute;
   bottom: -2px;
   height: 2px;
-  background: rgb(8, 126, 164);
+  background: #087ea4;
   left: 0;
   width: 100%;
 }
 .filetab--new {
-  background-color: #f6f6f6e0;
+  padding: 0;
+  color: #087ea4;
+  background-color: #f0f0f0;
 }
 .filetab__button {
-  padding: 0;
+  display: inline-block;
+  padding: 0.4rem 1.5rem;
   margin: 0;
+  line-height: 1;
   border: none;
-  background-color: #f6f6f6e0;
+  background-color: transparent;
   cursor: pointer;
-  color: #000;
+  color: #70858c;
 }
-
-[data-codesandbox] {
-  max-width: 600px;
-  width: 100%;
-  padding: 0 8px;
+.filetab__input {
+  display: inline-block;
+  outline: none;
+  border: none;
+  padding: 0.4rem 1.5rem;
+  margin: 0;
+  background-color: #f0f0f0;
 }
 
-.codesandboxes {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
-  gap: 16px;
-  margin: 54px 0;
+[data-codesandbox] {
+  box-shadow: 0 24px 40px 4px rgb(200 200 200 / 50%);
 }
 
 .titles {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  align-items: center;
-  padding: 32px 0;
+  padding: 1rem 0;
   line-height: 1.4;
   width: 100%;
   max-width: 680px;
-  margin: 0 auto;
-  text-align: center;
   color: #404756;
 }
 
@@ -171,7 +166,7 @@ textarea:focus-visible {
 }
 
 .titles p {
-  font-size: 20px;
+  font-size: 18px;
   margin: 0;
   padding: 8px 0;
 }
@@ -180,26 +175,19 @@ textarea:focus-visible {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: center;
-  padding: 32px 0;
   line-height: 1.4;
   width: 100%;
   max-width: 680px;
-  margin: 0 auto;
 }
 
-@media screen and (max-width: 1260px) {
-  .codesandboxes {
-    margin: 32px auto;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
+.showcase {
+  justify-content: center;
+  line-height: 1.4;
+  margin: 2rem 0;
 }
 
-@media screen and (max-width: 680px) {
-  .titles {
-    margin: 0 auto;
-    max-width: 100%;
-  }
+.section {
+  max-width: 680px;
+  border-bottom: 1px dashed #e5e7eb;
+  padding: 32px 0;
 }

site/styles.css

@@ -8,10 +8,8 @@ import FileTab from './file-tab'
 import { useEffect, useState } from 'react'
 
 export function Codesandbox({
-  title,
   files: initialFiles
 }: {
-  title?: string
   files: Record<string, string>
 }) {
   const [activeFile, setActiveFile] = useState('index.js')
@@ -24,7 +22,6 @@ export function Codesandbox({
 
   return (
     <div data-codesandbox>
-      {title ? <h2>{title}</h2> : null}
       <div className="filetree">
         {Object.keys(files).map((filename) => (
           <div
@@ -37,7 +34,6 @@ export function Codesandbox({
             {filename + (filename.endsWith('.css') || filename.endsWith('.js') ? '' : '.js')}
           </div>
         ))}
-
         <FileTab files={files} setFiles={setFiles} setActiveFile={setActiveFile} />
       </div>
       <Editor

site/ui/codesandbox.tsx

@@ -29,7 +29,11 @@ function FileTab({ files, setFiles, setActiveFile }) {
   }
 
   return (
-    <div className="filetab filetab--new" role="button">
+    <div
+     className="filetab filetab--new"
+     role="button"
+     {...(!isEditing && { onClick: () => setIsEditing(true) })}
+    >
       {isEditing ? (
         <input
           type="text"
@@ -49,9 +53,9 @@ function FileTab({ files, setFiles, setActiveFile }) {
           onBlur={handleNewFileSubmit}
         />
       ) : (
-        <button className="filetab__button" onClick={() => setIsEditing(true)} aria-label="Add new file">
+        <span className="filetab__button" aria-label="Add new file">
           + New
-        </button>
+        </span>
       )}
     </div>
   )