feat(header): add guideline dialog

dninomiya · Apr 9, 2024 · 9e27bbe · 9e27bbe
1 parent e16f7da
commit 9e27bbe
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 1 deletion.
diff --git a/app/components/guide-dialog.tsx b/app/components/guide-dialog.tsx
@@ -0,0 +1,47 @@
+import { AppConfig } from '@/app.config';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Info } from 'lucide-react';
+
+export default function GuideDialog() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button size="icon" variant="outline">
+          <Info size={20} />
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>🔰 {AppConfig.title} について</DialogTitle>
+          <DialogDescription></DialogDescription>
+        </DialogHeader>
+        <p className="text-muted-foreground leading-relaxed">
+          素材やツールを使用する際は必ず対象のサイトで最新のライセンスを確認してください。また、記載された情報に間違いを発見したらお手数ですが
+          <a href={AppConfig.githubURL} target="_blank" className="underline">
+            GitHub
+          </a>
+          でご連絡ください。素材は
+          <a href={AppConfig.githubURL} target="_blank" className="underline">
+            GitHub
+          </a>
+          より誰でも自由に追加/リクエストできます。
+        </p>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">閉じる</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/app/components/header.tsx b/app/components/header.tsx
@@ -1,4 +1,5 @@
 import { AppConfig } from '@/app.config';
+import GuideDialog from '@/app/components/guide-dialog';
 import MobileNav from '@/app/components/mobile-nav';
 import { Button } from '@/components/ui/button';
 import { Pencil, PocketKnife } from 'lucide-react';
@@ -8,7 +9,7 @@ import { Suspense } from 'react';
 export default function Header() {
   return (
     <header className="border-b">
-      <div className="px-4 h-16 flex items-center gap-4">
+      <div className="px-4 h-16 flex items-center gap-2">
         <div className="lg:hidden">
           <Suspense>
             <MobileNav />
@@ -21,6 +22,7 @@ export default function Header() {
           </Link>
         </Button>
         <span className="flex-1" />
+        <GuideDialog />
         <Button asChild size="icon" variant="outline">
           <a href={AppConfig.githubURL} target="_blank">
             <span className="sr-only">GitHub で編集</span>