Oops

package.json

@@ -14,8 +14,7 @@
     "prism-react-renderer": "^2.4.0",
     "react": "^18",
     "react-dom": "^18",
-    "react-markdown": "^9.0.1",
+    "react-markdown": "^9.0.1"
-    "rehype-highlight": "^7.0.0"
   },
   "devDependencies": {
     "@types/node": "^20",

src/app/[...file]/components/content.tsx

@@ -34,7 +34,7 @@ function is_type(response: Response, type: ContentType<any>) {
 }
 
 export default function Content({ src }: { src: string}) {
-	const [content, set_content] = useState<JSX.Element>();
+	const [content, set_content] = useState<React.ReactNode>();
 
 	const recognized_types: ContentType<any>[] = [{
 		content_type: /image\/\w+/,

src/app/[...file]/components/copy.css.ts

@@ -2,7 +2,7 @@ import { style } from '@vanilla-extract/css';
 
 import * as colors from '../../colors.css';
 
-export const download_tty = style({
+export const copy = style({
 	display:    'block',
 	margin:     0,
 	border:     'none',

src/app/[...file]/components/copy.tsx

@@ -0,0 +1,17 @@
+'use client'
+
+import { useState } from 'react';
+
+import * as style from './copy.css';
+
+export default function Copy({ className, text, children }: { className?: string, text: string, children: React.ReactNode }) {
+	const [copied, set_copied ] = useState(false);
+	function make_copy_text(text: string) {
+		return () => {
+			navigator.clipboard.writeText(text);
+			set_copied(true);
+			setTimeout(() => { set_copied(false); }, 2000);
+		};
+	}
+	return <button onClick={make_copy_text(text)} className={`${style.copy} ${className ?? ''}`}>{copied ? '[ Copied ]' : '[  Copy  ]'} {children}</button>
+}

src/app/[...file]/components/download_tty.tsx

@@ -1,17 +0,0 @@
-'use client'
-
-// import { useState } from 'react';
-
-import * as style from './download_tty.css';
-
-export default function DownloadTTY({ text }: { text: string }) {
-	// const [copied, set_copied] = useState(false);
-	function make_copy_text(text: string) {
-		return () => {
-			navigator.clipboard.writeText(text);
-			// set_copied(true);
-			// setTimeout(() => { set_copied(false); }, 5000);
-		};
-	}
-	return <button onClick={make_copy_text(text)} className={style.download_tty}>{text}</button>;
-}

src/app/[...file]/components/types/markdown.css.ts

@@ -14,20 +14,4 @@ export const code_bounds = style({
 export const copy = style({
 	position:   'absolute',
 	right:      0,
-	display:    'block',
-	margin:     0,
-	border:     'none',
-	padding:    '0',
-	outline:    'inherit',
-	fontFamily: 'monospace',
-	fontSize:   '1.1em',
-	lineHeight: '2em',
-	background: 'none',
-	color:      'inherit',
-	transition: 'color 0.15s',
-	whiteSpace: 'pre-wrap',
-	':hover': {
-		color: colors.accent,
-	},
-
 });

src/app/[...file]/components/types/markdown.tsx

@@ -1,6 +1,7 @@
 import Markdown from 'react-markdown';
 
 import * as style from './markdown.css';
+import Copy from '../copy';
 import Text from './text';
 import { map_to_type } from './text';
 
@@ -12,7 +13,7 @@ export default function MarkdownContent({ text }: { text: string }) {
 					const split = props.className.split('-');
 					return (
 						<div className={style.code_bounds}>
-							<button onClick={() => { navigator.clipboard.writeText(props.children); }} className={style.copy}>[ Copy ]</button>
+							<Copy className={style.copy} text={props.children}></Copy>
 							<Text language={split.length == 0 ? 'none' : map_to_type(split[split.length - 1])} text={props.children} line_numbers={false} />
 						</div>
 					);

src/app/[...file]/page.tsx

@@ -1,9 +1,9 @@
 import type { Metadata } from 'next';
 import Image from 'next/image';
 
-import DownloadTTY from './components/download_tty';
-import Content from './components/content';
 import * as style from './page.css';
+import Content from './components/content';
+import Copy from './components/copy';
 import download_image_dark from './download_dark.svg';
 import download_image_light from './download_light.svg';
 
@@ -66,7 +66,7 @@ export default async function Page({
 					</button>
 				</div>
 				<div className={style.download_tty_group}>
-					{download_ttys.map((text, index) => <DownloadTTY key={index} text={text} />)}
+					{download_ttys.map((text, index) => <Copy key={index} text={text}>{text}</Copy>)}
 				</div>
 				<Content src={`${root}${path}`} />
 			</div>