initial commit

components/utils/Footer.tsx

@@ -0,0 +1,75 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { RSSFeedLink } from "@/consts/consts";
+import { Config } from "@/data/config";
+import Link from "next/link";
+import { useState } from "react";
+import CopyToClipboard from "react-copy-to-clipboard";
+import { FaCheck, FaCopy } from "react-icons/fa";
+import { IoLogoRss } from "react-icons/io5";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { Separator } from "../ui/separator";
+
+export const Footer = () => {
+  const [isCopied, setIsCopied] = useState(false);
+  return (
+    <Dialog
+      onOpenChange={() => {
+        setIsCopied(false);
+      }}
+    >
+      <footer className="my-5 flex flex-col justify-center py-2 text-sm">
+        <div className="mx-auto px-3 text-center font-bold">{`COPYRIGHT © ${
+          Config.YearStart
+        }-${new Date().getFullYear()} ${Config.AuthorName} ALL RIGHTS RESERVED`}</div>
+        <div className="my-3 flex flex-wrap justify-center space-x-3 text-center text-gray-500 underline dark:text-gray-400">
+          <Link href="/sponsor" title="Sponsor me for my works.">
+            {"Sponsor"}
+          </Link>
+          <Link href="/friends" title="My friend links.">
+            {"Friends"}
+          </Link>
+          <DialogTrigger asChild>
+            <button title="Subscribe the RSS Feed.">{"Feed"}</button>
+          </DialogTrigger>
+        </div>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle className="flex">
+              <IoLogoRss className="mr-2 my-auto" />
+              {"RSS Feed"}
+            </DialogTitle>
+          </DialogHeader>
+
+          <div>
+            <div className="w-full text-sm my-2">
+              <div>
+                <b>NOTE: </b>Some RSS Feed Reader may has deficient in rendering SVG formulations, graphs. Such as the
+                Inoreader, Feedly. If it happens, please read the origin web page for better experience.
+              </div>
+            </div>
+            <Separator />
+            <div className="w-full flex my-3">
+              <Input defaultValue={RSSFeedLink} readOnly />
+              <CopyToClipboard
+                onCopy={() => {
+                  setIsCopied(true);
+                }}
+                text={RSSFeedLink}
+              >
+                <Button
+                  type="submit"
+                  size="sm"
+                  className={`ml-3 my-auto ${isCopied && "bg-green-500 hover:bg-green-500"}`}
+                >
+                  <span className="sr-only">{"Copy"}</span>
+                  {isCopied ? <FaCheck className="h-4 w-4" /> : <FaCopy className="h-4 w-4" />}
+                </Button>
+              </CopyToClipboard>
+            </div>
+          </div>
+        </DialogContent>
+      </footer>
+    </Dialog>
+  );
+};