medol
/
web-mikul-news
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

This commit is contained in:
Anang Yusman 2025-11-03 10:17:06 +08:00
parent d6d72454eb
commit 435222a792
13 changed files with 89 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
app/details/[slug]/page.tsx Normal file
View File

@ -0,0 +1,30 @@
import DetailContent from "@/components/details/details-content";
import Footer from "@/components/landing-page/footer";
import Navbar from "@/components/landing-page/navbar";
import Image from "next/image";
export default function Home() {
return (
<div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
<div className="fixed top-0 left-0 w-full h-auto z-0">
<Image
src="/rumput.jpg"
alt="Background"
width={1450}
height={600}
className="w-full h-auto object-cover"
priority
/>
</div>
<div className="relative z-10 bg-[#F2F4F3] max-w-7xl mx-auto">
<Navbar />
<div className="flex-1">
<DetailContent />
</div>
<Footer />
</div>
</div>
);
}

18
components/details/details-content.tsx
View File

@ -20,6 +20,8 @@ import {
postArticleComment,
} from "@/service/master-user";
import { useForm } from "react-hook-form";
import { Badge } from "../ui/badge";
import { map } from "zod";
type TabKey = "trending" | "comments" | "latest";
@ -299,7 +301,7 @@ export default function DetailContent() {
async function initStateData() {
loading();
const res = await getArticleById(id);
const res = await getArticleBySlug(slug);
const data = res?.data?.data;
setThumbnail(data?.thumbnailUrl);
@ -570,9 +572,17 @@ export default function DetailContent() {
</span>
<div className="flex flex-wrap gap-2 mt-1">
{articleDetail?.tags ? (
<span className="bg-gray-100 text-gray-700 text-sm px-2 py-1 rounded">
{articleDetail.tags}
</span>
articleDetail.tags
.split(",") // pisahkan berdasarkan koma
.map((tag: string, index: number) => (
<Badge
key={index}
variant="secondary"
className="text-sm"
>
{tag.trim()}
</Badge>
))
) : (
<span className="text-sm text-gray-500">Tidak ada tag</span>
)}

9
components/landing-page/citizen-news/citizen-news.tsx
View File

@ -13,6 +13,7 @@ type Article = {
description: string;
categoryName: string;
createdAt: string;
slug: string;
createdByName: string;
customCreatorName: string;
thumbnailUrl: string;
@ -150,7 +151,7 @@ export default function CitizenNews() {
<div key={item.id}>
<Link
className="flex flex-col md:flex-row gap-6"
href={`/detail/${item?.id}`}
href={`/details/${item?.slug}`}
>
{/* Image + Category */}
<div className="relative w-full md:w-1/2 h-64">
@ -319,7 +320,7 @@ export default function CitizenNews() {
<div key={item.id} className="flex gap-3 items-center">
<Link
className="flex gap-3 items-center"
href={`/detail/${item?.id}`}
href={`/details/${item?.slug}`}
>
<Image
src={item.thumbnailUrl || "/no-image.jpg"}
@ -344,7 +345,7 @@ export default function CitizenNews() {
</h2>
<div className=" w-full">
<div className="relative w-full aspect-video mb-5">
<Link href={`/detail/${articles[0]?.id}`}>
<Link href={`/details/${articles[0]?.slug}`}>
<Image
src={
articles[0]?.thumbnailUrl ||
@ -394,7 +395,7 @@ export default function CitizenNews() {
<div key={index}>
<Link
className="flex gap-3"
href={`/detail/${article?.id}`}
href={`/details/${article?.slug}`}
>
<div className="relative w-[120px] h-[86px] shrink-0">
<Image

5
components/landing-page/citizen-news/header-citizen.tsx
View File

@ -12,6 +12,7 @@ type Article = {
description: string;
categoryName: string;
createdAt: string;
slug: string;
createdByName: string;
customCreatorName: string;
thumbnailUrl: string;
@ -109,7 +110,7 @@ export default function HeaderCitizen() {
<div className="grid grid-cols-1 md:grid-cols-3 gap-2 m-8">
{mainArticle && (
<div className="md:col-span-2 relative">
<Link href={`/detail/${mainArticle.id}`}>
<Link href={`/details/${mainArticle.slug}`}>
<Image
src={mainArticle.files?.[0]?.fileUrl || "/default-image.jpg"}
alt={mainArticle.title}
@ -145,7 +146,7 @@ export default function HeaderCitizen() {
<div className="grid grid-rows-2 gap-2">
{otherArticles.map((article, index) => (
<div key={index} className="relative">
<Link href={`/detail/${article.id}`}>
<Link href={`/details/${article.slug}`}>
<Image
src={
article.thumbnailUrl ||

9
components/landing-page/development/development-news.tsx
View File

@ -14,6 +14,7 @@ type Article = {
categoryName: string;
createdAt: string;
createdByName: string;
slug: string;
customCreatorName: string;
thumbnailUrl: string;
categories: {
@ -152,7 +153,7 @@ export default function DevelopmentNews() {
<div key={item.id}>
<Link
className="flex flex-col md:flex-row gap-6"
href={`/detail/${item?.id}`}
href={`/details/${item?.slug}`}
>
{/* Image + Category */}
<div className="relative w-full md:w-1/2 h-64">
@ -318,7 +319,7 @@ export default function DevelopmentNews() {
<div key={item.id} className="flex gap-3 items-center">
<Link
className="flex gap-3 items-center"
href={`/detail/${item?.id}`}
href={`/details/${item?.slug}`}
>
<Image
src={item.thumbnailUrl || "/no-image.jpg"}
@ -343,7 +344,7 @@ export default function DevelopmentNews() {
</h2>
<div className=" w-full">
<div className="relative w-full aspect-video mb-5">
<Link href={`/detail/${articles[0]?.id}`}>
<Link href={`/details/${articles[0]?.slug}`}>
<Image
src={
articles[0]?.thumbnailUrl ||
@ -393,7 +394,7 @@ export default function DevelopmentNews() {
<div key={index}>
<Link
className="flex gap-3"
href={`/detail/${article?.id}`}
href={`/details/${article?.slug}`}
>
<div className="relative w-[120px] h-[86px] shrink-0">
<Image

5
components/landing-page/development/header-development.tsx
View File

@ -12,6 +12,7 @@ type Article = {
description: string;
categoryName: string;
createdAt: string;
slug: string;
createdByName: string;
customCreatorName: string;
thumbnailUrl: string;
@ -115,7 +116,7 @@ export default function HeaderDevelopment() {
<div className="grid grid-cols-1 md:grid-cols-3 gap-2 m-8">
{mainArticle && (
<div className="md:col-span-2 relative">
<Link href={`/detail/${mainArticle.id}`}>
<Link href={`/details/${mainArticle.slug}`}>
<Image
src={mainArticle.files?.[0]?.fileUrl || "/default-image.jpg"}
alt={mainArticle.title}
@ -151,7 +152,7 @@ export default function HeaderDevelopment() {
<div className="grid grid-rows-2 gap-2">
{otherArticles.map((article, index) => (
<div key={index} className="relative">
<Link href={`/detail/${article.id}`}>
<Link href={`/details/${article.slug}`}>
<Image
src={
article.thumbnailUrl ||

4
components/landing-page/header.tsx
View File

@ -118,7 +118,7 @@ export default function HeroNewsSection() {
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-2 m-8 ">
{articles.length > 0 && (
<div className="md:col-span-2 lg:col-span-3 relative">
<Link href={`/detail/${articles[0]?.id}`}>
<Link href={`/details/${articles[0]?.slug}`}>
<Image
src={
articles[0]?.files?.[0]?.fileUrl ||
@ -172,7 +172,7 @@ export default function HeroNewsSection() {
<div className="md:col-span-1 lg:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-2">
{articles.slice(1, 5).map((article, index) => (
<div key={index} className="relative">
<Link href={`/detail/${article?.id}`}>
<Link href={`/details/${article?.slug}`}>
<Image
src={
article.thumbnailUrl ||

5
components/landing-page/health/header-health.tsx
View File

@ -12,6 +12,7 @@ type Article = {
description: string;
categoryName: string;
createdAt: string;
slug: string;
createdByName: string;
customCreatorName: string;
thumbnailUrl: string;
@ -109,7 +110,7 @@ export default function HeaderHealth() {
<div className="grid grid-cols-1 md:grid-cols-3 gap-2 m-8">
{mainArticle && (
<div className="md:col-span-2 relative">
<Link href={`/detail/${mainArticle.id}`}>
<Link href={`/details/${mainArticle.slug}`}>
<Image
src={mainArticle.files?.[0]?.fileUrl || "/default-image.jpg"}
alt={mainArticle.title}
@ -145,7 +146,7 @@ export default function HeaderHealth() {
<div className="grid grid-rows-2 gap-2">
{otherArticles.map((article, index) => (
<div key={index} className="relative">
<Link href={`/detail/${article.id}`}>
<Link href={`/details/${article.slug}`}>
<Image
src={
article.thumbnailUrl ||

9
components/landing-page/health/health-news.tsx
View File

@ -13,6 +13,7 @@ type Article = {
description: string;
categoryName: string;
createdAt: string;
slug: string;
createdByName: string;
customCreatorName: string;
thumbnailUrl: string;
@ -149,7 +150,7 @@ export default function HealthNews() {
<div key={item.id}>
<Link
className="flex flex-col md:flex-row gap-6"
href={`/detail/${item?.id}`}
href={`/details/${item?.slug}`}
>
<div className="relative w-full md:w-1/2 h-64">
<Image
@ -309,7 +310,7 @@ export default function HealthNews() {
<div key={item.id} className="flex gap-3 items-center">
<Link
className="flex gap-3 items-center"
href={`/detail/${item?.id}`}
href={`/details/${item?.slug}`}
>
<Image
src={item.thumbnailUrl || "/no-image.jpg"}
@ -334,7 +335,7 @@ export default function HealthNews() {
</h2>
<div className=" w-full">
<div className="relative w-full aspect-video mb-5">
<Link href={`/detail/${articles[0]?.id}`}>
<Link href={`/details/${articles[0]?.slug}`}>
<Image
src={
articles[0]?.thumbnailUrl ||
@ -384,7 +385,7 @@ export default function HealthNews() {
<div key={index}>
<Link
className="flex gap-3"
href={`/detail/${article?.id}`}
href={`/details/${article?.slug}`}
>
<div className="relative w-[120px] h-[86px] shrink-0">
<Image

7
components/landing-page/latest-and-popular.tsx
View File

@ -173,6 +173,7 @@ type Article = {
categoryName: string;
createdAt: string;
createdByName: string;
slug: string;
customCreatorName: string;
thumbnailUrl: string;
categories: {
@ -251,7 +252,7 @@ export default function LatestandPopular() {
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
{currentArticles.map((article, index) => (
<div key={index}>
<Link href={`/detail/${article?.id}`}>
<Link href={`/details/${article?.slug}`}>
<div className="relative w-full aspect-video mb-3">
<Image
src={
@ -368,7 +369,7 @@ export default function LatestandPopular() {
</h2>
<div className=" w-full">
<div className="relative w-full aspect-video mb-5">
<Link href={`/detail/${articles[0]?.id}`}>
<Link href={`/details/${articles[0]?.slug}`}>
<Image
src={
articles[0]?.thumbnailUrl ||
@ -418,7 +419,7 @@ export default function LatestandPopular() {
<div key={index} className="flex gap-3">
<Link
className="flex gap-3"
href={`/detail/${article?.id}`}
href={`/details/${article?.slug}`}
>
<div className="relative w-[120px] h-[86px] shrink-0">
<Image

11
components/landing-page/latest.tsx
View File

@ -178,6 +178,7 @@ type Article = {
description: string;
categoryName: string;
createdAt: string;
slug: string;
createdByName: string;
thumbnailUrl: string;
categories: {
@ -249,7 +250,7 @@ export default function Latest({ id }: { id: number }) {
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 ">
<div className=" w-full">
<div className="relative w-full aspect-video mb-5">
<Link href={`/detail/${articles[0]?.id}`}>
<Link href={`/details/${articles[0]?.slug}`}>
<Image
src={articles[0]?.files?.[0]?.fileUrl || "/nodata.png"}
alt={"articles[0]?.title"}
@ -295,7 +296,7 @@ export default function Latest({ id }: { id: number }) {
<div key={index} className="flex gap-3">
<Link
className="flex gap-3"
href={`/detail/${article?.id}`}
href={`/details/${article?.slug}`}
>
<div className="relative w-[120px] h-[86px] shrink-0">
<Image
@ -342,7 +343,7 @@ export default function Latest({ id }: { id: number }) {
<div className="w-full">
<div className="relative w-full aspect-video mb-5">
<Link href={`/detail/${articles[0]?.id}`}>
<Link href={`/details/${articles[0]?.slug}`}>
<Image
src={
articles[0]?.files?.[0]?.fileUrl || "/default-image.jpg"
@ -390,7 +391,7 @@ export default function Latest({ id }: { id: number }) {
<div key={index} className="flex gap-3">
<Link
className="flex gap-3"
href={`/detail/${article?.id}`}
href={`/details/${article?.slug}`}
>
<div className="relative w-[120px] h-[86px] shrink-0">
<Image
@ -474,7 +475,7 @@ export default function Latest({ id }: { id: number }) {
<div className="space-y-8">
{popularPosts.slice(1, 5).map((post, index) => (
<div key={index} className="space-y-3">
<Link href={`/detail/${post?.id}`}>
<Link href={`/details/${post?.slug}`}>
<div
className={`flex gap-4 ${
post.files?.[0]?.fileUrl

5
components/landing-page/news.tsx
View File

@ -12,6 +12,7 @@ type postsData = {
description: string;
categoryName: string;
createdAt: string;
slug: string;
createdByName: string;
customCreatorName: string;
thumbnailUrl: string;
@ -123,7 +124,7 @@ export default function Beranda() {
.slice(0, 6) // Ambil 4 artikel pertama setelah difilter
.map((post, index) => (
<div key={index} className="bg-white overflow-hidden">
<Link href={`/detail/${post?.id}`}>
<Link href={`/details/${post?.slug}`}>
<div className="relative">
<Image
src={
@ -212,7 +213,7 @@ export default function Beranda() {
.slice(0, 6) // Ambil 4 artikel pertama setelah difilter
.map((post, index) => (
<div key={index} className="bg-white overflow-hidden">
<Link href={`/detail/${post?.id}`}>
<Link href={`/details/${post?.slug}`}>
<div className="relative">
<Image
src={

10
components/table/article-table.tsx
View File

@ -199,11 +199,11 @@ export default function ArticleTable() {
initState();
};
const copyUrlArticle = async (id: number) => {
const copyUrlArticle = async (slug: any) => {
const url =
`${window.location.protocol}//${window.location.host}` +
"/detail/" +
`${id}`;
"/details/" +
`${slug}`;
try {
await navigator.clipboard.writeText(url);
successToast("Success", "Article Copy to Clipboard");
@ -263,7 +263,9 @@ export default function ArticleTable() {
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56">
<DropdownMenuItem onClick={() => copyUrlArticle(article.id)}>
<DropdownMenuItem
onClick={() => copyUrlArticle(article.slug)}
>
<CopyIcon className="mr-2 h-4 w-4" />
Copy Url Article
</DropdownMenuItem>