Merge pull request #27 from ryoppippi/feature/copy

times-yasunori · Oct 3, 2024 · c4039be · c4039be
2 parents 19f1dc4 + 2a79b3a
commit c4039be
Show file tree

Hide file tree

Showing 5 changed files with 439 additions and 3 deletions.
diff --git a/packages/web/app/routes/_index/route.tsx b/packages/web/app/routes/_index/route.tsx
@@ -1,11 +1,24 @@
-import { Stack, Title, Card, Paper, Badge, Group } from "@mantine/core";
+import {
+  Stack,
+  Title,
+  Card,
+  Paper,
+  Badge,
+  Group,
+  CopyButton,
+  ActionIcon,
+  rem,
+} from "@mantine/core";
 import type { MetaFunction } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import remarkBreaks from "remark-breaks";
 import { indexLoader, type IndexLoader } from "./loader";
 
+import IconCheckBoxOutline from "~icons/material-symbols/check-rounded";
+import IconCopyOutline from "~icons/material-symbols/content-copy-outline-rounded";
+
 export const loader = indexLoader;
 export const meta: MetaFunction = () => {
   return [
@@ -38,7 +51,27 @@ export default function Index() {
               <Badge color="cyan">{d.date}</Badge>
             </Group>
           </Stack>
-          <Paper p="md">
+          <Paper p="md" style={{ position: "relative" }}>
+            <div style={{ position: "absolute", right: "0.5rem" }}>
+              <CopyButton value={d.content}>
+                {({ copied, copy }) => (
+                  <ActionIcon
+                    variant="default"
+                    style={{
+                      width: rem(32),
+                      height: rem(32),
+                    }}
+                    onClick={copy}
+                  >
+                    {copied ? (
+                      <IconCheckBoxOutline color="#000" />
+                    ) : (
+                      <IconCopyOutline color="#000" />
+                    )}
+                  </ActionIcon>
+                )}
+              </CopyButton>
+            </div>
             <Markdown remarkPlugins={[remarkBreaks, remarkGfm]}>
               {d.content}
             </Markdown>

diff --git a/packages/web/package.json b/packages/web/package.json
@@ -32,10 +32,14 @@
   "devDependencies": {
     "@biomejs/biome": "1.9.2",
     "@cloudflare/workers-types": "^4.20240925.0",
+    "@iconify-json/material-symbols": "^1.2.2",
     "@remix-run/dev": "^2.12.1",
+    "@svgr/core": "^8.1.0",
+    "@svgr/plugin-jsx": "^8.1.0",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "typescript": "^5.6.2",
+    "unplugin-icons": "^0.19.3",
     "vite": "^5.2.12",
     "vite-tsconfig-paths": "^5.0.1",
     "wrangler": "^3.79.0"