diff --git a/site/pages/icons/[slug].js b/site/pages/icons/[slug].js
index 5dd0bf00..4e7635ed 100644
--- a/site/pages/icons/[slug].js
+++ b/site/pages/icons/[slug].js
@@ -1,17 +1,17 @@
import React from "react";
import matter from "gray-matter";
-import { Container } from "@mui/system";
import {
Box,
Button,
Card,
Chip,
- Divider,
- Grid,
+ Container,
IconButton,
Input,
+ Link,
Stack,
- Typography
+ Typography,
+ useColorScheme
} from "@mui/joy";
import Head from "next/head";
import ValkyrieIcon from "@sippy-platform/valkyrie";
@@ -19,6 +19,7 @@ import * as Icons from "@sippy-platform/valkyrie";
import NextLink from "next/link";
function PostTemplate({ data, slug }) {
+ const { mode, setMode } = useColorScheme();
const frontmatter = data;
const icon = `vi${slug
@@ -35,106 +36,138 @@ function PostTemplate({ data, slug }) {
-
-
-
-
-
-
-
- Valkyrie
-
-
-
-
- {frontmatter.title}
-
-
- {(frontmatter.categories || frontmatter.tags) && (
-
- {frontmatter.categories?.map(cat => (
-
- {cat}
-
- ))}
- {frontmatter.tags?.map(tag => (
- {tag}
- ))}
-
- )}
-
-
+
-
-
-
-
- Heading icon
+
+ Valkyrie
-
- Inline icon
-
-
- }>
- Button icon
-
-
-
-
+
+ setMode(
+ mode === "light" ? "dark" : mode === "dark" ? "system" : "light"
+ )
+ }
+ >
+
+
+
+
+
+
+
+ Icons
+ {" "}
+ {frontmatter.title}
+
+
+
+
+ {(frontmatter.categories || frontmatter.tags) && (
+
+ {frontmatter.categories?.map(cat => (
+
+ {cat}
+
+ ))}
+ {frontmatter.tags?.map(tag => (
+
+ {tag}
+
+ ))}
- }
- placeholder={frontmatter.title}
- />
-
-
-
-
-
- HTML
-
-
- {``}
+ )}
+
+
+
+
-
-
-
- React
-
-
- {``}
+
+
+ Heading icon
+
+
+ Inline icon
+
+
+ }>
+ Button icon
+
+
+
+
+
+ }
+ placeholder={frontmatter.title}
+ />
-
-
+
+
+
+
+ HTML
+
+
+ {``}
+
+
+
+
+ React
+
+
+ {``}
+
+
+
+
);
}
diff --git a/site/pages/index.js b/site/pages/index.js
index 9dcd6ce0..d2151831 100644
--- a/site/pages/index.js
+++ b/site/pages/index.js
@@ -1,14 +1,13 @@
import {
Box,
Container,
- Divider,
- Grid,
Link,
Input,
Typography,
Stack,
Sheet,
- IconButton
+ IconButton,
+ useColorScheme
} from "@mui/joy";
import Head from "next/head";
import fs from "fs";
@@ -49,6 +48,8 @@ export async function getStaticProps() {
}
export default function Home({ icons }) {
+ const { mode, setMode } = useColorScheme();
+
const [page, setPage] = useState(0);
const { result, needle, setNeedle } = useSearch(icons, [
@@ -58,133 +59,165 @@ export default function Home({ icons }) {
]);
return (
-
+
Valkyrie
-
-
+
- Valkyrie
-
-
-
-
- Icons
-
+
+ Valkyrie
+
+
+ setMode(
+ mode === "light" ? "dark" : mode === "dark" ? "system" : "light"
+ )
+ }
+ >
+
+
+
+
+
+
+ {result.length} icons
+
+
+ Page {page + 1} of {Math.ceil(result.length / 180)}
+
+
- }
- placeholder="Search"
- value={needle}
- onChange={e => {
- setNeedle(e.target.value);
- setPage(0);
+ }
+ placeholder="Search"
+ value={needle}
+ onChange={e => {
+ setNeedle(e.target.value);
+ setPage(0);
+ }}
+ />
+
+
+
-
-
- {result.slice(page * 42, (page + 1) * 42).map(({ slug, viIcon }) => (
-
- div > a > .MuiTypography-root": {
+ >
+ {result
+ .slice(page * 180, (page + 1) * 180)
+ .map(({ slug, viIcon }) => (
+ div > a > .MuiTypography-root": {
+ backgroundColor:
+ "rgba(var(--joy-palette-primary-mainChannel) / .125)"
+ }
}
- }
- }}
- >
-
- {Icons?.[viIcon] && (
-
- )}
-
-
+ )}
+
- {viIcon}
-
-
-
-
-
- ))}
-
-
+ {viIcon}
+
+
+
+
+ ))}
+
+
+
+ setPage(prev => prev - 1)}
+ disabled={page === 0}
>
- setPage(prev => prev - 1)}
- disabled={page === 0}
- >
-
-
-
- {page + 1}/{Math.ceil(result.length / 42)}
-
- setPage(prev => prev + 1)}
- disabled={page === Math.ceil(result.length / 42) - 1}
- >
-
-
-
-
-
+
+
+ setPage(prev => prev + 1)}
+ disabled={page === Math.ceil(result.length / 180) - 1}
+ >
+
+
+
+
);
}