-
- {
- tags.map((tag) => (
-
-
+ {tags.map((tag) => (
+
-
-
-- {tag.name} -
-記事数 : {articleCount}
-
+
+
+ + {tag.name} +
+記事数 : {articleCount}
+
+
+
+
+ )
+}
diff --git a/src/components/common/Heading1.preact.tsx b/src/components/common/Heading1.preact.tsx
new file mode 100644
index 0000000..071f8f4
--- /dev/null
+++ b/src/components/common/Heading1.preact.tsx
@@ -0,0 +1,24 @@
+import { unreachable } from '@/utils/unreachable'
+import type { ReactNode } from 'preact/compat'
+
+export default function Heading1({
+ children,
+ variant = 'primary',
+}: {
+ children: ReactNode
+ variant?: 'primary' | 'secondary'
+}) {
+ return (
+
+
+ {
+ if (e.currentTarget.value === '') setDisplayingTags(tags)
+ else
+ setDisplayingTags(
+ tags.filter((t) =>
+ t.name
+ .toLowerCase()
+ .includes(e.currentTarget.value.toLowerCase()),
+ ),
+ )
+ }}
+ />
+
+ + {children} +
+ ) +} diff --git a/src/components/common/Icon.preact.tsx b/src/components/common/Icon.preact.tsx new file mode 100644 index 0000000..f861845 --- /dev/null +++ b/src/components/common/Icon.preact.tsx @@ -0,0 +1,42 @@ +/** + * /assets/icons にあるアイコンを単色で表示する。 + * + * 色には現在の文字色（`currentColor`）が使われる。これはCSSの`color`で変更できる。 + * + * CSSで幅または高さを指定しないと、大きさが0pxとなり表示されない。 + * また、この要素は`
+ {title && (
+
+ {title}
+
+ )}
+
+ {children}
+