Leaflet Blog in Deno Fresh
knotbin.com
1import { h } from "preact/src/index.d.ts";
2import { cx } from "../lib/cx.ts";
3
4export function Title({
5 level = "h1",
6 className,
7 ...props
8}: h.JSX.HTMLAttributes<HTMLHeadingElement> & {
9 level?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
10}) {
11 const Tag = level;
12
13 let style;
14 switch (level) {
15 case "h1":
16 style = "text-4xl lg:text-5xl";
17 break;
18 case "h2":
19 style = "border-b pb-2 text-3xl";
20 break;
21 case "h3":
22 style = "text-2xl";
23 break;
24 case "h4":
25 style = "text-xl";
26 break;
27 case "h5":
28 style = "text-lg";
29 break;
30 case "h6":
31 style = "text-base";
32 break;
33 }
34
35 return (
36 <Tag
37 className={cx(
38 "font-serif font-bold text-balance tracking-wide scroll-m-20 uppercase mt-8 [&>code]:text-[length:inherit] first:mt-0",
39 style,
40 className?.toString(),
41 )}
42 {...props}
43 />
44 );
45}
46
47export function Paragraph({
48 className,
49 ...props
50}: h.JSX.HTMLAttributes<HTMLParagraphElement>) {
51 return <p className={cx("font-sans text-pretty", className?.toString())} {...props} />;
52}
53
54export function Code({ className, ...props }: h.JSX.HTMLAttributes<HTMLElement>) {
55 return (
56 <code
57 className={cx(
58 "font-mono normal-case relative rounded-sm px-[0.3rem] py-[0.2rem] bg-slate-100 text-sm dark:bg-slate-800 dark:text-slate-100",
59 className?.toString(),
60 )}
61 {...props}
62 />
63 );
64}