feat(ui): add acknowledgment section

electh · Jan 25, 2025 · ec1a4c6 · ec1a4c6
1 parent f1a7f58
commit ec1a4c6
Show file tree

Hide file tree

Showing 9 changed files with 606 additions and 484 deletions.
diff --git a/src/components/About/AboutModal.jsx b/src/components/About/AboutModal.jsx
@@ -2,22 +2,149 @@ import { useTranslation } from "react-i18next";
 import { useStore } from "@nanostores/react";
 import { aboutModalOpen } from "@/stores/modalStore";
 import { FancyLogo } from "@/components/About/FancyLogo.jsx";
-import CustomModal from "@/components/ui/CustomModal.jsx";
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalHeader,
+} from "@heroui/react";
+import { Heart, Info, X } from "lucide-react";
 
 export default function AboutModal() {
   const { t } = useTranslation();
   const $aboutModalOpen = useStore(aboutModalOpen);
 
   return (
-    <CustomModal
-      open={$aboutModalOpen}
-      onOpenChange={() => aboutModalOpen.set(false)}
-      title={t("about.title")}
-      content={
-        <div className="px-4 pb-4 space-y-6">
-          <FancyLogo since="2025"/>
-        </div>
-      }
-    />
+    <>
+      <Modal
+        isOpen={$aboutModalOpen}
+        radius="md"
+        scrollBehavior="inside"
+        onOpenChange={(value) => {
+          aboutModalOpen.set(value);
+        }}
+        classNames={{
+          base: "mb-safe-offset-2 mt-2 mx-2 max-h-[80vh] h-[612px] overflow-hidden dark:border",
+          header: "border-b flex flex-col gap-3 p-3 bg-content1",
+          footer: "hidden",
+          body: "modal-body p-0 !block",
+          closeButton: "hidden",
+        }}
+      >
+        <ModalContent>
+          {() => (
+            <>
+              <ModalHeader>
+                <div className="flex gap-2 justify-between">
+                  <div className="flex items-center gap-2">
+                    <Info className="size-4" />
+                    <span className="text-base font-medium">
+                      {t("about.title")}
+                    </span>
+                  </div>
+                  <Button
+                    size="sm"
+                    radius="full"
+                    variant="light"
+                    isIconOnly
+                    onPress={() => {
+                      aboutModalOpen.set(false);
+                    }}
+                  >
+                    <X className="size-4" />
+                  </Button>
+                </div>
+              </ModalHeader>
+              <ModalBody>
+                <div className="overflow-y-auto flex flex-col gap-4">
+                  <FancyLogo since={2025} />
+
+                  {/* Made with love section */}
+                  <div className="text-center text-default-500">
+                    Made with{" "}
+                    <span className="text-danger">
+                      <Heart className="size-3 fill-current inline-block" />
+                    </span>{" "}
+                    by{" "}
+                    <a
+                      href="https://github.com/electh"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-primary hover:underline"
+                    >
+                      electh
+                    </a>
+                  </div>
+
+                  {/* Acknowledgments section */}
+                  <div className="flex flex-col gap-2 items-center">
+                    {t("about.acknowledgments")}
+                    <div className="flex flex-col gap-0.5 items-center justify-center text-sm">
+                      <a
+                        href="https://reederapp.com"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-primary hover:underline"
+                      >
+                        Reeder
+                      </a>
+                      <a
+                        href="https://www.heroui.com"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-primary hover:underline"
+                      >
+                        HeroUI
+                      </a>
+                      <a
+                        href="https://tailwindcss.com"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-primary hover:underline"
+                      >
+                        TailwindCSS
+                      </a>
+                      <a
+                        href="https://www.vidstack.io"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-primary hover:underline"
+                      >
+                        Vidstack
+                      </a>
+                      <a
+                        href="https://react-photo-view.vercel.app"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-primary hover:underline"
+                      >
+                        React-photo-view
+                      </a>
+                      <a
+                        href="https://shiki.matsu.io"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-primary hover:underline"
+                      >
+                        Shiki
+                      </a>
+                      <a
+                        href="https://virtuoso.dev"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-primary hover:underline"
+                      >
+                        Virtuoso
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </ModalBody>
+            </>
+          )}
+        </ModalContent>
+      </Modal>
+    </>
   );
 }
diff --git a/src/components/About/FancyLogo.jsx b/src/components/About/FancyLogo.jsx
@@ -6,7 +6,7 @@ export const FancyLogo = ({ since }) => {
   const boundingRef = useRef(null);
 
   return (
-    <div className="flex flex-col [perspective:800px] p-5 bg-content2 rounded-md">
+    <div className="flex flex-col [perspective:800px] p-5 bg-content2">
       <div
         onMouseLeave={() => {
           boundingRef.current = null;
@@ -28,9 +28,13 @@ export const FancyLogo = ({ since }) => {
           ev.currentTarget.style.setProperty("--x", `${xPercentage * 100}%`);
           ev.currentTarget.style.setProperty("--y", `${yPercentage * 100}%`);
         }}
-        className="group relative w-full flex flex-col gap-6 py-6 items-center overflow-hidden rounded-md bg-gradient-to-b from-[#EAFFED] to-[#C6F7C9] p-4 text-[#01A977] transition-transform ease-out hover:[transform:rotateX(var(--x-rotation))_rotateY(var(--y-rotation))_scale(1.05)]"
+        className="group relative w-full flex flex-col gap-6 py-6 items-center overflow-hidden rounded-lg bg-gradient-to-b from-[#EAFFED] to-[#C6F7C9] p-4 text-[#01A977] transition-transform ease-out hover:[transform:rotateX(var(--x-rotation))_rotateY(var(--y-rotation))_scale(1.05)]"
       >
-        <Image src={logo} alt="logo" classNames={{ wrapper: "size-24", image: "aspect-square" }} />
+        <Image
+          src={logo}
+          alt="logo"
+          classNames={{ wrapper: "size-24", image: "aspect-square" }}
+        />
         <footer className="flex items-end">
           <span className="flex rounded-sm border border-current px-1 py-px text-xs uppercase">
             NEXTFLUX{" "}