diff --git a/app/layout.tsx b/app/layout.tsx index 69e1a66..de07424 100755 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,3 +1,4 @@ +import '../styles.css'; import Providers from '@components/Providers'; export default function RootLayout({ children }: { children: React.ReactNode }) { diff --git a/app/manifest.ts b/app/manifest.ts index 6649541..a0c27b0 100755 --- a/app/manifest.ts +++ b/app/manifest.ts @@ -1,4 +1,4 @@ -import Package from '@root/package.json'; +import Package from '../package.json'; import { MetadataRoute } from 'next'; diff --git a/app/page.tsx b/app/page.tsx index 5ca7423..443bc2e 100755 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,4 +1,4 @@ -import '@root/global.scss'; +import '../styles.css'; import * as Constants from '@common/constants'; import * as Utilities from '@common/utilities'; @@ -58,7 +58,7 @@ import ModalStack from '@components/ModalStack'; import ModalTrigger from '@components/ModalTrigger'; import Navigation from '@components/Navigation'; import NumberRangeSlider from '@components/NumberRangeSlider'; -import Package from '@root/package.json'; +import Package from '../package.json'; import RadioButtonGroup from '@components/RadioButtonGroup'; import Row from '@components/Row'; import RowSpaceBetween from '@components/RowSpaceBetween'; @@ -72,13 +72,13 @@ import Text from '@components/Text'; import TextArea from '@components/TextArea'; import TreeView from '@components/TreeView'; import UpdatingDataTable from '@components/examples/UpdatingDataTable'; -import ModalDOMSnake from '@root/components/modals/ModalDOMSnake'; +import ModalDOMSnake from '@components/modals/ModalDOMSnake'; export const dynamic = 'force-static'; // NOTE(jimmylee) // https://nextjs.org/docs/app/api-reference/functions/generate-metadata -export async function generateMetadata({ params, searchParams }) { +export async function generateMetadata({ params, searchParams }: any) { const title = Package.name; const description = Package.description; const url = 'https://sacred.computer'; @@ -126,7 +126,7 @@ export async function generateMetadata({ params, searchParams }) { // NOTE(jimmylee) // https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts -export default async function Page(props) { +export default async function Page(props: any) { return (
diff --git a/components/Accordion.module.scss b/components/Accordion.module.scss deleted file mode 100644 index 773dffa..0000000 --- a/components/Accordion.module.scss +++ /dev/null @@ -1,31 +0,0 @@ -.flex { - display: flex; - align-items: center; - justify-content: space-between; - - &:hover { - background: var(--theme-focused-foreground); - } -} - -.icon { - flex-shrink: 0; - user-select: none; - cursor: pointer; -} - -.content { - min-width: 10%; - width: 100%; - user-select: none; - cursor: pointer; - transition: 200ms ease all; - transition-property: padding; - padding-left: 0ch; -} - -.active { - .content { - padding-left: 1ch; - } -} diff --git a/components/Accordion.tsx b/components/Accordion.tsx index e3c4c8e..efa3ea8 100644 --- a/components/Accordion.tsx +++ b/components/Accordion.tsx @@ -1,19 +1,24 @@ 'use client'; -import styles from '@components/Accordion.module.scss'; - import * as React from 'react'; -import * as Utilities from '@common/utilities'; +import clsx from 'clsx'; import Row from '@components/Row'; -interface AccordionProps { +const styles = { + flex: "flex items-center justify-between hover:bg-[var(--theme-focused-foreground)]", + icon: "flex-shrink-0 select-none cursor-pointer", + content: "min-w-[10%] w-full select-none cursor-pointer transition-[padding] duration-200 ease", + active: "pl-[1ch]" +}; + +export interface AccordionProps { defaultValue?: boolean; title: string; children?: React.ReactNode; } -const Accordion: React.FC = ({ defaultValue = false, title, children }) => { +export const Accordion: React.FC = ({ defaultValue = false, title, children }) => { const [show, setShow] = React.useState(defaultValue); const accordionRef = React.useRef(null); @@ -24,9 +29,9 @@ const Accordion: React.FC = ({ defaultValue = false, title, chil return ( <> -
+
{show ? '▾' : '▸'} - {title} + {title}
{show && {children}} diff --git a/components/ActionBar.module.scss b/components/ActionBar.module.scss deleted file mode 100644 index 37dd948..0000000 --- a/components/ActionBar.module.scss +++ /dev/null @@ -1,4 +0,0 @@ -.root { - background: var(--theme-background); - box-shadow: inset 0 0 0 1px var(--theme-border); -} \ No newline at end of file diff --git a/components/ActionBar.tsx b/components/ActionBar.tsx index bbd296f..0eef210 100644 --- a/components/ActionBar.tsx +++ b/components/ActionBar.tsx @@ -1,11 +1,9 @@ -import styles from '@components/ActionBar.module.scss'; - import * as React from 'react'; -import * as Utilities from '@common/utilities'; +import clsx from 'clsx'; import ButtonGroup from '@components/ButtonGroup'; -interface ActionBarItem { +export interface ActionBarItem { hotkey?: string; onClick?: () => void; openHotkey?: string; @@ -14,11 +12,15 @@ interface ActionBarItem { items?: any; } -interface ActionBarProps { +export interface ActionBarProps { items: ActionBarItem[]; } -const ActionBar: React.FC = ({ items }) => { +const styles = { + root: "bg-[var(--theme-background)] shadow-[inset_0_0_0_1px_var(--theme-border)]" +}; + +export const ActionBar: React.FC = ({ items }) => { return (
diff --git a/components/ActionButton.module.scss b/components/ActionButton.module.scss deleted file mode 100644 index 756581b..0000000 --- a/components/ActionButton.module.scss +++ /dev/null @@ -1,59 +0,0 @@ -.hotkey { - background: var(--theme-button-foreground); - color: var(--theme-text); - cursor: pointer; - flex-shrink: 0; - font-weight: 400; - padding: 0 1ch 0 1ch; - text-indent: 0ch; - user-select: none; -} - -.content { - background: var(--theme-button-background); - box-shadow: inset 0 0 0 2px var(--theme-button-foreground); - cursor: pointer; - flex-shrink: 0; - font-weight: 400; - padding: 0 1ch 0 1ch; - text-indent: 0ch; - text-transform: uppercase; - user-select: none; -} - -.root { - display: inline-flex; - align-items: center; - justify-content: space-between; - cursor: pointer; - outline: 0; - border: 0; - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: var(--font-family-mono); - font-size: var(--font-size); - flex-shrink: 0; - - &:hover .hotkey { - background: var(--theme-focused-foreground); - } - - &:hover .content { - box-shadow: inset 0 0 0 2px var(--theme-focused-foreground); - } - - &:focus .hotkey { - background: var(--theme-focused-foreground); - } - - &:focus .content { - box-shadow: inset 0 0 0 2px var(--theme-focused-foreground); - } -} - -.selected { - .content { - background: var(--theme-focused-foreground); - } -} diff --git a/components/ActionButton.tsx b/components/ActionButton.tsx index 84a6018..d761fff 100644 --- a/components/ActionButton.tsx +++ b/components/ActionButton.tsx @@ -1,9 +1,9 @@ -import styles from '@components/ActionButton.module.scss'; - import * as React from 'react'; +import clsx from 'clsx'; + import * as Utilities from '@common/utilities'; -interface ActionButtonProps { +export interface ActionButtonProps { onClick?: () => void; hotkey?: any; children?: React.ReactNode; @@ -12,11 +12,18 @@ interface ActionButtonProps { isSelected?: boolean; } -const ActionButton = React.forwardRef(({ onClick, hotkey, children, style, rootStyle, isSelected }, ref) => { +const styles = { + root: "inline-flex items-center justify-between cursor-pointer outline-0 border-0 m-0 p-0 box-border font-[var(--font-family-mono)] text-[var(--font-size)] flex-shrink-0", + hotkey: "bg-[var(--theme-button-foreground)] text-[var(--theme-text)] cursor-pointer flex-shrink-0 font-normal px-[1ch] text-indent-0 select-none group-hover:bg-[var(--theme-focused-foreground)] group-focus:bg-[var(--theme-focused-foreground)]", + content: "bg-[var(--theme-button-background)] shadow-[inset_0_0_0_2px_var(--theme-button-foreground)] cursor-pointer flex-shrink-0 font-normal px-[1ch] text-indent-0 uppercase select-none group-hover:shadow-[inset_0_0_0_2px_var(--theme-focused-foreground)] group-focus:shadow-[inset_0_0_0_2px_var(--theme-focused-foreground)]", + selected: "bg-[var(--theme-focused-foreground)]" +}; + +export const ActionButton = React.forwardRef(({ onClick, hotkey, children, style, rootStyle, isSelected }, ref) => { return ( -
+
{Utilities.isEmpty(hotkey) ? null : {hotkey}} - + {children}
diff --git a/components/ActionListItem.module.scss b/components/ActionListItem.module.scss deleted file mode 100644 index fd183a0..0000000 --- a/components/ActionListItem.module.scss +++ /dev/null @@ -1,52 +0,0 @@ -.item { - align-items: flex-start; - background: transparent; - color: var(--theme-text); - cursor: pointer; - display: flex; - justify-content: space-between; - outline: 0; - border: 0; - text-decoration: none; - - &:visited { - background: transparent; - color: var(--theme-text); - } - - &:hover { - background: transparent; - color: var(--theme-text); - } - - &:hover .icon { - background: var(--theme-focused-foreground); - } - - &:focus .icon { - background: var(--theme-focused-foreground); - } -} - -.icon { - align-items: center; - background: var(--theme-button-foreground); - display: inline-flex; - flex-shrink: 0; - height: calc(var(--font-size) * var(--theme-line-height-base)); - justify-content: center; - width: 3ch; - user-select: none; -} - -.text { - align-items: center; - align-self: stretch; - background: var(--theme-button-background); - display: inline-flex; - justify-content: flex-start; - min-width: 10%; - padding: 0 1ch 0 1ch; - user-select: none; - width: 100%; -} diff --git a/components/ActionListItem.tsx b/components/ActionListItem.tsx index 6bee1f8..75ae192 100644 --- a/components/ActionListItem.tsx +++ b/components/ActionListItem.tsx @@ -1,8 +1,12 @@ -import styles from '@components/ActionListItem.module.scss'; - import * as React from 'react'; -interface ActionListItemProps { +const styles = { + item: "flex items-center justify-between bg-transparent text-[var(--theme-text)] cursor-pointer outline-0 border-0 no-underline group !no-underline h-[calc(var(--theme-line-height-base)*1rem)]", + icon: "flex items-center justify-center bg-[var(--theme-button-foreground)] flex-shrink-0 w-[3ch] h-full select-none group-hover:bg-[var(--theme-focused-foreground)] group-focus:bg-[var(--theme-focused-foreground)]", + text: "inline-flex items-center justify-start bg-[var(--theme-button-background)] min-w-[10%] w-full px-[1ch] select-none h-full" +}; + +export interface ActionListItemProps { style?: React.CSSProperties; icon?: React.ReactNode; children?: React.ReactNode; @@ -11,7 +15,7 @@ interface ActionListItemProps { onClick?: React.MouseEventHandler; } -const ActionListItem: React.FC = (props) => { +export const ActionListItem: React.FC = (props) => { const { href, target, onClick, children, icon, style } = props; if (href) { diff --git a/components/AlertBanner.module.scss b/components/AlertBanner.module.scss deleted file mode 100644 index 228be57..0000000 --- a/components/AlertBanner.module.scss +++ /dev/null @@ -1,7 +0,0 @@ -.root { - display: block; - background: var(--theme-border); - box-shadow: 1ch 1ch 0 0 var(--theme-border-subdued); - padding: calc(var(--font-size) * var(--theme-line-height-base)) 2ch calc(var(--font-size) * var(--theme-line-height-base)) 2ch; - font-weight: 400; -} diff --git a/components/AlertBanner.tsx b/components/AlertBanner.tsx index fd46436..48f04c0 100644 --- a/components/AlertBanner.tsx +++ b/components/AlertBanner.tsx @@ -1,16 +1,19 @@ -import styles from '@components/AlertBanner.module.scss'; - import * as React from 'react'; +import clsx from 'clsx'; + +const styles = { + root: "block bg-[var(--theme-border)] shadow-[1ch_1ch_0_0_var(--theme-border-subdued)] px-[2ch] py-[calc(var(--font-size)*var(--theme-line-height-base))] font-normal" +}; -interface AlertBannerProps { +export interface AlertBannerProps { style?: any; children?: any; } -const AlertBanner: React.FC = ({ style: propStyle, ...rest }) => { +export const AlertBanner: React.FC = ({ style: propStyle, ...rest }) => { let style: React.CSSProperties = { ...propStyle }; - return
; + return
; }; export default AlertBanner; diff --git a/components/Avatar.module.scss b/components/Avatar.module.scss deleted file mode 100644 index 29ffc8d..0000000 --- a/components/Avatar.module.scss +++ /dev/null @@ -1,119 +0,0 @@ -.parent { - display: flex; - align-items: flex-start; - justify-content: space-between; -} - -.placeholder { - background: var(--theme-border); - display: inline-block; - width: 4ch; - height: calc(var(--font-size) * var(--theme-line-height-base) * 2); - vertical-align: bottom; - flex-shrink: 0; - position: relative; - - &:hover { - &::before { - content: ''; - top: 0; - left: 0; - right: 0; - bottom: 0; - position: absolute; - pointer-events: none; - opacity: 0.5; - background: var(--theme-focused-foreground); - } - } -} - -.root { - background: unset; - background-size: cover; - background-position: 50% 50%; - background-repeat: no-repeat; - display: inline-block; - width: 4ch; - height: calc(var(--font-size) * var(--theme-line-height-base) * 2); - vertical-align: bottom; - flex-shrink: 0; - position: relative; - - &:hover { - background: unset; - background-size: cover; - background-position: 50% 50%; - background-repeat: no-repeat; - &::before { - content: ''; - top: 0; - left: 0; - right: 0; - bottom: 0; - position: absolute; - pointer-events: none; - opacity: 0.5; - background: var(--theme-focused-foreground); - } - } -} - -a { - &.root { - background: unset; - background-size: cover; - background-position: 50% 50%; - background-repeat: no-repeat; - display: inline-block; - width: 4ch; - height: calc(var(--font-size) * var(--theme-line-height-base) * 2); - vertical-align: bottom; - flex-shrink: 0; - position: relative; - - &:hover { - background: unset; - background-size: cover; - background-position: 50% 50%; - background-repeat: no-repeat; - &::before { - content: ''; - top: 0; - left: 0; - right: 0; - bottom: 0; - position: absolute; - pointer-events: none; - opacity: 0.5; - background: var(--theme-focused-foreground); - } - } - - &:focus { - background: unset; - background-size: cover; - background-position: 50% 50%; - background-repeat: no-repeat; - outline: 0; - - &::before { - content: ''; - top: 0; - left: 0; - right: 0; - bottom: 0; - position: absolute; - pointer-events: none; - opacity: 0.5; - background: var(--theme-focused-foreground); - } - } - } -} - -.right { - min-width: 10%; - width: 100%; - background: var(--theme-foreground); -} diff --git a/components/Avatar.tsx b/components/Avatar.tsx index ad03d2f..53dc013 100644 --- a/components/Avatar.tsx +++ b/components/Avatar.tsx @@ -1,9 +1,15 @@ -import styles from '@components/Avatar.module.scss'; - import * as React from 'react'; -import * as Utilities from '@common/utilities'; +import clsx from 'clsx'; + +const styles = { + parent: "flex items-start justify-between", + placeholder: "bg-[var(--theme-border)] inline-block w-[4ch] h-[calc(var(--font-size)*var(--theme-line-height-base)*2)] align-bottom flex-shrink-0 relative hover:before:content-[''] hover:before:absolute hover:before:inset-0 hover:before:pointer-events-none hover:before:opacity-50 hover:before:bg-[var(--theme-focused-foreground)]", + root: "inline-block w-[4ch] h-[calc(var(--font-size)*var(--theme-line-height-base)*2)] align-bottom flex-shrink-0 relative hover:before:content-[''] hover:before:absolute hover:before:inset-0 hover:before:pointer-events-none hover:before:opacity-50 hover:before:bg-[var(--theme-focused-foreground)]", + link: "inline-block w-[4ch] h-[calc(var(--font-size)*var(--theme-line-height-base)*2)] align-bottom flex-shrink-0 relative hover:before:content-[''] hover:before:absolute hover:before:inset-0 hover:before:pointer-events-none hover:before:opacity-50 hover:before:bg-[var(--theme-focused-foreground)] focus:outline-0", + right: "min-w-[10%] w-full bg-[var(--theme-foreground)]" +}; -interface AvatarProps extends Omit, 'style' | 'className' | 'children'> { +export interface AvatarProps extends Omit, 'style' | 'className' | 'children'> { src?: string; href?: string; target?: string; @@ -11,19 +17,24 @@ interface AvatarProps extends Omit, 'style' children?: React.ReactNode; } -const Avatar: React.FC = (props) => { +export const Avatar: React.FC = (props) => { const { src, style: propStyle, href, target, children, ...rest } = props; - const backgroundStyle = src ? { backgroundImage: `url(${src})` } : {}; + const backgroundStyle = src ? { + backgroundImage: `url(${src})`, + backgroundSize: '100% 100%', + backgroundPosition: '0 0', + backgroundRepeat: 'no-repeat' + } : {}; const combinedStyle = { ...propStyle, ...backgroundStyle }; let avatarElement: React.ReactElement; if (href) { - avatarElement = ; + avatarElement = ; } else { - avatarElement =
; + avatarElement =
; } if (!children) { diff --git a/components/Badge.module.scss b/components/Badge.module.scss deleted file mode 100644 index 605c33c..0000000 --- a/components/Badge.module.scss +++ /dev/null @@ -1,15 +0,0 @@ -.root { - display: inline-block; - vertical-align: top; - text-align: center; - font-weight: 400; - margin: 0; - outline: 0; - border: 0; - font-family: var(--font-family-mono); - min-height: calc(var(--theme-line-height-base) * var(--font-size)); - text-transform: uppercase; - transition: 200ms ease all; - background: var(--theme-border); - padding: 0 1ch 0 1ch; -} diff --git a/components/Badge.tsx b/components/Badge.tsx index a8e078c..0302ea5 100644 --- a/components/Badge.tsx +++ b/components/Badge.tsx @@ -1,14 +1,17 @@ 'use client'; -import styles from '@components/Badge.module.scss'; - import * as React from 'react'; +import clsx from 'clsx'; + +const styles = { + root: clsx("inline-block align-top text-center font-normal m-0 outline-0 border-0 font-[var(--font-family-mono)] min-h-[calc(var(--theme-line-height-base)*var(--font-size))] uppercase transition-all duration-200 ease bg-[var(--theme-border)] px-[1ch] py-0") +}; -interface BadgeProps extends React.HTMLAttributes { +export interface BadgeProps extends React.HTMLAttributes { children?: React.ReactNode; } -const Badge: React.FC = ({ children, ...rest }) => { +export const Badge: React.FC = ({ children, ...rest }) => { return ( {children} diff --git a/components/BarLoader.module.scss b/components/BarLoader.module.scss deleted file mode 100644 index c32eec0..0000000 --- a/components/BarLoader.module.scss +++ /dev/null @@ -1,15 +0,0 @@ -.root { - background: var(--theme-border); - height: calc(var(--font-size) * var(--theme-line-height-base)); - white-space: nowrap; - text-align: left; - vertical-align: bottom; - display: block; -} - -.bar { - background: linear-gradient(to right, transparent, var(--theme-text)); - height: 100%; - width: 0%; - transition: width 0.1s linear; -} diff --git a/components/BarLoader.tsx b/components/BarLoader.tsx index 007599c..9d2b203 100644 --- a/components/BarLoader.tsx +++ b/components/BarLoader.tsx @@ -1,15 +1,19 @@ 'use client'; import * as React from 'react'; +import clsx from 'clsx'; -import styles from '@components/BarLoader.module.scss'; +const styles = { + root: clsx("bg-[var(--theme-border)] h-[calc(var(--font-size)*var(--theme-line-height-base))] whitespace-nowrap text-left align-bottom block"), + bar: clsx("bg-[linear-gradient(to_right,transparent,var(--theme-text))] h-full w-0 transition-[width] duration-100 linear") +}; -interface BarLoaderProps { +export interface BarLoaderProps { intervalRate?: number; progress?: number; } -const BarLoader: React.FC = ({ intervalRate, progress }) => { +export const BarLoader: React.FC = ({ intervalRate, progress }) => { const [currentProgress, setCurrentProgress] = React.useState(progress || 0); React.useEffect(() => { diff --git a/components/BarProgress.module.scss b/components/BarProgress.module.scss deleted file mode 100644 index bbb659e..0000000 --- a/components/BarProgress.module.scss +++ /dev/null @@ -1,15 +0,0 @@ -.root { - display: block; - background: var(--theme-border-subdued); - white-space: nowrap; - text-align: left; - vertical-align: bottom; - overflow: hidden; - position: relative; -} - -.measure { - visibility: hidden; - position: absolute; - pointer-events: none; -} diff --git a/components/BarProgress.tsx b/components/BarProgress.tsx index b79ab0c..ebad71f 100644 --- a/components/BarProgress.tsx +++ b/components/BarProgress.tsx @@ -1,16 +1,21 @@ 'use client'; -import styles from '@components/BarProgress.module.scss'; +import clsx from 'clsx'; import * as React from 'react'; -interface BarProgressProps { +const styles = { + root: clsx("block bg-[var(--theme-border-subdued)] whitespace-nowrap text-left align-bottom overflow-hidden relative"), + measure: clsx("invisible absolute pointer-events-none") +}; + +export interface BarProgressProps { intervalRate?: number; progress?: number; fillChar?: string; } -const BarProgress: React.FC = ({ intervalRate, progress, fillChar = '░' }) => { +export const BarProgress: React.FC = ({ intervalRate, progress, fillChar = '░' }) => { const [currentProgress, setCurrentProgress] = React.useState(progress ?? 0); const [containerWidth, setContainerWidth] = React.useState(0); const [charWidth, setCharWidth] = React.useState(0); diff --git a/components/Block.module.scss b/components/Block.module.scss deleted file mode 100644 index f5c3988..0000000 --- a/components/Block.module.scss +++ /dev/null @@ -1,8 +0,0 @@ -.block { - display: inline-block; - width: 1ch; - background: var(--theme-text); - height: calc(var(--font-size) * var(--theme-line-height-base)); - vertical-align: bottom; - flex-shrink: 0; -} diff --git a/components/Block.tsx b/components/Block.tsx index 380fd34..874f18d 100644 --- a/components/Block.tsx +++ b/components/Block.tsx @@ -1,12 +1,15 @@ -import styles from '@components/Block.module.scss'; - import * as React from 'react'; +import clsx from 'clsx'; + +const styles = { + block: clsx("inline-block w-[1ch] bg-[var(--theme-text)] h-[calc(var(--font-size)*var(--theme-line-height-base))] align-bottom flex-shrink-0") +}; -interface BlockProps extends React.HTMLAttributes { +export interface BlockProps extends React.HTMLAttributes { children?: React.ReactNode; } -const Block: React.FC = ({ children, ...rest }) => { +export const Block: React.FC = ({ children, ...rest }) => { return ( {children} diff --git a/components/BlockLoader.module.scss b/components/BlockLoader.module.scss deleted file mode 100644 index 354762d..0000000 --- a/components/BlockLoader.module.scss +++ /dev/null @@ -1,7 +0,0 @@ -.root { - display: inline-block; - width: 1ch; - color: inherit; - height: calc(var(--font-size) * var(--theme-line-height-base)); - vertical-align: bottom; -} diff --git a/components/BlockLoader.tsx b/components/BlockLoader.tsx index f167422..ad3b4d3 100644 --- a/components/BlockLoader.tsx +++ b/components/BlockLoader.tsx @@ -1,8 +1,11 @@ 'use client'; -import styles from '@components/BlockLoader.module.scss'; - import * as React from 'react'; +import clsx from 'clsx'; + +const styles = { + root: clsx("inline-block w-[1ch] text-inherit h-[calc(var(--font-size)*var(--theme-line-height-base))] align-bottom") +}; const SEQUENCES = [ ['⠁', '⠂', '⠄', '⡀', '⢀', '⠠', '⠐', '⠈'], @@ -18,13 +21,13 @@ const SEQUENCES = [ ['◐', '◓', '◑', '◒'], ]; -interface BlockLoaderProps extends Omit, 'children'> { +export interface BlockLoaderProps extends Omit, 'children'> { mode?: number; } -const BlockLoader: React.FC = ({ mode = 0 }) => { +export const BlockLoader: React.FC = ({ mode = 0 }) => { if (!SEQUENCES[mode]) { - return �; + return �; } const [index, setIndex] = React.useState(0); diff --git a/components/BreadCrumbs.module.scss b/components/BreadCrumbs.module.scss deleted file mode 100644 index 90fb1b7..0000000 --- a/components/BreadCrumbs.module.scss +++ /dev/null @@ -1,36 +0,0 @@ -.root { - display: inline-block; -} - -.line { - display: inline-block; - line-height: calc(var(--theme-line-height-base) * 1rem); -} - -.link { - display: inline-block; - color: var(--theme-text); - outline: 0; - border: 0; - text-decoration: none; - background: var(--theme-border); - - &:hover { - color: var(--theme-text); - background: var(--theme-focused-foreground); - } - - &:visited { - color: var(--theme-text); - } - - &:focus { - background: var(--theme-focused-foreground); - } -} - -.symbol { - min-width: 1ch; - display: inline-block; - margin: 0 1ch 0 1ch; -} \ No newline at end of file diff --git a/components/BreadCrumbs.tsx b/components/BreadCrumbs.tsx index 68f7c93..6327782 100644 --- a/components/BreadCrumbs.tsx +++ b/components/BreadCrumbs.tsx @@ -1,17 +1,23 @@ -import styles from '@components/BreadCrumbs.module.scss'; - import * as React from 'react'; +import clsx from 'clsx'; + +const styles = { + root: clsx("inline-block"), + line: clsx("inline-block leading-[calc(var(--theme-line-height-base)*1rem)]"), + link: clsx("inline-block text-[var(--theme-text)] outline-0 border-0 !no-underline bg-[var(--theme-border)] hover:text-[var(--theme-text)] hover:bg-[var(--theme-focused-foreground)] visited:text-[var(--theme-text)] focus:bg-[var(--theme-focused-foreground)]"), + symbol: clsx("inline-block mx-[9px] my-0") +}; -interface BreadCrumbsItem { +export interface BreadCrumbsItem { url?: string; name: string; } -interface BreadCrumbsProps { +export interface BreadCrumbsProps { items: BreadCrumbsItem[]; } -const BreadCrumbs: React.FC = ({ items }) => { +export const BreadCrumbs: React.FC = ({ items }) => { return (