From 4a04893dd1207976a6a5d74965e5443edfd5a416 Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Thu, 29 Sep 2022 19:02:15 +0100
Subject: [PATCH] feat: import button description

---
 src/components/dashboard/PagesManager.tsx | 124 ++++++++++++----------
 1 file changed, 65 insertions(+), 59 deletions(-)

diff --git a/src/components/dashboard/PagesManager.tsx b/src/components/dashboard/PagesManager.tsx
index 76d8b681..84d00c42 100644
--- a/src/components/dashboard/PagesManager.tsx
+++ b/src/components/dashboard/PagesManager.tsx
@@ -23,6 +23,7 @@ import { Button } from "../ui/Button"
 import { UniLink } from "../ui/UniLink"
 import { nanoid } from "nanoid"
 import { renderPageContent } from "~/markdown"
+import { Tooltip } from "../ui/Tooltip"
 
 export const PagesManager: React.FC<{
   isPost: boolean
@@ -269,66 +270,71 @@ export const PagesManager: React.FC<{
               </svg>
               <span>New {isPost ? "Post" : "Page"}</span>
             </Button>
-            <Button
-              className={clsx(`space-x-2 inline-flex`)}
-              onClick={() => {
-                const input = document.createElement("input")
-                input.type = "file"
-                input.accept = "text/markdown"
-                input.addEventListener("change", async (e: any) => {
-                  const file = e.target?.files?.[0]
-                  const reader = new FileReader()
-                  reader.readAsText(file, "UTF-8")
-                  reader.onload = (evt) => {
-                    if (evt.target?.result) {
-                      const pageContent = renderPageContent(
-                        evt.target.result as string,
-                      )
-
-                      const id = nanoid()
-                      const key = `draft-${subdomain}-local-${id}`
-                      const tags =
-                        pageContent.frontMatter.tags ||
-                        pageContent.frontMatter.categories
-                      setStorage(key, {
-                        date: +new Date(),
-                        values: {
-                          content: evt.target.result,
-                          published: false,
-                          publishedAt: (
-                            pageContent.frontMatter.date ||
-                            file.lastModifiedDate ||
-                            new Date()
-                          ).toISOString(),
-                          slug:
-                            pageContent.frontMatter.permalink ||
-                            file.name.split(".").slice(0, -1).join("."),
-                          tags: tags?.join?.(", ") || tags,
-                          title: pageContent.frontMatter.title,
-                        },
-                        isPost: isPost,
-                      })
-                      queryClient.invalidateQueries([
-                        "getPagesBySite",
-                        subdomain,
-                      ])
-                      router.push(
-                        `/dashboard/${subdomain}/editor?id=local-${id}&type=${
-                          isPost ? "post" : "page"
-                        }`,
-                      )
-                    }
-                  }
-                  reader.onerror = (evt) => {
-                    toast.error("Error reading file")
-                  }
-                })
-                input.click()
-              }}
+            <Tooltip
+              label="Import markdown file with front matter supported"
+              placement="bottom"
             >
-              <span className="i-bxs:duplicate inline-block"></span>
-              <span>Import</span>
-            </Button>
+              <Button
+                className={clsx(`space-x-2 inline-flex`)}
+                onClick={() => {
+                  const input = document.createElement("input")
+                  input.type = "file"
+                  input.accept = ".md"
+                  input.addEventListener("change", async (e: any) => {
+                    const file = e.target?.files?.[0]
+                    const reader = new FileReader()
+                    reader.readAsText(file, "UTF-8")
+                    reader.onload = (evt) => {
+                      if (evt.target?.result) {
+                        const pageContent = renderPageContent(
+                          evt.target.result as string,
+                        )
+
+                        const id = nanoid()
+                        const key = `draft-${subdomain}-local-${id}`
+                        const tags =
+                          pageContent.frontMatter.tags ||
+                          pageContent.frontMatter.categories
+                        setStorage(key, {
+                          date: +new Date(),
+                          values: {
+                            content: evt.target.result,
+                            published: false,
+                            publishedAt: (
+                              pageContent.frontMatter.date ||
+                              file.lastModifiedDate ||
+                              new Date()
+                            ).toISOString(),
+                            slug:
+                              pageContent.frontMatter.permalink ||
+                              file.name.split(".").slice(0, -1).join("."),
+                            tags: tags?.join?.(", ") || tags,
+                            title: pageContent.frontMatter.title,
+                          },
+                          isPost: isPost,
+                        })
+                        queryClient.invalidateQueries([
+                          "getPagesBySite",
+                          subdomain,
+                        ])
+                        router.push(
+                          `/dashboard/${subdomain}/editor?id=local-${id}&type=${
+                            isPost ? "post" : "page"
+                          }`,
+                        )
+                      }
+                    }
+                    reader.onerror = (evt) => {
+                      toast.error("Error reading file")
+                    }
+                  })
+                  input.click()
+                }}
+              >
+                <span className="i-bxs:duplicate inline-block"></span>
+                <span>Import</span>
+              </Button>
+            </Tooltip>
           </div>
         </div>
         <div className="text-sm text-zinc-500 leading-relaxed">