diff --git a/src/app/[...file]/components/copied_image_dark.svg b/src/app/[...file]/components/copied_image_dark.svg new file mode 100644 index 0000000..264e2ed --- /dev/null +++ b/src/app/[...file]/components/copied_image_dark.svg @@ -0,0 +1,18 @@ + + + + diff --git a/src/app/[...file]/components/copied_image_light.svg b/src/app/[...file]/components/copied_image_light.svg new file mode 100644 index 0000000..1c35677 --- /dev/null +++ b/src/app/[...file]/components/copied_image_light.svg @@ -0,0 +1,18 @@ + + + + diff --git a/src/app/[...file]/components/copy.css.ts b/src/app/[...file]/components/copy.css.ts index 06d1b71..9207e53 100644 --- a/src/app/[...file]/components/copy.css.ts +++ b/src/app/[...file]/components/copy.css.ts @@ -3,19 +3,83 @@ import { style } from '@vanilla-extract/css'; import * as colors from '../../colors.css'; export const copy = style({ - 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', + display: 'flex', + alignItems: 'center', + width: 'max-content', + backgroundColor: colors.background, +}); + +export const copy_button = style({ + display: 'flex', + margin: 0, + border: 'none', + padding: 0, + outline: 'inherit', + fontFamily: 'monospace', + fontSize: '1.1em', + lineHeight: '2em', + color: 'inherit', + whiteSpace: 'pre-wrap', + transition: 'background-color 0.35s', + background: 'none', + width: 'max-content', + height: '100%', ':hover': { - color: colors.accent, + backgroundColor: colors.background2, }, }); + +const copy_image = style({ + boxSizing: 'border-box', + border: `1px solid ${colors.background2}`, + padding: '0.75em', + width: 'auto', + height: '100%', + selectors: { + [`${copy}:hover &`]: { + }, + }, +}); + +export const copy_image_dark = style([copy_image, { + display: 'block', + '@media': { + '(prefers-color-scheme: light)': { + display: 'none', + }, + }, +}]); + +export const copy_image_light = style([copy_image, { + display: 'none', + '@media': { + '(prefers-color-scheme: light)': { + display: 'block', + }, + }, +}]); + +export const copied_image_dark = style([copy_image, { + display: 'block', + '@media': { + '(prefers-color-scheme: light)': { + display: 'none', + }, + }, +}]); + +export const copied_image_light = style([copy_image, { + display: 'none', + '@media': { + '(prefers-color-scheme: light)': { + display: 'block', + }, + }, +}]); + + +export const copy_text = style({ + margin: 0, + marginLeft: '1em', + width: 'max-content', +}); diff --git a/src/app/[...file]/components/copy.tsx b/src/app/[...file]/components/copy.tsx index fe479c2..7d3d761 100644 --- a/src/app/[...file]/components/copy.tsx +++ b/src/app/[...file]/components/copy.tsx @@ -1,11 +1,16 @@ 'use client' import { useState } from 'react'; +import Image from 'next/image'; import * as style from './copy.css'; +import copy_image_dark from './copy_image_dark.svg'; +import copy_image_light from './copy_image_light.svg'; +import copied_image_dark from './copied_image_dark.svg'; +import copied_image_light from './copied_image_light.svg'; -export default function Copy({ className, text, children }: { className?: string, text: string, children?: React.ReactNode }) { - const [copied, set_copied ] = useState(false); +export default function Copy({ className, text, show_text }: { className?: string, text: string, show_text?: boolean }) { + const [copied, set_copied] = useState(false); function make_copy_text(text: string) { return () => { navigator.clipboard.writeText(text); @@ -13,5 +18,33 @@ export default function Copy({ className, text, children }: { className?: string setTimeout(() => { set_copied(false); }, 2000); }; } - return + return
{text}
: <>>} +Error: this instance of Motto does not have repointing enabled
: