From c9cd4ce9d72a128c77f1e0017ecf87ff8c3acad8 Mon Sep 17 00:00:00 2001 From: Sabda Yagra Date: Tue, 18 Feb 2025 09:10:23 +0700 Subject: [PATCH 1/4] fix: fixed all section --- .../(public)/audio/detail/[slug]/page.tsx | 6 +- app/[locale]/(public)/audio/filter/page.tsx | 141 ++++++------- .../rewrite/detail/[id]/page.tsx | 6 +- .../content-management/users/page.tsx | 6 +- .../(public)/document/detail/[slug]/page.tsx | 14 +- .../(public)/document/filter/page.tsx | 130 ++++++------ .../(public)/image/detail/[slug]/page.tsx | 6 +- app/[locale]/(public)/image/filter/page.tsx | 4 +- app/[locale]/(public)/inbox/update/page.tsx | 8 +- .../(public)/indeks/detail/[slug]/page.tsx | 10 +- app/[locale]/(public)/indeks/page.tsx | 6 +- app/[locale]/(public)/schedule/page.tsx | 2 +- .../(public)/video/detail/[slug]/page.tsx | 6 +- app/[locale]/(public)/video/filter/page.tsx | 124 +++++------ components/landing-page/division.tsx | 1 + components/landing-page/hero.tsx | 6 +- components/landing-page/navbar.tsx | 193 +++++++++--------- .../partials/header/locale-switcher.tsx | 108 ++++------ public/assets/satker/logo-yanma.png | Bin 0 -> 150697 bytes 19 files changed, 383 insertions(+), 394 deletions(-) create mode 100644 public/assets/satker/logo-yanma.png diff --git a/app/[locale]/(public)/audio/detail/[slug]/page.tsx b/app/[locale]/(public)/audio/detail/[slug]/page.tsx index df29c9c6..1cf117e1 100644 --- a/app/[locale]/(public)/audio/detail/[slug]/page.tsx +++ b/app/[locale]/(public)/audio/detail/[slug]/page.tsx @@ -592,7 +592,7 @@ const DetailAudio = () => {

- {t("by")} {detailDataAudio?.uploadedBy?.userLevel?.name} + {t("by")} {detailDataAudio?.uploadedBy?.userLevel?.name}

{/*

 | {t("updatedOn")} {detailDataAudio?.updatedAt} WIB  |  @@ -621,7 +621,7 @@ const DetailAudio = () => {

{/* Bagian Kanan */} -
+
{isSaved ? ( handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer"> @@ -724,7 +724,7 @@ const DetailAudio = () => {
{/* Comment */} -
+

{t("comment")}

diff --git a/app/[locale]/(public)/faqs/page.tsx b/app/[locale]/(public)/faqs/page.tsx index 9d42ae18..d4ebf029 100644 --- a/app/[locale]/(public)/faqs/page.tsx +++ b/app/[locale]/(public)/faqs/page.tsx @@ -42,7 +42,7 @@ const FAQS: React.FC = () => {
Faqs -

Frequently Asked Questions

+

Frequently Asked Questions

{/* FAQS Items */} @@ -50,10 +50,10 @@ const FAQS: React.FC = () => { {faqs?.map((faq, index) => (
toggleFAQ(index)}> -

{faq.question}

- {openIndex === index ? "−" : "+"} +

{faq.question}

+ {openIndex === index ? "−" : "+"}
- {openIndex === index &&

{faq.answer}

} + {openIndex === index &&

{faq.answer}

}
))}
diff --git a/app/[locale]/(public)/feedback/page.tsx b/app/[locale]/(public)/feedback/page.tsx index 1e02bd46..1b1652c2 100644 --- a/app/[locale]/(public)/feedback/page.tsx +++ b/app/[locale]/(public)/feedback/page.tsx @@ -21,7 +21,7 @@ const Rating: React.FC = ({ label, onRate }) => { return (
- {label} + {label}
{[1, 2, 3, 4, 5].map((star) => (
{ : {} } > -

{t("enterOTP")}

+

{t("enterOTP")}

{t("checkInbox")}

@@ -600,7 +600,7 @@ const page = () => { {t("member")} * +
{errors.email?.message}
@@ -781,7 +781,7 @@ const page = () => { - {institution.map((row: any) => ( + {institution?.map((row: any) => ( diff --git a/components/landing-page/footer.tsx b/components/landing-page/footer.tsx index 9a0c1088..99e71e4b 100644 --- a/components/landing-page/footer.tsx +++ b/components/landing-page/footer.tsx @@ -60,7 +60,7 @@ const Footer = () => { Privacy

{t("privacy")}

-
{parse(String(privacy))}
+
{parse(String(privacy))}
diff --git a/components/landing-page/news-tickers.tsx b/components/landing-page/news-tickers.tsx index 13171697..72b01cdc 100644 --- a/components/landing-page/news-tickers.tsx +++ b/components/landing-page/news-tickers.tsx @@ -44,7 +44,7 @@ export default function NewsTicker() { }, 7000); return () => clearInterval(interval); - }, [article.length]); + }, [article?.length]); return (
From 47893d5d0521dbb7fb5887cc7ad645aaf16922cd Mon Sep 17 00:00:00 2001 From: Sabda Yagra Date: Thu, 20 Feb 2025 08:59:28 +0700 Subject: [PATCH 3/4] fix: all content fixed --- app/[locale]/auth/registration/page.tsx | 2 +- components/landing-page/navbar.tsx | 5 +++-- messages/en.json | 4 ++-- messages/in.json | 4 ++-- 4 files changed, 8 insertions(+), 7 deletions(-) diff --git a/app/[locale]/auth/registration/page.tsx b/app/[locale]/auth/registration/page.tsx index b2e7125b..abf8a63d 100644 --- a/app/[locale]/auth/registration/page.tsx +++ b/app/[locale]/auth/registration/page.tsx @@ -689,7 +689,7 @@ const page = () => { {otpValidate}

- handleResendOTP()}> + handleResendOTP()}> {t("resending")} ({convertMilisecondsToHour(timerCount)}) handleVerifyOTP()}> diff --git a/components/landing-page/navbar.tsx b/components/landing-page/navbar.tsx index e74c5756..d2cf5e21 100644 --- a/components/landing-page/navbar.tsx +++ b/components/landing-page/navbar.tsx @@ -240,15 +240,16 @@ const Navbar = () => {
+ {/* Mobile Menu Toggle */} diff --git a/messages/en.json b/messages/en.json index dfb69a89..d4df0fb9 100644 --- a/messages/en.json +++ b/messages/en.json @@ -405,7 +405,6 @@ "terms": "Terms and Conditions", "enterOTP": "Enter OTP Code", "checkInbox": "Please check your email inbox or spam box.", - "resending": "Resending", "fullName": "Full Name", "enterFullName": "Insert your full name", "enterUsername": "Insert your Username", @@ -517,7 +516,8 @@ "answer4": "MediaHub is a platform that provides various informative and educational content. Key features include search, download, and personalization of content.", "welcome": "Welcome To", "polda": "Official coverage sourced from Polri activities at Polda", - "satker": "Official coverage sourced from Polri activities at Satker" + "satker": "Official coverage sourced from Polri activities at Satker", + "resending": "Resending" }, "FilterPage": { "image": "Image", diff --git a/messages/in.json b/messages/in.json index 775fda1e..92c6c270 100644 --- a/messages/in.json +++ b/messages/in.json @@ -405,7 +405,6 @@ "terms": "Syarat dan Ketentuan", "enterOTP": "Masukkan kode OTP", "checkInbox": "Silahkan cek inbox atau kotak spam pada email Anda.", - "resending": "Kirim Ulang", "fullName": "Nama Lengkap", "enterFullName": "Masukkan Nama Lengkap Anda", "enterUsername": "Masukkan Username Anda", @@ -517,7 +516,8 @@ "answer4": "MediaHub adalah platform yang menyediakan berbagai konten informatif dan edukatif. Fitur utama meliputi pencarian, pengunduhan, dan personalisasi konten.", "welcome": "Selamat Datang di", "polda": "Liputan resmi yang bersumber dari kegiatan Polri di Polda", - "satker": "Liputan resmi yang bersumber dari kegiatan Polri di Satker" + "satker": "Liputan resmi yang bersumber dari kegiatan Polri di Satker", + "resending": "Kirim Ulang" }, "FilterPage": { "image": "Foto", From f89f7c4aab2127db0d78cfaaa5c51ebe3c2c5dfa Mon Sep 17 00:00:00 2001 From: Sabda Yagra Date: Thu, 20 Feb 2025 16:31:43 +0700 Subject: [PATCH 4/4] fix: all content --- .../(public)/document/detail/[slug]/page.tsx | 22 +- .../(public)/image/detail/[slug]/page.tsx | 51 +++- app/[locale]/(public)/schedule/page.tsx | 6 +- .../(public)/video/detail/[slug]/page.tsx | 14 +- app/[locale]/auth/forgot-password/page.tsx | 4 +- components/landing-page/hero.tsx | 6 +- components/landing-page/navbar.tsx | 2 +- components/landing-page/new-content.tsx | 4 +- components/ui/carousel.tsx | 241 ++++++------------ 9 files changed, 155 insertions(+), 195 deletions(-) diff --git a/app/[locale]/(public)/document/detail/[slug]/page.tsx b/app/[locale]/(public)/document/detail/[slug]/page.tsx index f762713b..a9d3a4ce 100644 --- a/app/[locale]/(public)/document/detail/[slug]/page.tsx +++ b/app/[locale]/(public)/document/detail/[slug]/page.tsx @@ -140,11 +140,19 @@ const DetailDocument = () => { } }; - const sizes = [ - { label: "DOC", value: "...KB" }, - { label: "PPT", value: "...KB" }, - { label: "PDF", value: "...KB" }, - ]; + const size = [{ label: "DOC" }, { label: "PPT" }, { label: "PDF" }]; + + function formatBytes(kb: any, decimals = 2) { + if (kb == 0 || kb == null) return "0 KB"; + + const k = 1024; + const dm = decimals < 0 ? 0 : decimals; + const sizes = ["KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]; + + const i = Math.floor(Math.log(kb) / Math.log(k)); + + return `${parseFloat((kb / k ** i).toFixed(dm))} ${sizes[i]}`; + } async function sendActivityLog(activityTypeId: number) { const data = { @@ -499,14 +507,14 @@ const DetailDocument = () => {

{t("docSize")}

- {sizes.map((size: any) => ( + {size.map((size: any) => (
setSelectedSize(size.label)} className="text-red-600 focus:ring-red-600" />
{size.label}
-
{size.value}
+
{formatBytes(size?.size)}
))} diff --git a/app/[locale]/(public)/image/detail/[slug]/page.tsx b/app/[locale]/(public)/image/detail/[slug]/page.tsx index 53d4b3a2..6e74dac7 100644 --- a/app/[locale]/(public)/image/detail/[slug]/page.tsx +++ b/app/[locale]/(public)/image/detail/[slug]/page.tsx @@ -22,6 +22,11 @@ import { Skeleton } from "@/components/ui/skeleton"; import { useTranslations } from "next-intl"; import Image from "next/image"; +interface Size { + label: string; + value: string; +} + const DetailInfo = () => { const MySwal = withReactContent(Swal); const [selectedSize, setSelectedSize] = useState("L"); @@ -56,6 +61,7 @@ const DetailInfo = () => { let typeString = "image"; const t = useTranslations("LandingPage"); + useEffect(() => { const timer = setTimeout(() => { setIsLoading(false); @@ -149,13 +155,34 @@ const DetailInfo = () => { } }; - const sizes = [ - { label: "XL", value: "3198 x 1798 px" }, - { label: "L", value: "2399 x 1349 px" }, - { label: "M", value: "1599 x 899 px" }, - { label: "S", value: "1066 x 599 px" }, - { label: "XS", value: "800 x 450 px" }, - ]; + // const sizes = [ + // { label: "XL", value: "3198 x 1798 px" }, + // { label: "L", value: "2399 x 1349 px" }, + // { label: "M", value: "1599 x 899 px" }, + // { label: "S", value: "1066 x 599 px" }, + // { label: "XS", value: "800 x 450 px" }, + // ]; + + const scaleFactors = { + XL: 2, + L: 1.5, + M: 1.25, + S: 1, + XS: 0.75, + }; + const sizes: Size[] = Object.entries(scaleFactors).map(([label, factor]) => { + const width = Number(main?.widthPixel); + const height = Number(main?.heightPixel); + + if (isNaN(width) || isNaN(height) || width === 0) { + return { label, value: "Invalid size" }; + } + + const newWidth = Math.round(width * factor); + const newHeight = Math.round((width * factor) / (width / height)); + + return { label, value: `${newWidth} x ${newHeight} px` }; + }); async function sendActivityLog(activityTypeId: number) { const data = { @@ -540,13 +567,11 @@ const DetailInfo = () => {
{sizes.map((size: any) => (
-
- setImageSizeSelected(e.target.value)} className="text-red-600 focus:ring-red-600" /> -
{size.label}
-
-
-
{size.value}
+
+ setImageSizeSelected(e.target.value)} className="text-red-600 focus:ring-red-600" /> +
{size?.label}
+
{size?.value}
))}
diff --git a/app/[locale]/(public)/schedule/page.tsx b/app/[locale]/(public)/schedule/page.tsx index adc6ec29..585c58de 100644 --- a/app/[locale]/(public)/schedule/page.tsx +++ b/app/[locale]/(public)/schedule/page.tsx @@ -505,7 +505,7 @@ const Schedule = (props: any) => { - + Filter @@ -856,8 +856,8 @@ const Schedule = (props: any) => {

-

- +

+ {detail?.address}

diff --git a/app/[locale]/(public)/video/detail/[slug]/page.tsx b/app/[locale]/(public)/video/detail/[slug]/page.tsx index 9f96118b..21cd37eb 100644 --- a/app/[locale]/(public)/video/detail/[slug]/page.tsx +++ b/app/[locale]/(public)/video/detail/[slug]/page.tsx @@ -22,6 +22,11 @@ import parse from "html-react-parser"; import { useTranslations } from "next-intl"; import Image from "next/image"; +interface Size { + label: string; + value: string; +} + const DetailVideo = () => { const [selectedSize, setSelectedSize] = useState("L"); const [selectedTab, setSelectedTab] = useState("video"); @@ -140,11 +145,10 @@ const DetailVideo = () => { }; const sizes = [ - { label: "XL", value: "3198 x 1798 px" }, - { label: "L", value: "2399 x 1349 px" }, - { label: "M", value: "1599 x 899 px" }, - { label: "S", value: "1066 x 599 px" }, - { label: "XS", value: "800 x 450 px" }, + { label: "FULL HD", value: "1920 x 1080 px" }, + { label: "HD", value: "1280 x 720 px" }, + { label: "SD", value: "720 x 480 px" }, + { label: "WEB", value: "640 x 360 px" }, ]; async function sendActivityLog(activityTypeId: number) { diff --git a/app/[locale]/auth/forgot-password/page.tsx b/app/[locale]/auth/forgot-password/page.tsx index 45f2f7d0..7aaa1ffe 100644 --- a/app/[locale]/auth/forgot-password/page.tsx +++ b/app/[locale]/auth/forgot-password/page.tsx @@ -21,9 +21,9 @@ const ForgotPassPage = () => {
- + {/* - + */}

Forgot Your Password?

diff --git a/components/landing-page/hero.tsx b/components/landing-page/hero.tsx index c6126c84..16dafb3b 100644 --- a/components/landing-page/hero.tsx +++ b/components/landing-page/hero.tsx @@ -68,7 +68,7 @@ const Hero: React.FC = () => { {heroData?.map((list: any) => (
- gambar-utama + gambar-utama
{list?.categoryName} @@ -89,8 +89,8 @@ const Hero: React.FC = () => { ))} - - + + )} diff --git a/components/landing-page/navbar.tsx b/components/landing-page/navbar.tsx index d2cf5e21..37f5b6d1 100644 --- a/components/landing-page/navbar.tsx +++ b/components/landing-page/navbar.tsx @@ -708,7 +708,7 @@ const Navbar = () => { {/* Mobile Menu */} {menuOpen && ( -
+
diff --git a/components/landing-page/new-content.tsx b/components/landing-page/new-content.tsx index 3301eecf..284317cb 100644 --- a/components/landing-page/new-content.tsx +++ b/components/landing-page/new-content.tsx @@ -129,8 +129,8 @@ const NewContent = (props: { group: string; type: string }) => { ))} - - + + ) : (

diff --git a/components/ui/carousel.tsx b/components/ui/carousel.tsx index a56cc9de..e97c697a 100644 --- a/components/ui/carousel.tsx +++ b/components/ui/carousel.tsx @@ -1,9 +1,7 @@ "use client"; import * as React from "react"; -import useEmblaCarousel, { - type UseEmblaCarouselType, -} from "embla-carousel-react"; +import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react"; import { ArrowLeft, ArrowRight } from "lucide-react"; import { cn } from "@/lib/utils"; @@ -42,162 +40,109 @@ function useCarousel() { return context; } -const Carousel = React.forwardRef< - HTMLDivElement, - React.HTMLAttributes & CarouselProps ->( - ( +const Carousel = React.forwardRef & CarouselProps>(({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => { + const [carouselRef, api] = useEmblaCarousel( { - orientation = "horizontal", - opts, - setApi, - plugins, - className, - children, - ...props + ...opts, + axis: orientation === "horizontal" ? "x" : "y", }, - ref - ) => { - const [carouselRef, api] = useEmblaCarousel( - { - ...opts, - axis: orientation === "horizontal" ? "x" : "y", - }, - plugins - ); - const [canScrollPrev, setCanScrollPrev] = React.useState(false); - const [canScrollNext, setCanScrollNext] = React.useState(false); + plugins + ); + const [canScrollPrev, setCanScrollPrev] = React.useState(false); + const [canScrollNext, setCanScrollNext] = React.useState(false); - const onSelect = React.useCallback((api: CarouselApi) => { - if (!api) { - return; + const onSelect = React.useCallback((api: CarouselApi) => { + if (!api) { + return; + } + + setCanScrollPrev(api.canScrollPrev()); + setCanScrollNext(api.canScrollNext()); + }, []); + + const scrollPrev = React.useCallback(() => { + api?.scrollPrev(); + }, [api]); + + const scrollNext = React.useCallback(() => { + api?.scrollNext(); + }, [api]); + + const handleKeyDown = React.useCallback( + (event: React.KeyboardEvent) => { + if (event.key === "ArrowLeft") { + event.preventDefault(); + scrollPrev(); + } else if (event.key === "ArrowRight") { + event.preventDefault(); + scrollNext(); } + }, + [scrollPrev, scrollNext] + ); - setCanScrollPrev(api.canScrollPrev()); - setCanScrollNext(api.canScrollNext()); - }, []); + React.useEffect(() => { + if (!api || !setApi) { + return; + } - const scrollPrev = React.useCallback(() => { - api?.scrollPrev(); - }, [api]); + setApi(api); + }, [api, setApi]); - const scrollNext = React.useCallback(() => { - api?.scrollNext(); - }, [api]); + React.useEffect(() => { + if (!api) { + return; + } - const handleKeyDown = React.useCallback( - (event: React.KeyboardEvent) => { - if (event.key === "ArrowLeft") { - event.preventDefault(); - scrollPrev(); - } else if (event.key === "ArrowRight") { - event.preventDefault(); - scrollNext(); - } - }, - [scrollPrev, scrollNext] - ); + onSelect(api); + api.on("reInit", onSelect); + api.on("select", onSelect); - React.useEffect(() => { - if (!api || !setApi) { - return; - } + return () => { + api?.off("select", onSelect); + }; + }, [api, onSelect]); - setApi(api); - }, [api, setApi]); - - React.useEffect(() => { - if (!api) { - return; - } - - onSelect(api); - api.on("reInit", onSelect); - api.on("select", onSelect); - - return () => { - api?.off("select", onSelect); - }; - }, [api, onSelect]); - - return ( - -

- {children} -
- - ); - } -); + return ( + +
+ {children} +
+ + ); +}); Carousel.displayName = "Carousel"; -const CarouselContent = React.forwardRef< - HTMLDivElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => { +const CarouselContent = React.forwardRef>(({ className, ...props }, ref) => { const { carouselRef, orientation } = useCarousel(); return (
-
+
); }); CarouselContent.displayName = "CarouselContent"; -const CarouselItem = React.forwardRef< - HTMLDivElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => { +const CarouselItem = React.forwardRef>(({ className, ...props }, ref) => { const { orientation } = useCarousel(); - return ( -
- ); + return
; }); CarouselItem.displayName = "CarouselItem"; -const CarouselPrevious = React.forwardRef< - HTMLButtonElement, - React.ComponentProps ->(({ className, variant = "outline", size = "icon", ...props }, ref) => { +const CarouselPrevious = React.forwardRef>(({ className, variant = "outline", size = "icon", ...props }, ref) => { const { orientation, scrollPrev, canScrollPrev } = useCarousel(); return ( @@ -205,13 +150,7 @@ const CarouselPrevious = React.forwardRef< ref={ref} variant={variant} size={size} - className={cn( - "absolute h-6 w-6 rounded-full text-white bg-black -ml-6", - orientation === "horizontal" - ? "-left-0 top-1/2 -translate-y-1/2" - : "-top-0 left-1/2 -translate-x-1/2 rotate-90", - className - )} + className={cn("absolute h-6 w-6 rounded-full text-white bg-black -ml-6", orientation === "horizontal" ? "-left-0 top-1/2 -translate-y-1/2" : "-top-0 left-1/2 -translate-x-1/2 rotate-90", className)} disabled={!canScrollPrev} onClick={scrollPrev} {...props} @@ -223,10 +162,7 @@ const CarouselPrevious = React.forwardRef< }); CarouselPrevious.displayName = "CarouselPrevious"; -const CarouselNext = React.forwardRef< - HTMLButtonElement, - React.ComponentProps ->(({ className, variant = "outline", size = "icon", ...props }, ref) => { +const CarouselNext = React.forwardRef>(({ className, variant = "outline", size = "icon", ...props }, ref) => { const { orientation, scrollNext, canScrollNext } = useCarousel(); return ( @@ -234,13 +170,7 @@ const CarouselNext = React.forwardRef< ref={ref} variant={variant} size={size} - className={cn( - "absolute h-6 w-6 rounded-full bg-black text-white -mr-4", - orientation === "horizontal" - ? "-right-0 top-1/2 -translate-y-1/2" - : "-bottom-0 left-1/2 -translate-x-1/2 rotate-90", - className - )} + className={cn("absolute h-6 w-6 rounded-full bg-black text-white -mr-6", orientation === "horizontal" ? "-right-0 top-1/2 -translate-y-1/2" : "-bottom-0 left-1/2 -translate-x-1/2 rotate-90", className)} disabled={!canScrollNext} onClick={scrollNext} {...props} @@ -252,11 +182,4 @@ const CarouselNext = React.forwardRef< }); CarouselNext.displayName = "CarouselNext"; -export { - type CarouselApi, - Carousel, - CarouselContent, - CarouselItem, - CarouselPrevious, - CarouselNext, -}; +export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext };