Leaflet Blog in Deno Fresh
knotbin.com
1import { h } from "preact";
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 tracking-wide scroll-m-20 uppercase mt-8 [&>code]:text-[length:inherit] first:mt-0 break-words text-wrap",
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 (
52 <p
53 className={cx("font-sans text-pretty", className?.toString())}
54 {...props}
55 />
56 );
57}
58
59export function Code({
60 className,
61 ...props
62}: h.JSX.HTMLAttributes<HTMLElement>) {
63 return (
64 <code
65 className={cx(
66 "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",
67 className?.toString(),
68 )}
69 {...props}
70 />
71 );
72}