From 542c8515a03ebc8153e615c6e10bed9d2f7bc39f Mon Sep 17 00:00:00 2001 From: sabdayagra Date: Tue, 17 Dec 2024 21:27:48 +0700 Subject: [PATCH] feat: add animation and adjust ui --- app/[locale]/(public)/audio/filter/page.tsx | 198 ++++++------ app/[locale]/(public)/contact/page.tsx | 84 ++--- .../(public)/document/filter/page.tsx | 72 +++-- app/[locale]/(public)/faqs/page.tsx | 35 ++- app/[locale]/(public)/feedback/page.tsx | 29 +- .../(public)/image/detail/[slug]/page.tsx | 170 +++++----- app/[locale]/(public)/image/filter/page.tsx | 63 ++-- app/[locale]/(public)/schedule/page.tsx | 137 +++++--- app/[locale]/(public)/video/filter/page.tsx | 153 ++++----- app/[locale]/page.tsx | 23 +- components/landing-page/Reveal.tsx | 58 ++++ components/landing-page/content-category.tsx | 53 ++-- components/landing-page/coverage.tsx | 79 ++--- components/landing-page/division.tsx | 77 ++--- components/landing-page/hero.tsx | 2 +- components/landing-page/navbar.tsx | 16 +- components/landing-page/new-content.tsx | 295 +++++++++--------- package-lock.json | 121 ++++++- package.json | 3 +- 19 files changed, 957 insertions(+), 711 deletions(-) create mode 100644 components/landing-page/Reveal.tsx diff --git a/app/[locale]/(public)/audio/filter/page.tsx b/app/[locale]/(public)/audio/filter/page.tsx index 803e4eab..cda4a2fa 100644 --- a/app/[locale]/(public)/audio/filter/page.tsx +++ b/app/[locale]/(public)/audio/filter/page.tsx @@ -1,6 +1,5 @@ "use client"; import React, { useEffect, useState } from "react"; -import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination"; import { Checkbox } from "@/components/ui/checkbox"; import { Icon } from "@iconify/react/dist/iconify.js"; import { getListContent } from "@/service/landing/landing"; @@ -8,6 +7,7 @@ import { formatDateToIndonesian } from "@/utils/globals"; import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation"; import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table"; import LandingPagination from "@/components/landing-page/pagination"; +import { Reveal } from "@/components/landing-page/Reveal"; const columns: ColumnDef[] = [ { @@ -110,112 +110,116 @@ const FilterPage = () => { {/* Left */}
- {/* Sidebar Kiri */} -
-

Filter

-
- {/* Pencarian */} -
- - -
+ + {/* Sidebar Kiri */} +
+

Filter

+
+ {/* Pencarian */} +
+ + +
- {/* Tahun & Bulan */} -
- - -
+ {/* Tahun & Bulan */} +
+ + +
- {/* Tanggal */} -
- - -
+ {/* Tanggal */} +
+ + +
- {/* Kategori */} -
-

Kategori

-
    - {categories.map((category) => ( -
  • - -
    • - ))} -
-
- {/* Garis */} -
- {/* Garis */} -
-

Format Foto

-
    - {formatAudio.map((format) => ( -
  • - -
    • - ))} -
+ {/* Kategori */} +
+

Kategori

+
    + {categories.map((category) => ( +
  • + +
    • + ))} +
+
+ {/* Garis */} +
+ {/* Garis */} +
+

Format Foto

+
    + {formatAudio.map((format) => ( +
  • + +
    • + ))} +
+
-
+ {/* Konten Kanan */} -
-
-

Urutkan berdasarkan

- -
- {/* Card */} -
- {audioData?.map((audio: any) => ( - -
- - - -
- -
-
- {formatDateToIndonesian(new Date(audio?.createdAt))} {audio?.timezone ? audio?.timezone : "WIB"} | 518 -
-
{audio?.title}
-
-
-
- -
-
- # -
{audio?.duration}
- - + +
+
+

Urutkan berdasarkan

+ +
+ {/* Card */} + - - ))} + +
+
+ {formatDateToIndonesian(new Date(audio?.createdAt))} {audio?.timezone ? audio?.timezone : "WIB"} | 518 +
+
{audio?.title}
+
+
+
+ +
+
+ # +
{audio?.duration}
+ + + +
+
+ + ))} +
+
- -
+
); diff --git a/app/[locale]/(public)/contact/page.tsx b/app/[locale]/(public)/contact/page.tsx index ca09701b..02888d0c 100644 --- a/app/[locale]/(public)/contact/page.tsx +++ b/app/[locale]/(public)/contact/page.tsx @@ -1,54 +1,58 @@ +"use client"; +import { Reveal } from "@/components/landing-page/Reveal"; import React from "react"; const ContactForm = () => { return (
- {/* Header */} -
- contact -

Hubungi Kami

-
-

Tulis Pesan

-

Silahkan tinggalkan pesan Anda pada kolom yang tersedia

- - {/* Form */} -
-
- - + + {/* Header */} +
+ contact +

Hubungi Kami

+

Tulis Pesan

+

Silahkan tinggalkan pesan Anda pada kolom yang tersedia

-
- - -
+ {/* Form */} + +
+ + +
-
- - -
+
+ + +
-
- - -
+
+ + +
-
- - -
+
+ + +
- - +
+ + +
+ + + +
); }; diff --git a/app/[locale]/(public)/document/filter/page.tsx b/app/[locale]/(public)/document/filter/page.tsx index de4028f7..a7450a47 100644 --- a/app/[locale]/(public)/document/filter/page.tsx +++ b/app/[locale]/(public)/document/filter/page.tsx @@ -8,6 +8,7 @@ import { formatDateToIndonesian } from "@/utils/globals"; import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation"; import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table"; import LandingPagination from "@/components/landing-page/pagination"; +import { Reveal } from "@/components/landing-page/Reveal"; const columns: ColumnDef[] = [ { @@ -175,44 +176,49 @@ const DocumentPage = () => {
{/* Konten Kanan */} +
-
-

Urutkan berdasarkan

- -
+ +
+

Urutkan berdasarkan

+ +
+ {/* Card */} -
- {documentData?.map((document: any) => ( - -
- - - -
- -
-
- {formatDateToIndonesian(new Date(document?.createdAt))} {document?.timezone ? document?.timezone : "WIB"} | 518 -
-
{document?.title}
- - + +
+
+ {formatDateToIndonesian(new Date(document?.createdAt))} {document?.timezone ? document?.timezone : "WIB"} | 518 +
+
{document?.title}
+
+ + + + Download Dokumen +
+
+ + ))} +
+ +
diff --git a/app/[locale]/(public)/faqs/page.tsx b/app/[locale]/(public)/faqs/page.tsx index 6077a44c..1cc1b6c9 100644 --- a/app/[locale]/(public)/faqs/page.tsx +++ b/app/[locale]/(public)/faqs/page.tsx @@ -1,4 +1,5 @@ "use client"; +import { Reveal } from "@/components/landing-page/Reveal"; import React, { useState } from "react"; interface FAQItem { @@ -33,25 +34,27 @@ const FAQS: React.FC = () => { }; return ( -
+
{/* Header */} -
- Faqs -

Frequently Asked Questions

-
+ +
+ Faqs +

Frequently Asked Questions

+
- {/* FAQS Items */} -
- {faqs.map((faq, index) => ( -
-
toggleFAQ(index)}> -

{faq.question}

- {openIndex === index ? "−" : "+"} + {/* FAQS Items */} +
+ {faqs.map((faq, index) => ( +
+
toggleFAQ(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 a9e2e0fa..09d85a3e 100644 --- a/app/[locale]/(public)/feedback/page.tsx +++ b/app/[locale]/(public)/feedback/page.tsx @@ -1,5 +1,6 @@ "use client"; +import { Reveal } from "@/components/landing-page/Reveal"; import React, { useState } from "react"; interface RatingProps { @@ -46,20 +47,22 @@ const FeedbackForm: React.FC = () => { }; return ( -
-
- Feedback -

Feedback Pengguna

+ +
+
+ Feedback +

Feedback Pengguna

+
+ handleRatingChange("accessibility", rating)} /> + handleRatingChange("appearance", rating)} /> + handleRatingChange("content", rating)} /> +
+ +
- handleRatingChange("accessibility", rating)} /> - handleRatingChange("appearance", rating)} /> - handleRatingChange("content", rating)} /> -
- -
-
+ ); }; diff --git a/app/[locale]/(public)/image/detail/[slug]/page.tsx b/app/[locale]/(public)/image/detail/[slug]/page.tsx index e3d2c830..8d549e4e 100644 --- a/app/[locale]/(public)/image/detail/[slug]/page.tsx +++ b/app/[locale]/(public)/image/detail/[slug]/page.tsx @@ -10,6 +10,7 @@ import { Icon } from "@iconify/react/dist/iconify.js"; import { textEllipsis } from "@/utils/globals"; import { getDetail } from "@/service/landing/landing"; import NewContent from "@/components/landing-page/new-content"; +import { Reveal } from "@/components/landing-page/Reveal"; const dummyImage = [ { id: 1, thumbnail: "/assets/banner-sample.png" }, @@ -81,110 +82,115 @@ const DetailInfo = () => { return (
- {/* Container Utama */}
{/* Bagian Kiri */} -
- {/* Gambar Utama */} -
- Main -
-
+ +
+ {/* Gambar Besar */} +
+ Main +
+
- {/* Gambar bawah Kecil */} -
- {detailDataImage?.files?.map((file: any, index: number) => ( - setSelectedImage(index)} key={file?.id}> - - - ))} + {/* Gambar bawah Kecil */} +
+ {detailDataImage?.files?.map((file: any, index: number) => ( + setSelectedImage(index)} key={file?.id}> + + + ))} +
-
+ {/* Bagian Kanan */} -
-
- - - -

Simpan

-
- {/* garis */} -
+ +
+
+ + + +

Simpan

+
+ {/* garis */} +
- - {detailDataImage?.category?.name} - + + {detailDataImage?.category?.name} + -
- {detailDataImage?.tags?.split(",").map((tag: string) => ( -

{tag}

- ))} -
+
+ {detailDataImage?.tags?.split(",").map((tag: string) => ( +

{tag}

+ ))} +
-
+
- {/* Opsi Ukuran Foto */} -

Opsi Ukuran Foto

+ {/* Opsi Ukuran Foto */} +

Opsi Ukuran Foto

-
+
-
- {sizes.map((size) => ( -
- {/* Download Semua */} -
- + {/* Tombol Download */} +
- - {/* Tombol Download */} - -
+
{/* Footer Informasi */} -
-
- oleh {detailDataImage?.uploadedBy?.userLevel?.name}  |  Diupdate pada {detailDataImage?.updatedAt} WIB  |  - -   {detailDataImage?.clickCount}   -

Kreator: {detailDataImage?.creatorName}

+ +
+
+ oleh {detailDataImage?.uploadedBy?.userLevel?.name}  |  Diupdate pada {detailDataImage?.updatedAt} WIB  |  + +   {detailDataImage?.clickCount}   +

Kreator: {detailDataImage?.creatorName}

+
-
- {/* Keterangan */} -
-

{detailDataImage?.title}

-
-
+ {/* Keterangan */} +
+

{detailDataImage?.title}

+
+
- {/* Comment */} -
-

Berikan Komentar

-