diff --git a/app/(subpages)/blog/[slug]/opengraph-image.tsx b/app/(subpages)/blog/[slug]/opengraph-image.tsx index 01574779..d0bc3aac 100644 --- a/app/(subpages)/blog/[slug]/opengraph-image.tsx +++ b/app/(subpages)/blog/[slug]/opengraph-image.tsx @@ -4,10 +4,8 @@ export const size = { width: 1200, height: 600 } // TODO: update to support alt once nextjs has a solution for params export const alt = '' export const contentType = 'image/png' +export const runtime = 'edge' -export const config = { - runtime: 'edge', -} // eslint-disable-next-line import/no-anonymous-default-export export default async function ({ diff --git a/app/(subpages)/blog/layout.tsx b/app/(subpages)/blog/layout.tsx index 86db7824..8764364f 100644 --- a/app/(subpages)/blog/layout.tsx +++ b/app/(subpages)/blog/layout.tsx @@ -19,5 +19,3 @@ export default function BlogLayout({ ) } - -export const config = { runtime: 'experimental-edge' } diff --git a/app/(subpages)/components/page.module.css b/app/(subpages)/components/page.module.css new file mode 100644 index 00000000..ced439fb --- /dev/null +++ b/app/(subpages)/components/page.module.css @@ -0,0 +1,17 @@ +.wrapper { + display: flex; + flex-direction: column; + gap: var(--gap); + + section { + margin-bottom: var(--gap); + } + + ul { + padding: 0; + } + + h2 { + margin: 0; + } +} diff --git a/app/(subpages)/components/page.tsx b/app/(subpages)/components/page.tsx new file mode 100644 index 00000000..fca5ddab --- /dev/null +++ b/app/(subpages)/components/page.tsx @@ -0,0 +1,110 @@ +import Badge from '@components/badge' +import Button from '@components/button' +import { GitHub } from '@components/icons' +import Link from '@components/link' +import styles from './page.module.css' +import * as FileTree from '@components/file-tree' +import { Entry } from '@components/entry' +import BlockEntry from '@components/entry/block' +import Tooltip from '@components/tooltip' +import { Metadata } from 'next' + +export const metadata: Metadata = { + title: 'Components', + description: 'A collection of components on this website.', + robots: { + index: false, + }, +} + +export default function ComponentsPage() { + return ( +
+

Components

+

+ This page is a collection of components on this website. I use many of + them in my other projects as well. Feel free to take what you need. +

+ +

Button

+ + + +
+ +

Icon

+

+ {' '} + SVG Icons largely from{' '} + Feather Icons{' '} +

+ +
+ +

Link

+ + A Link + + No underline + +
+ +

Badge

+ A badge +
+ +

File tree

+ + + + + + + + + + +
+ +

Entries

+

Regular

+ +

Block

+ +

Skeleton

+ +
+ +

Tooltip

+ Hover me +
+
+ ) +} + +const ExampleWrapper = ({ children }: { children: React.ReactNode }) => ( +
{children}
+) diff --git a/app/components/badge/index.tsx b/app/components/badge/index.tsx index 605cbc6e..a83b772e 100644 --- a/app/components/badge/index.tsx +++ b/app/components/badge/index.tsx @@ -6,11 +6,12 @@ type Props = React.DetailedHTMLProps< HTMLDivElement > & { children: ReactNode + width?: string | number } -const Badge = ({ children, className }: Props) => { +const Badge = ({ children, className, width }: Props) => { return ( -
+
{children}
) diff --git a/app/components/button/index.tsx b/app/components/button/index.tsx index 747425c9..b24acac7 100644 --- a/app/components/button/index.tsx +++ b/app/components/button/index.tsx @@ -1,40 +1,87 @@ -import styles from './button.module.css' -import { forwardRef, Ref } from 'react' +import styles from "./button.module.css" +import { forwardRef } from "react" +import clsx from "clsx" +import { Spinner } from "@components/spinner" -type Props = React.HTMLProps & { - onClick?: () => void - children: React.ReactNode - disabled?: boolean - width?: number - height?: number +type Props = React.DetailedHTMLProps< + React.ButtonHTMLAttributes, + HTMLButtonElement +> & { + children?: React.ReactNode + buttonType?: "primary" | "secondary" + className?: string + // eslint-disable-next-line no-unused-vars + onClick?: (e: React.MouseEvent) => void + iconRight?: React.ReactNode + iconLeft?: React.ReactNode + height?: string | number + width?: string | number + padding?: string | number + margin?: string | number + loading?: boolean } // eslint-disable-next-line react/display-name -const Button = forwardRef( - ( - { onClick, children, disabled, width, height, ...props }: Props, - ref: Ref - ) => { - return ( - - ) - } +const Button = forwardRef( + ( + { + children, + onClick, + className, + buttonType = "secondary", + disabled = false, + iconRight, + iconLeft, + height = 40, + width, + padding = 10, + margin, + loading, + style, + ...props + }, + ref + ) => { + return ( + + ) + } ) export default Button diff --git a/app/components/entry/block.tsx b/app/components/entry/block.tsx index 9e168830..e7fcc5da 100644 --- a/app/components/entry/block.tsx +++ b/app/components/entry/block.tsx @@ -26,7 +26,7 @@ const BlockEntry = (props: Props) => { href={href} title={description || title} className={styles.link} - underline + underline={false} scroll={true} > {type &&
{type}
} diff --git a/app/components/file-tree/file-tree.module.css b/app/components/file-tree/file-tree.module.css index 7638f06e..a9ffc08d 100644 --- a/app/components/file-tree/file-tree.module.css +++ b/app/components/file-tree/file-tree.module.css @@ -32,6 +32,8 @@ .folder { cursor: pointer; + /* To avoid highlighting on double clicking */ + user-select: none; } .folder-children { diff --git a/app/components/ie-or-css/index.tsx b/app/components/ie-or-css/index.tsx index 3c339676..50e80274 100644 --- a/app/components/ie-or-css/index.tsx +++ b/app/components/ie-or-css/index.tsx @@ -23,7 +23,7 @@ export type IEQuizProps = { export const UselessButton = ({ text }: { text: string }) => (