move Picture to ui

src/components/Picture/index.tsx

@@ -1,55 +0,0 @@
-import s from "./picture.module.css"
-
-import { memo } from "react"
-import Image from "next/image"
-import { Pic } from "@/types"
-
-const modifiers = new Map([
-    ["square", s.square],
-    ["vertical", s.vertical],
-    ["horizontal", ""],
-])
-
-function size(w: number, h: number, tolerance: number) {
-    const r = w / h
-    if (r < 1 && r > tolerance) {
-        return "square"
-    }
-
-    if (w < h) {
-        return "vertical"
-    }
-
-    return "horizontal"
-}
-
-export type PictureProps = Pic & {
-    style?: React.CSSProperties
-    wide?: boolean
-}
-
-export const Picture: React.FC<PictureProps> = memo(({ wide = false, ...props }) => {
-    const ss = size(props.width, props.height, 0.95)
-    const layout = modifiers.get(ss)
-    const w = ss === "horizontal" ? wide : false
-
-    return (
-        <figure className={`${s.pic} ${layout} ${w ? s.wide : ""}`}>
-            <Image
-                className={s.img}
-                src={props.src}
-                alt={props.alt}
-                width={props.width}
-                height={props.height}
-                layout={"responsive"}
-                blurDataURL={props.blur}
-                placeholder={props.blur ? "blur": "empty"}
-            />
-            {!props.caption ? null : (
-                <figcaption>{props.caption}</figcaption>
-            )}
-        </figure>
-    )
-})
-
-Picture.displayName = "Picture"

src/components/Picture/picture.module.css

@@ -1,34 +0,0 @@
-.pic {
-    margin-bottom: var(--size-xl);
-}
-
-.pic.wide {
-    position: relative;
-    width: calc(100% + var(--picture-wide-increase));
-    margin-left: calc(-0.5 * var(--picture-wide-increase));
-}
-
-.pic.vertical {
-    max-width: 60%;
-}
-
-.pic.square {
-    max-width: 80%;
-}
-
-.img {
-    border-radius: var(--radius);
-
-    /* override nextjs blurred placeholder filter */
-    /* need for border radius */
-    filter: none !important;
-}
-
-.pic figcaption {
-    color: var(--color-text);
-    font-size: var(--font-size-second);
-    font-style: italic;
-    font-weight: 100;
-    padding-top: var(--size-xs);
-    text-align: center;
-}