diff --git a/components/icons.tsx b/components/icons.tsx index 47c471d..e3b83fc 100644 --- a/components/icons.tsx +++ b/components/icons.tsx @@ -2654,3 +2654,34 @@ export const CopyIcon = ({ ); +export const PlayIcon = ({ + size, + height = 24, + width = 24, + fill = "currentColor", + ...props +}: IconSvgProps) => ( + + + + + + + + + + + + +); diff --git a/components/landing/MedolUpdate.tsx b/components/landing/MedolUpdate.tsx index d2dcb4e..8fbc8b6 100644 --- a/components/landing/MedolUpdate.tsx +++ b/components/landing/MedolUpdate.tsx @@ -114,7 +114,7 @@ export default function MedolUpdate() {

Media Update

-
+
{ swiper.navigation.nextEl?.classList.add( - "bg-white/70", + "bg-white", "!text-black", "rounded-full", "!w-[40px]", - "!h-[40px]" + "!h-[40px]", + "!border-2" ); swiper.navigation.prevEl?.classList.add( - "bg-white/70", + "bg-white", "!text-black", "rounded-full", "!w-[40px]", - "!h-[40px]" + "!h-[40px]", + "!border-2" ); }} > diff --git a/components/landing/social-media.tsx b/components/landing/social-media.tsx index 5388f5d..c5239d6 100644 --- a/components/landing/social-media.tsx +++ b/components/landing/social-media.tsx @@ -28,9 +28,11 @@ import { useTranslations } from "next-intl"; import TwitterWidget from "../ui/social-media/twitter"; import InstagramWidget from "../ui/social-media/instagram"; import YoutubeWidget from "../ui/social-media/youtube"; +import FacebookWidgetNew from "../ui/social-media/facebook-new"; +import TiktokWidget from "../ui/social-media/tiktok"; export default function SocialMediaNew() { - const [selectedTab, setSelectedTab] = useState("x"); + const [selectedTab, setSelectedTab] = useState("fb"); const [mediahubUpdate, setMediahubUpdate] = useState([]); const [tbnUpdate, setTbnUpdate] = useState([]); const [inpUpdate, setInpUpdate] = useState([]); @@ -68,6 +70,12 @@ export default function SocialMediaNew() { + + + + + +
diff --git a/components/ui/social-media/facebook-new.tsx b/components/ui/social-media/facebook-new.tsx new file mode 100644 index 0000000..06a5ce2 --- /dev/null +++ b/components/ui/social-media/facebook-new.tsx @@ -0,0 +1,154 @@ +"use client"; + +import { facebookHumasData } from "@/service/generate-article"; +import { + Button, + Card, + CardBody, + CardFooter, + Image, + Modal, + ModalBody, + ModalContent, + ModalHeader, + Spinner, + useDisclosure, +} from "@heroui/react"; +import Link from "next/link"; +import { useEffect, useState } from "react"; +import { Swiper, SwiperSlide } from "swiper/react"; +import "swiper/css"; +import "swiper/css/navigation"; +import "swiper/css/pagination"; +import { Navigation, Pagination } from "swiper/modules"; +import dayjs from "dayjs"; +import relativeTime from "dayjs/plugin/relativeTime"; +import { FacebookIcon, FacebookLandingIcon } from "@/components/icons"; +import { textEllipsis } from "@/utils/global"; +import FacebookEmbed from "./facebook"; + +dayjs.extend(relativeTime); + +const formatRelativeTime = (dateString: string): string => { + return dayjs(dateString, "DD MMM YYYY HH:mm:ss").fromNow(); +}; + +export default function FacebookWidgetNew() { + const { isOpen, onOpen, onOpenChange } = useDisclosure(); + const [selected, setSelected] = useState(""); + const [facebookData, setFacebookData] = useState([]); + useEffect(() => { + fetchData(); + }, []); + + const fetchData = async () => { + const res = await facebookHumasData(); + setFacebookData(res?.data?.data); + }; + return facebookData?.length > 1 ? ( +
+
+
+ humas-polri{" "} +

Divisi Humas Polri

+
+ + + +
+ { + swiper.navigation.nextEl?.classList.add( + "bg-white", + "!text-black", + "rounded-full", + "!w-[40px]", + "!h-[40px]", + "!border-2" + ); + swiper.navigation.prevEl?.classList.add( + "bg-white", + "!text-black", + "rounded-full", + "!w-[40px]", + "!h-[40px]", + "!border-2" + ); + }} + > + {facebookData?.map((data: any) => ( + + { + setSelected(data.url); + onOpen(); + }} + > + + +

{textEllipsis(data.text, 200)}

+
+ {" "} +

Divisi Humas Polri

+

+ {formatRelativeTime(data.publishedDate)} +

+
+ + humas-polri + + + + ))} + + + + + {(onClose) => ( + <> + + + + + )} + + +
+ ) : ( +
+ +
+ ); +} diff --git a/components/ui/social-media/facebook.tsx b/components/ui/social-media/facebook.tsx index ca411c9..726a0a5 100644 --- a/components/ui/social-media/facebook.tsx +++ b/components/ui/social-media/facebook.tsx @@ -1,42 +1,52 @@ -import { useEffect } from "react"; +"use client"; +import { Spinner } from "@heroui/react"; +import { useEffect, useRef, useState } from "react"; + +interface FacebookEmbedProps { + postUrl: string; + width?: number; + showText?: boolean; +} + +declare global { + interface Window { + FB: any; + } +} + +const FacebookEmbed: React.FC = ({ postUrl }) => { + const [loading, setLoading] = useState(true); -const FacebookWidget = () => { useEffect(() => { - if (typeof window !== "undefined") { + if (!window.FB) { const script = document.createElement("script"); - script.src = "https://embedsocial.com/cdn/ht.js"; + script.src = + "https://connect.facebook.net/id_ID/sdk.js#xfbml=1&version=v22.0&appId=1290603775136204"; script.async = true; - document.head.appendChild(script); + script.defer = true; + document.body.appendChild(script); - return () => { - document.head.removeChild(script); + script.onload = () => { + window.FB?.XFBML.parse(); + setLoading(false); }; + } else { + window.FB.XFBML.parse(); + setLoading(false); } }, []); return ( - //
- + <> + {loading && } +
+ ); }; -export default FacebookWidget; +export default FacebookEmbed; diff --git a/components/ui/social-media/tiktok.tsx b/components/ui/social-media/tiktok.tsx index 6957782..0ff1da5 100644 --- a/components/ui/social-media/tiktok.tsx +++ b/components/ui/social-media/tiktok.tsx @@ -1,29 +1,187 @@ -import { useEffect } from 'react'; +"use client"; +import { tiktokHumasData } from "@/service/generate-article"; +import { + Button, + Card, + CardBody, + CardFooter, + Image, + Spinner, +} from "@heroui/react"; +import Link from "next/link"; +import { useEffect, useState } from "react"; +import { Swiper, SwiperSlide } from "swiper/react"; +import "swiper/css"; +import "swiper/css/navigation"; +import "swiper/css/pagination"; +import { Navigation, Pagination } from "swiper/modules"; +import dayjs from "dayjs"; +import relativeTime from "dayjs/plugin/relativeTime"; +import { PlayIcon, TiktokLandingIcon } from "@/components/icons"; +import { textEllipsis } from "@/utils/global"; -const TiktokWidget = () => { +const getRelativeTime = (timestamp: number): string => { + const now = Date.now(); + const timeDiff = now - timestamp * 1000; // Konversi ke milidetik - useEffect(() => { + const seconds = Math.floor(timeDiff / 1000); + const minutes = Math.floor(seconds / 60); + const hours = Math.floor(minutes / 60); + const days = Math.floor(hours / 24); + const weeks = Math.floor(days / 7); + const months = Math.floor(days / 30); + const years = Math.floor(days / 365); - if (typeof window !== 'undefined') { - const script = document.createElement('script'); - script.src = "https://embedsocial.com/cdn/ht.js"; - script.async = true; - document.head.appendChild(script); - - return () => { - document.head.removeChild(script); - }; - } - }, []); - - - - return ( -
- ); + if (seconds < 60) return "just now"; + if (minutes < 60) return `${minutes} min ago`; + if (hours < 24) return `${hours} hour${hours > 1 ? "s" : ""} ago`; + if (days < 7) return `${days} day${days > 1 ? "s" : ""} ago`; + if (weeks < 4) return `${weeks} week${weeks > 1 ? "s" : ""} ago`; + if (months < 12) return `${months} month${months > 1 ? "s" : ""} ago`; + return `${years} year${years > 1 ? "s" : ""} ago`; }; +export default function TiktokWidget() { + const [tiktokData, setTiktokData] = useState([]); + useEffect(() => { + fetchData(); + }, []); -export default TiktokWidget; + const fetchData = async () => { + const res = await tiktokHumasData(); + setTiktokData(res?.data?.data); + }; + const [isVideoLoaded, setIsVideoLoaded] = useState(0); + const videoUrl = "https://www.tiktok.com/@divhumaspolriofficial/video/"; + const loadTikTokVideo = (id: number) => { + setIsVideoLoaded(id); + // Tambahkan script TikTok embed setelah video dimuat + const script = document.createElement("script"); + script.src = "https://www.tiktok.com/embed.js"; + script.async = true; + document.body.appendChild(script); + }; + + const tiktokPlayer = (data: any) => { + return ( + + ); + }; + return tiktokData?.length > 1 ? ( +
+
+
+ humas-polri{" "} +

Divisi Humas Polri

+
+ + + +
+ { + swiper.navigation.nextEl?.classList.add( + "bg-white", + "!text-black", + "rounded-full", + "!w-[40px]", + "!h-[40px]", + "!border-2" + ); + swiper.navigation.prevEl?.classList.add( + "bg-white", + "!text-black", + "rounded-full", + "!w-[40px]", + "!h-[40px]", + "!border-2" + ); + }} + > + {tiktokData?.map((data: any) => ( + + + + {tiktokPlayer(data)} + + + + ))} + +
+ ) : ( +
+ +
+ ); +} diff --git a/service/generate-article.ts b/service/generate-article.ts index 7973690..6c6473e 100644 --- a/service/generate-article.ts +++ b/service/generate-article.ts @@ -1,4 +1,8 @@ -import { httpGet, httpPost } from "@/services/http-config/disestages-services"; +import { + httpGet, + httpPost, + httpPost2, +} from "@/services/http-config/disestages-services"; interface GenerateKeywordsAndTitleRequestData { keyword: string; @@ -224,3 +228,40 @@ export async function saveManualContext(data: any) { }; return await httpPost("ai-writer/create-article", headers, data); } + +export async function facebookHumasData() { + const data = { + monitoringId: "f33b666c-ac07-4cd6-a64e-200465919e8c", + page: 133, + limit: 10, + userId: "0qrwedt9EcuLyOiBUbqhzjd0BwGRjDBd", + }; + const headers = { + "content-type": "application/json", + Authorization: + "Basic bmdETFBQaW9ycGx6bncyalRxVmUzWUZDejV4cUtmVUo6UHJEaERXUmNvdkJSNlc1Sg==", + }; + return await httpPost2( + "monitoring-media-social/datatable/facebook", + headers, + data + ); +} +export async function tiktokHumasData() { + const data = { + monitoringId: "1e301867-9599-4d82-ab57-9f7931f96903", + page: 1, + limit: 10, + userId: "0qrwedt9EcuLyOiBUbqhzjd0BwGRjDBd", + }; + const headers = { + "content-type": "application/json", + Authorization: + "Basic bmdETFBQaW9ycGx6bncyalRxVmUzWUZDejV4cUtmVUo6UHJEaERXUmNvdkJSNlc1Sg==", + }; + return await httpPost2( + "monitoring-media-social/datatable/tiktok", + headers, + data + ); +} diff --git a/services/http-config/disestages-services.ts b/services/http-config/disestages-services.ts index cf07e03..e6fef0d 100644 --- a/services/http-config/disestages-services.ts +++ b/services/http-config/disestages-services.ts @@ -1,4 +1,6 @@ import axiosDisestagesInstance from "./disestages-instance"; +import axios from "axios"; +const baseURL = "https://staging.disestages.com/api"; export async function httpPost(pathUrl: any, headers: any, data?: any) { const response = await axiosDisestagesInstance @@ -45,3 +47,32 @@ export async function httpGet(pathUrl: any, headers: any) { }; } } + +export async function httpPost2(pathUrl: any, headers: any, data?: any) { + const response = await axios + .create({ + baseURL, + headers: { + "content-type": "application/json", + }, + }) + .post(pathUrl, data, { headers }) + .catch(function (error) { + console.log(error); + return error.response; + }); + console.log("Response base svc : ", response); + if (response?.status == 200 || response?.status == 201) { + return { + error: false, + message: "success", + data: response?.data, + }; + } else { + return { + error: true, + message: response?.data?.message || response?.data || null, + data: null, + }; + } +} diff --git a/styles/globals.css b/styles/globals.css index 0fe8228..8c3fb0a 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -53,6 +53,14 @@ align-items: center; } +.custom-button-slider .swiper-button-next { + right: 0px !important; +} + +.custom-button-slider .swiper-button-prev { + left: 0px !important; +} + .swiper-slide img { display: block; width: 100%; @@ -62,13 +70,13 @@ .swiper-button-next::after, .swiper-button-prev::after { - font-size: 28px !important; + font-size: 20px !important; } @media (max-width: 768px) { .swiper-button-next::after, .swiper-button-prev::after { - font-size: 14px !important; + font-size: 10px !important; } }