From f14a731cae64288a397a4022bc5d8dc852f12d40 Mon Sep 17 00:00:00 2001 From: Chris Wanstrath Date: Sun, 1 Feb 2026 23:32:10 -0800 Subject: [PATCH] edit code --- .../code/20260130-000000/src/server/index.tsx | 188 +++++++++++++++++- 1 file changed, 184 insertions(+), 4 deletions(-) diff --git a/apps/code/20260130-000000/src/server/index.tsx b/apps/code/20260130-000000/src/server/index.tsx index 6b3deaf..4060afb 100644 --- a/apps/code/20260130-000000/src/server/index.tsx +++ b/apps/code/20260130-000000/src/server/index.tsx @@ -88,6 +88,9 @@ const CodeHeader = define('CodeHeader', { borderBottom: `1px solid ${theme('colors-border')}`, fontWeight: 'bold', fontSize: '14px', + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', }) const ErrorBox = define('ErrorBox', { @@ -190,6 +193,46 @@ const DownloadButton = define('DownloadButton', { }, }) +const EditButton = define('EditButton', { + base: 'button', + display: 'inline-flex', + alignItems: 'center', + gap: '6px', + padding: '6px 12px', + backgroundColor: theme('colors-bgElement'), + color: theme('colors-text'), + border: `1px solid ${theme('colors-border')}`, + borderRadius: theme('radius-md'), + fontSize: '13px', + cursor: 'pointer', + states: { + ':hover': { + backgroundColor: theme('colors-bgHover'), + }, + }, +}) + +const EditLink = define('EditLink', { + base: 'a', + display: 'inline-flex', + alignItems: 'center', + gap: '6px', + padding: '6px 12px', + backgroundColor: theme('colors-bgElement'), + color: theme('colors-text'), + border: `1px solid ${theme('colors-border')}`, + borderRadius: theme('radius-md'), + fontSize: '13px', + cursor: 'pointer', + textDecoration: 'none', + states: { + ':hover': { + backgroundColor: theme('colors-bgHover'), + }, + }, +}) + + const FolderIcon = () => ( @@ -206,6 +249,7 @@ interface LayoutProps { title: string children: Child highlight?: boolean + editable?: boolean } const fileMemoryScript = ` @@ -233,7 +277,7 @@ const fileMemoryScript = ` })(); ` -function Layout({ title, children, highlight }: LayoutProps) { +function Layout({ title, children, highlight, editable }: LayoutProps) { return ( @@ -241,13 +285,27 @@ function Layout({ title, children, highlight }: LayoutProps) { {title} - {highlight && ( + {highlight && !editable && ( <> )} + {editable && ( + <> + + + + + + + + + + + + )}