code

src/components/notion/Code.astro

@@ -33,28 +33,38 @@ const code = block.Code.RichTexts.map(
 const language = block.Code.Language.toLowerCase()
 const grammer =
   Prism.languages[language.toLowerCase()] || Prism.languages.javascript
+const displayLanguage =
+  language === 'plain text' ? 'TEXT' : language.toUpperCase()
 ---
 
-<div class="code">
-  <div>
+<figure class="code mac">
+  <div class="chrome">
+    <div class="dots">
+      <span class="dot dot-red" />
+      <span class="dot dot-amber" />
+      <span class="dot dot-green" />
+    </div>
+    <div class="meta">
+      <span class="lang">{displayLanguage}</span>
+    </div>
+    <div class="actions">
+      <button class="copy" data-code={code} data-done-text="Copied!">
+        Copy
+      </button>
+    </div>
+  </div>
+  <div class="body">
     {
       /* prettier-ignore */
       language === 'mermaid' ? (
         <pre class="mermaid">{code}</pre>
       ) : (
-        <>
-          <div>
-            <button class="copy" data-code={code} data-done-text="Copied!">
-              Copy
-            </button>
-          </div>
-          <pre><code set:html={Prism.highlight(code, grammer, language)} /></pre>
-        </>
+        <pre><code set:html={Prism.highlight(code, grammer, language)} /></pre>
       )
     }
   </div>
   <Caption richTexts={block.Code.Caption} />
-</div>
+</figure>
 
 <script>
   document.querySelectorAll('button.copy').forEach((button) => {
@@ -78,55 +88,115 @@ const grammer =
 
 <style>
   .code {
-    display: block;
     width: 100%;
-    margin-bottom: 0.6rem;
+    margin-bottom: 0.8rem;
+    border-radius: 12px;
+    overflow: hidden;
+    border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
+    background: linear-gradient(
+        180deg,
+        color-mix(in oklab, var(--muted) 12%, transparent),
+        transparent 30%
+      ),
+      var(--background);
+    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06);
   }
-  .code > div {
-    background: rgb(247, 246, 243);
-    border-radius: var(--radius);
+
+  .chrome {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.6rem 0.9rem;
+    background: linear-gradient(
+      180deg,
+      color-mix(in oklab, var(--muted) 25%, transparent),
+      color-mix(in oklab, var(--muted) 12%, transparent)
+    );
+    border-bottom: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
   }
-  .code > div div {
+
+  .dots {
+    display: inline-flex;
+    gap: 0.35rem;
+  }
+
+  .dot {
+    width: 11px;
+    height: 11px;
+    border-radius: 50%;
+    display: inline-block;
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
+  }
+  .dot-red {
+    background: #ff5f57;
+  }
+  .dot-amber {
+    background: #febc2e;
+  }
+  .dot-green {
+    background: #28c840;
+  }
+
+  .meta {
+    display: flex;
+    justify-content: center;
+    font-size: 0.75rem;
+    letter-spacing: 0.03em;
+    color: var(--muted-foreground);
+    text-transform: uppercase;
+    font-weight: 600;
+  }
+
+  .actions {
     display: flex;
     justify-content: flex-end;
   }
+
   .code button.copy {
-    display: block;
-    width: 4rem;
-    border: 0;
-    border-radius: var(--radius);
-    background-color: rgba(227, 226, 224, 0.5);
-    color: var(--fg);
+    border: 1px solid color-mix(in oklab, var(--border) 90%, transparent);
+    border-radius: 9999px;
+    background: color-mix(in oklab, var(--muted) 20%, transparent);
+    color: var(--foreground);
+    padding: 0.25rem 0.9rem;
     line-height: 1.2rem;
     cursor: pointer;
+    font-size: 0.75rem;
+    transition: background-color 120ms ease, transform 120ms ease;
   }
+
+  .code button.copy:hover {
+    background: color-mix(in oklab, var(--muted) 30%, transparent);
+    transform: translateY(-1px);
+  }
+
+  .code .body {
+    background: color-mix(in oklab, var(--muted) 12%, transparent);
+  }
+
   .code pre {
-    display: block;
     overflow: auto;
-    padding: 0.8rem 2rem 2rem;
+    max-height: 65vh;
+    padding: 1rem 1.1rem 1.3rem;
     font-size: 0.9rem;
-    line-height: 1.2rem;
+    line-height: 1.4;
     white-space: pre;
-    width: 100px;
     min-width: 100%;
-    overflow-x: auto;
-    &::-webkit-scrollbar {
-      height: 10px;
-    }
-    &::-webkit-scrollbar-thumb {
-      background: rgb(211, 209, 203);
-    }
-    &::-webkit-scrollbar-track {
-      background: rgb(237, 236, 233);
-    }
+    background: transparent;
   }
+
   .code pre.mermaid {
-    padding: 2rem;
+    padding: 1.5rem;
   }
+
   .code pre code {
-    color: var(--fg);
+    display: block;
+    color: var(--foreground);
+    background: transparent !important;
     padding: 0;
-    background: rgb(247, 246, 243) !important;
-    border-radius: 0;
+  }
+
+  .lang {
+    font-family: var(--font-mono, 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
   }
 </style>