93 lines
3.5 KiB
TypeScript
93 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import { Label } from "@/components/ui/label";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Mail } from "lucide-react";
|
|
import { ThemeSwitcher } from "@/components/theme-switcher";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { FaDiscord, FaGithub } from "react-icons/fa";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import {
|
|
discordInviteLink,
|
|
githubPublicLink,
|
|
feedbackFormLink,
|
|
} from "@/lib/data";
|
|
import { useMediaQuery } from "@/hooks/useMediaQuery";
|
|
|
|
export default function Footer() {
|
|
const pathname = usePathname();
|
|
const isHome = pathname.includes("/home");
|
|
const isMobile = useMediaQuery("(max-width: 768px)");
|
|
const isRoot = pathname === "/";
|
|
return (
|
|
<footer
|
|
className={`w-full ${
|
|
isHome ? "pb-16" : "pb-2"
|
|
} ${
|
|
isRoot ? "bg-gradient-to-r bg-purple-900 text-white border-transparent" : "border-gray-200"
|
|
} flex flex-col sm:flex-row items-center sm:justify-center border-t-[1px] mx-auto text-center text-xs sm:gap-8 sm:py-1 py-2`}
|
|
>
|
|
<div className="flex flex-row items-center gap-8">
|
|
<a href={feedbackFormLink} target="_blank">
|
|
<Button
|
|
variant="link"
|
|
size="sm"
|
|
className="font-normal text-grey-700 text-xs"
|
|
aria-label="Mail"
|
|
>
|
|
<Mail size={18} className="mr-2" />
|
|
Send feedback
|
|
</Button>
|
|
</a>
|
|
<Label className={`font-normal text-xs ${isRoot ? "text-gray-100" : "text-gray-500"}`}>
|
|
Elato AI © {new Date().getFullYear()} All rights
|
|
reserved.
|
|
</Label>
|
|
</div>
|
|
{/* <Separator orientation="vertical" /> */}
|
|
<div
|
|
className={`flex-row items-center gap-8 ${
|
|
isHome && isMobile ? "hidden" : "flex"
|
|
}`}
|
|
>
|
|
<div className="flex flex-row items-center gap-2">
|
|
<Link href={githubPublicLink} passHref>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className={`w-7 h-7 ${isRoot ? "text-gray-100" : "text-gray-500"}`}
|
|
>
|
|
<FaGithub />
|
|
</Button>
|
|
</Link>
|
|
<Link href={discordInviteLink} passHref>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className={`w-7 h-7 ${isRoot ? "text-gray-100" : "text-gray-500"}`}
|
|
>
|
|
<FaDiscord />
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
|
|
<a
|
|
href="/privacy"
|
|
className={`font-normal underline ${isRoot ? "text-gray-100" : "text-gray-500"} text-xs`}
|
|
>
|
|
Privacy Policy
|
|
</a>
|
|
|
|
<a
|
|
href="/terms"
|
|
className={`font-normal underline ${isRoot ? "text-gray-100" : "text-gray-500"} text-xs`}
|
|
>
|
|
Terms of Service
|
|
</a>
|
|
</div>
|
|
|
|
{/* <ThemeSwitcher /> */}
|
|
</footer>
|
|
);
|
|
}
|