+
+
+
+
+
+ {t("language")}
+
+ {/* button language */}
+
+
+
+ {/*
*/}
-
-
-
-
- {t("features")}
-
-
- {NAV_ITEMS.map((item) => (
-
- ))}
-
-
-
- {t("about")}
-
-
- {t("advertising")}
-
-
- {t("contact")}
-
+
+
+ {t("features")}
+
+
+ {NAV_ITEMS.map((item) => (
+
+ ))}
+
+
- {!isLoggedIn ? (
- <>
-
- {t("login")}
-
-
- {t("register")}
-
-
- ) : (
-
- )}
+ {t("about")}
+
+
+ {t("advertising")}
+
+
+ {t("contact")}
+
+
+ {!isLoggedIn ? (
+ <>
+
+ {t("login")}
+
+
+ {t("register")}
+
+
+ ) : (
+
+ )}
+
+
+
+
+ {t("subscribeTitle")}
+
+
+
+
-
-
- {t("subscribeTitle")}
-
-
-
-
+
setIsSidebarOpen(false)}
+ />
-
-
setIsSidebarOpen(false)}
- />
-
- )}
-
+ )}
+
+
);
}
diff --git a/components/main/content/image-detail.tsx b/components/main/content/image-detail.tsx
index 1da0258..2042faf 100644
--- a/components/main/content/image-detail.tsx
+++ b/components/main/content/image-detail.tsx
@@ -93,17 +93,17 @@ export default function ImageDetail({ id }: { id: number }) {
files:
article.files?.map((f: any) => ({
id: f.id,
- url: f.file_url,
- fileName: f.file_name,
- filePath: f.file_path,
- fileThumbnail: f.file_thumbnail,
- fileAlt: f.file_alt,
- widthPixel: f.width_pixel,
- heightPixel: f.height_pixel,
+ url: f.fileUrl,
+ fileName: f.fileName,
+ filePath: f.filePath,
+ fileThumbnail: f.fileThumbnail,
+ fileAlt: f.fileAlt,
+ widthPixel: f.widthPixel,
+ heightPixel: f.heightPixel,
size: f.size,
- downloadCount: f.download_count,
- createdAt: f.created_at,
- updatedAt: f.updated_at,
+ downloadCount: f.downloadCount,
+ createdAt: f.createdAt,
+ updatedAt: f.updatedAt,
})) || [],
};
@@ -155,7 +155,7 @@ export default function ImageDetail({ id }: { id: number }) {
setSelectedImage(index)} key={file?.id}>
- {data.viewCount || 0}
+ {data.clickCount || 0}{" "}
Creator: {data.creatorGroupLevelName}
diff --git a/components/ui/Reveal.tsx b/components/ui/Reveal.tsx
new file mode 100644
index 0000000..66b3851
--- /dev/null
+++ b/components/ui/Reveal.tsx
@@ -0,0 +1,58 @@
+import React, { useRef, useEffect } from "react";
+import { motion, useInView, useAnimation } from "framer-motion";
+
+interface Props {
+ children: React.ReactNode;
+}
+
+export const Reveal = ({ children }: Props) => {
+ const ref = useRef(null);
+ const isInView = useInView(ref, { once: false });
+ const mainControls = useAnimation();
+ const slideControls = useAnimation();
+
+ useEffect(() => {
+ if (isInView) {
+ mainControls.start("visible");
+ slideControls.start("visible");
+ } else mainControls.start("hidden");
+ }, [isInView]);
+
+ return (
+
+
+ {children}
+
+ {/* TODO green slide thingy */}
+ {/* */}
+
+ );
+};
diff --git a/components/ui/RevealL.tsx b/components/ui/RevealL.tsx
new file mode 100644
index 0000000..45bb24a
--- /dev/null
+++ b/components/ui/RevealL.tsx
@@ -0,0 +1,63 @@
+import React, { useRef, useEffect } from "react";
+import { motion, useInView, useAnimation } from "framer-motion";
+
+interface Props {
+ children: React.ReactNode;
+}
+
+export const RevealL = ({ children }: Props) => {
+ const ref = useRef(null);
+ const isInView = useInView(ref, { once: false });
+ const mainControls = useAnimation();
+ const slideControls = useAnimation();
+
+ useEffect(() => {
+ if (isInView) {
+ mainControls.start("visible");
+ slideControls.start("visible");
+ } else {
+ mainControls.start("hidden");
+ }
+ }, [isInView]);
+
+ return (
+
+
+ {children}
+
+
+ {/* Optional: Slide Overlay Animation */}
+ {/*
+
+ */}
+
+ );
+};
diff --git a/components/ui/RevealR.tsx b/components/ui/RevealR.tsx
new file mode 100644
index 0000000..42356ce
--- /dev/null
+++ b/components/ui/RevealR.tsx
@@ -0,0 +1,63 @@
+import React, { useRef, useEffect } from "react";
+import { motion, useInView, useAnimation } from "framer-motion";
+
+interface Props {
+ children: React.ReactNode;
+}
+
+export const RevealR = ({ children }: Props) => {
+ const ref = useRef(null);
+ const isInView = useInView(ref, { once: false });
+ const mainControls = useAnimation();
+ const slideControls = useAnimation();
+
+ useEffect(() => {
+ if (isInView) {
+ mainControls.start("visible");
+ slideControls.start("visible");
+ } else {
+ mainControls.start("hidden");
+ }
+ }, [isInView]);
+
+ return (
+
+
+ {children}
+
+
+ {/* Optional: Slide Overlay Animation */}
+ {/*
+
+ */}
+
+ );
+};
diff --git a/components/ui/RevealT.tsx b/components/ui/RevealT.tsx
new file mode 100644
index 0000000..ed46ef2
--- /dev/null
+++ b/components/ui/RevealT.tsx
@@ -0,0 +1,63 @@
+import React, { useRef, useEffect } from "react";
+import { motion, useInView, useAnimation } from "framer-motion";
+
+interface Props {
+ children: React.ReactNode;
+}
+
+export const RevealT = ({ children }: Props) => {
+ const ref = useRef(null);
+ const isInView = useInView(ref, { once: false });
+ const mainControls = useAnimation();
+ const slideControls = useAnimation();
+
+ useEffect(() => {
+ if (isInView) {
+ mainControls.start("visible");
+ slideControls.start("visible");
+ } else {
+ mainControls.start("hidden");
+ }
+ }, [isInView]);
+
+ return (
+
+
+ {children}
+
+
+ {/* Optional: Slide Overlay Animation */}
+ {/*
+
+ */}
+
+ );
+};