diff --git a/src/app/[...file]/components/content.tsx b/src/app/[...file]/components/content.tsx index 5c87652..b2a2118 100644 --- a/src/app/[...file]/components/content.tsx +++ b/src/app/[...file]/components/content.tsx @@ -34,7 +34,7 @@ function is_type(response: Response, type: ContentType) { } export default function Content({ src }: { src: string}) { - const [content, set_content] = useState(); + const [content, set_content] = useState(); const recognized_types: ContentType[] = [{ content_type: /image\/\w+/, diff --git a/src/app/[...file]/components/download_tty.css.ts b/src/app/[...file]/components/copy.css.ts similarity index 91% rename from src/app/[...file]/components/download_tty.css.ts rename to src/app/[...file]/components/copy.css.ts index c9a37c0..06d1b71 100644 --- a/src/app/[...file]/components/download_tty.css.ts +++ b/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', diff --git a/src/app/[...file]/components/copy.tsx b/src/app/[...file]/components/copy.tsx new file mode 100644 index 0000000..3380184 --- /dev/null +++ b/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 +} diff --git a/src/app/[...file]/components/download_tty.tsx b/src/app/[...file]/components/download_tty.tsx deleted file mode 100644 index 80a4a53..0000000 --- a/src/app/[...file]/components/download_tty.tsx +++ /dev/null @@ -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 ; -} diff --git a/src/app/[...file]/components/types/markdown.css.ts b/src/app/[...file]/components/types/markdown.css.ts index 1bef7a5..d010ed8 100644 --- a/src/app/[...file]/components/types/markdown.css.ts +++ b/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, - }, - }); diff --git a/src/app/[...file]/components/types/markdown.tsx b/src/app/[...file]/components/types/markdown.tsx index 5eb67ad..b9c52c1 100644 --- a/src/app/[...file]/components/types/markdown.tsx +++ b/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 (
- +
); diff --git a/src/app/[...file]/page.tsx b/src/app/[...file]/page.tsx index c31e54d..48c955f 100644 --- a/src/app/[...file]/page.tsx +++ b/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({
- {download_ttys.map((text, index) => )} + {download_ttys.map((text, index) => {text})}