76 lines
2.8 KiB
TypeScript
76 lines
2.8 KiB
TypeScript
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>
|
|
);
|
|
};
|