Merge pull request #119 from times-yasunori/search

Awesome Yasunori 検索

packages/web/app/components/yasunori-spotlight/index.tsx

@@ -0,0 +1,47 @@
+import { ActionIcon, rem } from "@mantine/core";
+import {
+  Spotlight,
+  type SpotlightActionData,
+  spotlight,
+} from "@mantine/spotlight";
+import { useNavigate, useRouteLoaderData } from "@remix-run/react";
+import IconSearch from "~icons/tabler/search";
+import type { IndexLoader } from "../../routes/_index/loader";
+import "@mantine/spotlight/styles.css";
+
+export function YasunoriSpotlight() {
+  const navigate = useNavigate();
+  const data = useRouteLoaderData<IndexLoader>("routes/_index");
+  const actions: SpotlightActionData[] =
+    data?.map(({ id, title, content, senpan }) => {
+      return {
+        id: `${id}`,
+        label: `${title} #${id}`,
+        description:
+          content.length > 100
+            ? `${content.slice(0, 100)}… posted by ${senpan}`
+            : `${content} posted by ${senpan}`,
+        onClick: () => navigate(`/entries/${id}`),
+      };
+    }) ?? [];
+  return (
+    <>
+      <Spotlight
+        actions={actions}
+        nothingFound="Yasunori is yasunoried."
+        highlightQuery
+        scrollable
+        maxHeight={rem(500)}
+        searchProps={{
+          leftSection: (
+            <IconSearch style={{ width: rem(20), height: rem(20) }} />
+          ),
+          placeholder: "Search yasunories...",
+        }}
+      />
+      <ActionIcon variant="transparent" color="gray" onClick={spotlight.open}>
+        <IconSearch />
+      </ActionIcon>
+    </>
+  );
+}

packages/web/app/root.tsx

@@ -25,6 +25,7 @@ import "@mantine/core/styles.css";
 import { useDisclosure, useHeadroom } from "@mantine/hooks";
 import IconGitHubLogo from "~icons/tabler/brand-github";
 import IconRSS from "~icons/tabler/rss";
+import { YasunoriSpotlight } from "./components/yasunori-spotlight";
 import { useIsMobile } from "./hooks/use-is-mobile";
 import type { IndexLoader } from "./routes/_index/loader";
 
@@ -98,6 +99,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
                       </Title>
                     </Group>
                     <Group>
+                      <YasunoriSpotlight />
                       <ActionIcon
                         component="a"
                         aria-label="rss feed"

packages/web/package.json

@@ -18,6 +18,7 @@
     "@awesome-yasunori/api": "workspace:*",
     "@mantine/core": "^7.13.1",
     "@mantine/hooks": "^7.13.1",
+    "@mantine/spotlight": "^7.13.2",
     "@remix-run/cloudflare": "^2.13.1",
     "@remix-run/cloudflare-pages": "^2.13.1",
     "@remix-run/react": "^2.13.1",