update
This commit is contained in:
parent
0b2c69bfca
commit
b022b13bca
|
|
@ -0,0 +1,19 @@
|
||||||
|
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 Slug() {
|
||||||
|
return (
|
||||||
|
<div className="relative min-h-screen font-[family-name:var(--font-geist-sans)]">
|
||||||
|
<div className="relative z-10 bg-[#F2F4F3] max-w-7xl mx-auto">
|
||||||
|
<Navbar />
|
||||||
|
<div className="flex-1">
|
||||||
|
<DetailContent />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -2,7 +2,11 @@
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { getArticleById, getListArticle } from "@/service/article";
|
import {
|
||||||
|
getArticleById,
|
||||||
|
getArticleBySlug,
|
||||||
|
getListArticle,
|
||||||
|
} from "@/service/article";
|
||||||
import { close, error, loading } from "@/config/swal";
|
import { close, error, loading } from "@/config/swal";
|
||||||
import { useParams, usePathname } from "next/navigation";
|
import { useParams, usePathname } from "next/navigation";
|
||||||
import { Link2, MailIcon } from "lucide-react";
|
import { Link2, MailIcon } from "lucide-react";
|
||||||
|
|
@ -15,6 +19,7 @@ import {
|
||||||
postArticleComment,
|
postArticleComment,
|
||||||
} from "@/service/master-user";
|
} from "@/service/master-user";
|
||||||
import { useForm } from "react-hook-form";
|
import { useForm } from "react-hook-form";
|
||||||
|
import { Badge } from "../ui/badge";
|
||||||
|
|
||||||
type TabKey = "trending" | "comments" | "latest";
|
type TabKey = "trending" | "comments" | "latest";
|
||||||
|
|
||||||
|
|
@ -55,6 +60,7 @@ type Advertise = {
|
||||||
export default function DetailContent() {
|
export default function DetailContent() {
|
||||||
const params = useParams();
|
const params = useParams();
|
||||||
const id = params?.id;
|
const id = params?.id;
|
||||||
|
const slug = params?.slug;
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
const [page, setPage] = useState(1);
|
const [page, setPage] = useState(1);
|
||||||
const [totalPage, setTotalPage] = useState(1);
|
const [totalPage, setTotalPage] = useState(1);
|
||||||
|
|
@ -292,7 +298,7 @@ export default function DetailContent() {
|
||||||
|
|
||||||
async function initStateData() {
|
async function initStateData() {
|
||||||
loading();
|
loading();
|
||||||
const res = await getArticleById(id);
|
const res = await getArticleBySlug(slug);
|
||||||
const data = res?.data?.data;
|
const data = res?.data?.data;
|
||||||
|
|
||||||
setThumbnail(data?.thumbnailUrl);
|
setThumbnail(data?.thumbnailUrl);
|
||||||
|
|
@ -553,9 +559,17 @@ export default function DetailContent() {
|
||||||
</span>
|
</span>
|
||||||
<div className="flex flex-wrap gap-2 mt-1">
|
<div className="flex flex-wrap gap-2 mt-1">
|
||||||
{articleDetail?.tags ? (
|
{articleDetail?.tags ? (
|
||||||
<span className="bg-gray-100 text-gray-700 text-sm px-2 py-1 rounded">
|
articleDetail.tags
|
||||||
{articleDetail.tags}
|
.split(",") // pisahkan berdasarkan koma
|
||||||
</span>
|
.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>
|
<span className="text-sm text-gray-500">Tidak ada tag</span>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,7 @@ type Article = {
|
||||||
description: string;
|
description: string;
|
||||||
categoryName: string;
|
categoryName: string;
|
||||||
createdAt: string;
|
createdAt: string;
|
||||||
|
slug: string;
|
||||||
createdByName: string;
|
createdByName: string;
|
||||||
customCreatorName: string;
|
customCreatorName: string;
|
||||||
thumbnailUrl: string;
|
thumbnailUrl: string;
|
||||||
|
|
@ -149,7 +150,7 @@ export default function CitizenNews() {
|
||||||
<div key={item.id}>
|
<div key={item.id}>
|
||||||
<Link
|
<Link
|
||||||
className="flex flex-col md:flex-row gap-6"
|
className="flex flex-col md:flex-row gap-6"
|
||||||
href={`/detail/${item?.id}`}
|
href={`/details/${item?.slug}`}
|
||||||
>
|
>
|
||||||
{/* Image + Category */}
|
{/* Image + Category */}
|
||||||
<div className="relative w-full md:w-1/2 h-64">
|
<div className="relative w-full md:w-1/2 h-64">
|
||||||
|
|
@ -318,7 +319,7 @@ export default function CitizenNews() {
|
||||||
<div key={item.id} className="flex gap-3 items-center">
|
<div key={item.id} className="flex gap-3 items-center">
|
||||||
<Link
|
<Link
|
||||||
className="flex gap-3 items-center"
|
className="flex gap-3 items-center"
|
||||||
href={`/detail/${item?.id}`}
|
href={`/details/${item?.slug}`}
|
||||||
>
|
>
|
||||||
<Image
|
<Image
|
||||||
src={item.thumbnailUrl || "/no-image.jpg"}
|
src={item.thumbnailUrl || "/no-image.jpg"}
|
||||||
|
|
@ -343,7 +344,7 @@ export default function CitizenNews() {
|
||||||
</h2>
|
</h2>
|
||||||
<div className=" w-full">
|
<div className=" w-full">
|
||||||
<div className="relative w-full aspect-video mb-5">
|
<div className="relative w-full aspect-video mb-5">
|
||||||
<Link href={`/detail/${articles[0]?.id}`}>
|
<Link href={`/details/${articles[0]?.slug}`}>
|
||||||
<Image
|
<Image
|
||||||
src={
|
src={
|
||||||
articles[0]?.thumbnailUrl ||
|
articles[0]?.thumbnailUrl ||
|
||||||
|
|
@ -393,7 +394,7 @@ export default function CitizenNews() {
|
||||||
<div key={index}>
|
<div key={index}>
|
||||||
<Link
|
<Link
|
||||||
className="flex gap-3"
|
className="flex gap-3"
|
||||||
href={`/detail/${article?.id}`}
|
href={`/details/${article?.slug}`}
|
||||||
>
|
>
|
||||||
<div className="relative w-[120px] h-[86px] shrink-0">
|
<div className="relative w-[120px] h-[86px] shrink-0">
|
||||||
<Image
|
<Image
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,7 @@ type Article = {
|
||||||
description: string;
|
description: string;
|
||||||
categoryName: string;
|
categoryName: string;
|
||||||
createdAt: string;
|
createdAt: string;
|
||||||
|
slug: string;
|
||||||
createdByName: string;
|
createdByName: string;
|
||||||
customCreatorName: string;
|
customCreatorName: string;
|
||||||
thumbnailUrl: string;
|
thumbnailUrl: string;
|
||||||
|
|
@ -101,7 +102,7 @@ export default function HeaderCitizen() {
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-2 m-8">
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-2 m-8">
|
||||||
{mainArticle && (
|
{mainArticle && (
|
||||||
<div className="md:col-span-2 relative">
|
<div className="md:col-span-2 relative">
|
||||||
<Link href={`/detail/${mainArticle.id}`}>
|
<Link href={`/details/${mainArticle.slug}`}>
|
||||||
<Image
|
<Image
|
||||||
src={mainArticle.files?.[0]?.fileUrl || "/default-image.jpg"}
|
src={mainArticle.files?.[0]?.fileUrl || "/default-image.jpg"}
|
||||||
alt={mainArticle.title}
|
alt={mainArticle.title}
|
||||||
|
|
@ -137,7 +138,7 @@ export default function HeaderCitizen() {
|
||||||
<div className="grid grid-rows-2 gap-2">
|
<div className="grid grid-rows-2 gap-2">
|
||||||
{otherArticles.map((article, index) => (
|
{otherArticles.map((article, index) => (
|
||||||
<div key={index} className="relative">
|
<div key={index} className="relative">
|
||||||
<Link href={`/detail/${article.id}`}>
|
<Link href={`/details/${article.slug}`}>
|
||||||
<Image
|
<Image
|
||||||
src={
|
src={
|
||||||
article.thumbnailUrl ||
|
article.thumbnailUrl ||
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,7 @@ type Article = {
|
||||||
title: string;
|
title: string;
|
||||||
description: string;
|
description: string;
|
||||||
categoryName: string;
|
categoryName: string;
|
||||||
|
slug: string;
|
||||||
createdAt: string;
|
createdAt: string;
|
||||||
createdByName: string;
|
createdByName: string;
|
||||||
customCreatorName: string;
|
customCreatorName: string;
|
||||||
|
|
@ -78,7 +79,7 @@ export default function Development() {
|
||||||
{/* === LEFT COLUMN === */}
|
{/* === LEFT COLUMN === */}
|
||||||
{leftMain && (
|
{leftMain && (
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<Link href={`/detail/${leftMain.id}`}>
|
<Link href={`/details/${leftMain.slug}`}>
|
||||||
<div className="relative w-full aspect-video mb-2">
|
<div className="relative w-full aspect-video mb-2">
|
||||||
<Image
|
<Image
|
||||||
src={leftMain.thumbnailUrl || "/placeholder.jpg"}
|
src={leftMain.thumbnailUrl || "/placeholder.jpg"}
|
||||||
|
|
@ -104,7 +105,7 @@ export default function Development() {
|
||||||
<div className="space-y-8">
|
<div className="space-y-8">
|
||||||
{leftList.map((item) => (
|
{leftList.map((item) => (
|
||||||
<div key={item.id}>
|
<div key={item.id}>
|
||||||
<Link className="flex gap-3" href={`/detail/${item.id}`}>
|
<Link className="flex gap-3" href={`/details/${item.slug}`}>
|
||||||
<div className="relative w-[120px] h-[86px] shrink-0">
|
<div className="relative w-[120px] h-[86px] shrink-0">
|
||||||
<Image
|
<Image
|
||||||
src={item.thumbnailUrl || "/placeholder.jpg"}
|
src={item.thumbnailUrl || "/placeholder.jpg"}
|
||||||
|
|
@ -131,7 +132,7 @@ export default function Development() {
|
||||||
{/* === CENTER COLUMN === */}
|
{/* === CENTER COLUMN === */}
|
||||||
{centerMain && (
|
{centerMain && (
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<Link href={`/detail/${centerMain.id}`}>
|
<Link href={`/details/${centerMain.slug}`}>
|
||||||
<div className="relative w-full aspect-video mb-2">
|
<div className="relative w-full aspect-video mb-2">
|
||||||
<Image
|
<Image
|
||||||
src={centerMain.thumbnailUrl || "/placeholder.jpg"}
|
src={centerMain.thumbnailUrl || "/placeholder.jpg"}
|
||||||
|
|
@ -157,7 +158,7 @@ export default function Development() {
|
||||||
<div className="space-y-8">
|
<div className="space-y-8">
|
||||||
{centerList.map((item) => (
|
{centerList.map((item) => (
|
||||||
<div key={item.id}>
|
<div key={item.id}>
|
||||||
<Link className="flex gap-3" href={`/detail/${item.id}`}>
|
<Link className="flex gap-3" href={`/details/${item.slug}`}>
|
||||||
<div className="relative w-[120px] h-[86px] shrink-0">
|
<div className="relative w-[120px] h-[86px] shrink-0">
|
||||||
<Image
|
<Image
|
||||||
src={item.thumbnailUrl || "/placeholder.jpg"}
|
src={item.thumbnailUrl || "/placeholder.jpg"}
|
||||||
|
|
@ -184,7 +185,7 @@ export default function Development() {
|
||||||
{/* === RIGHT COLUMN === */}
|
{/* === RIGHT COLUMN === */}
|
||||||
{rightMain && (
|
{rightMain && (
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<Link href={`/detail/${rightMain.id}`}>
|
<Link href={`/details/${rightMain.slug}`}>
|
||||||
<div className="relative w-full aspect-video mb-2">
|
<div className="relative w-full aspect-video mb-2">
|
||||||
<Image
|
<Image
|
||||||
src={rightMain.thumbnailUrl || "/placeholder.jpg"}
|
src={rightMain.thumbnailUrl || "/placeholder.jpg"}
|
||||||
|
|
@ -210,7 +211,7 @@ export default function Development() {
|
||||||
<div className="space-y-8">
|
<div className="space-y-8">
|
||||||
{rightList.map((item) => (
|
{rightList.map((item) => (
|
||||||
<div key={item.id}>
|
<div key={item.id}>
|
||||||
<Link className="flex gap-3" href={`/detail/${item.id}`}>
|
<Link className="flex gap-3" href={`/details/${item.slug}`}>
|
||||||
<div className="relative w-[120px] h-[86px] shrink-0">
|
<div className="relative w-[120px] h-[86px] shrink-0">
|
||||||
<Image
|
<Image
|
||||||
src={item.thumbnailUrl || "/placeholder.jpg"}
|
src={item.thumbnailUrl || "/placeholder.jpg"}
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,7 @@ type Article = {
|
||||||
description: string;
|
description: string;
|
||||||
categoryName: string;
|
categoryName: string;
|
||||||
createdAt: string;
|
createdAt: string;
|
||||||
|
slug: string;
|
||||||
createdByName: string;
|
createdByName: string;
|
||||||
customCreatorName: string;
|
customCreatorName: string;
|
||||||
thumbnailUrl: string;
|
thumbnailUrl: string;
|
||||||
|
|
@ -151,7 +152,7 @@ export default function DevelopmentNews() {
|
||||||
<div key={item.id}>
|
<div key={item.id}>
|
||||||
<Link
|
<Link
|
||||||
className="flex flex-col md:flex-row gap-6"
|
className="flex flex-col md:flex-row gap-6"
|
||||||
href={`/detail/${item?.id}`}
|
href={`/details/${item?.slug}`}
|
||||||
>
|
>
|
||||||
{/* Image + Category */}
|
{/* Image + Category */}
|
||||||
<div className="relative w-full md:w-1/2 h-64">
|
<div className="relative w-full md:w-1/2 h-64">
|
||||||
|
|
@ -317,7 +318,7 @@ export default function DevelopmentNews() {
|
||||||
<div key={item.id} className="flex gap-3 items-center">
|
<div key={item.id} className="flex gap-3 items-center">
|
||||||
<Link
|
<Link
|
||||||
className="flex gap-3 items-center"
|
className="flex gap-3 items-center"
|
||||||
href={`/detail/${item?.id}`}
|
href={`/details/${item?.slug}`}
|
||||||
>
|
>
|
||||||
<Image
|
<Image
|
||||||
src={item.thumbnailUrl || "/no-image.jpg"}
|
src={item.thumbnailUrl || "/no-image.jpg"}
|
||||||
|
|
@ -342,7 +343,7 @@ export default function DevelopmentNews() {
|
||||||
</h2>
|
</h2>
|
||||||
<div className=" w-full">
|
<div className=" w-full">
|
||||||
<div className="relative w-full aspect-video mb-5">
|
<div className="relative w-full aspect-video mb-5">
|
||||||
<Link href={`/detail/${articles[0]?.id}`}>
|
<Link href={`/details/${articles[0]?.slug}`}>
|
||||||
<Image
|
<Image
|
||||||
src={
|
src={
|
||||||
articles[0]?.thumbnailUrl ||
|
articles[0]?.thumbnailUrl ||
|
||||||
|
|
@ -392,7 +393,7 @@ export default function DevelopmentNews() {
|
||||||
<div key={index}>
|
<div key={index}>
|
||||||
<Link
|
<Link
|
||||||
className="flex gap-3"
|
className="flex gap-3"
|
||||||
href={`/detail/${article?.id}`}
|
href={`/details/${article?.slug}`}
|
||||||
>
|
>
|
||||||
<div className="relative w-[120px] h-[86px] shrink-0">
|
<div className="relative w-[120px] h-[86px] shrink-0">
|
||||||
<Image
|
<Image
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@ type Article = {
|
||||||
title: string;
|
title: string;
|
||||||
description: string;
|
description: string;
|
||||||
categoryName: string;
|
categoryName: string;
|
||||||
|
slug: string;
|
||||||
createdAt: string;
|
createdAt: string;
|
||||||
createdByName: string;
|
createdByName: string;
|
||||||
customCreatorName: string;
|
customCreatorName: string;
|
||||||
|
|
@ -107,7 +108,7 @@ export default function HeaderDevelopment() {
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-2 m-8">
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-2 m-8">
|
||||||
{mainArticle && (
|
{mainArticle && (
|
||||||
<div className="md:col-span-2 relative">
|
<div className="md:col-span-2 relative">
|
||||||
<Link href={`/detail/${mainArticle.id}`}>
|
<Link href={`/details/${mainArticle.slug}`}>
|
||||||
<Image
|
<Image
|
||||||
src={mainArticle.files?.[0]?.fileUrl || "/default-image.jpg"}
|
src={mainArticle.files?.[0]?.fileUrl || "/default-image.jpg"}
|
||||||
alt={mainArticle.title}
|
alt={mainArticle.title}
|
||||||
|
|
@ -143,7 +144,7 @@ export default function HeaderDevelopment() {
|
||||||
<div className="grid grid-rows-2 gap-2">
|
<div className="grid grid-rows-2 gap-2">
|
||||||
{otherArticles.map((article, index) => (
|
{otherArticles.map((article, index) => (
|
||||||
<div key={index} className="relative">
|
<div key={index} className="relative">
|
||||||
<Link href={`/detail/${article.id}`}>
|
<Link href={`/details/${article.slug}`}>
|
||||||
<Image
|
<Image
|
||||||
src={
|
src={
|
||||||
article.thumbnailUrl ||
|
article.thumbnailUrl ||
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@ type Article = {
|
||||||
description: string;
|
description: string;
|
||||||
categoryName: string;
|
categoryName: string;
|
||||||
createdAt: string;
|
createdAt: string;
|
||||||
|
slug: string;
|
||||||
createdByName: string;
|
createdByName: string;
|
||||||
customCreatorName: string;
|
customCreatorName: string;
|
||||||
thumbnailUrl: string;
|
thumbnailUrl: string;
|
||||||
|
|
@ -65,7 +66,7 @@ export default function Header() {
|
||||||
{articles.length > 0 ? (
|
{articles.length > 0 ? (
|
||||||
articles.map((item, index) => (
|
articles.map((item, index) => (
|
||||||
<div key={item.id} className="relative h-[410px] w-full">
|
<div key={item.id} className="relative h-[410px] w-full">
|
||||||
<Link href={`/detail/${item.id}`}>
|
<Link href={`/details/${item.slug}`}>
|
||||||
<Image
|
<Image
|
||||||
src={
|
src={
|
||||||
item.thumbnailUrl ||
|
item.thumbnailUrl ||
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,7 @@ type Article = {
|
||||||
description: string;
|
description: string;
|
||||||
categoryName: string;
|
categoryName: string;
|
||||||
createdAt: string;
|
createdAt: string;
|
||||||
|
slug: string;
|
||||||
createdByName: string;
|
createdByName: string;
|
||||||
categories: { title: string }[];
|
categories: { title: string }[];
|
||||||
customCreatorName?: string;
|
customCreatorName?: string;
|
||||||
|
|
@ -86,7 +87,7 @@ export default function Health() {
|
||||||
{/* === LEFT COLUMN === */}
|
{/* === LEFT COLUMN === */}
|
||||||
{leftMain && (
|
{leftMain && (
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<Link href={`/detail/${leftMain.id}`}>
|
<Link href={`/details/${leftMain.slug}`}>
|
||||||
<div className="relative w-full aspect-video mb-2">
|
<div className="relative w-full aspect-video mb-2">
|
||||||
<Image
|
<Image
|
||||||
src={leftMain.thumbnailUrl || "/placeholder.jpg"}
|
src={leftMain.thumbnailUrl || "/placeholder.jpg"}
|
||||||
|
|
@ -112,7 +113,7 @@ export default function Health() {
|
||||||
<div className="space-y-8">
|
<div className="space-y-8">
|
||||||
{leftList.map((item) => (
|
{leftList.map((item) => (
|
||||||
<div key={item.id}>
|
<div key={item.id}>
|
||||||
<Link className="flex gap-3" href={`/detail/${item.id}`}>
|
<Link className="flex gap-3" href={`/details/${item.slug}`}>
|
||||||
<div className="relative w-[120px] h-[86px] shrink-0">
|
<div className="relative w-[120px] h-[86px] shrink-0">
|
||||||
<Image
|
<Image
|
||||||
src={item.thumbnailUrl || "/placeholder.jpg"}
|
src={item.thumbnailUrl || "/placeholder.jpg"}
|
||||||
|
|
@ -139,7 +140,7 @@ export default function Health() {
|
||||||
{/* === CENTER COLUMN === */}
|
{/* === CENTER COLUMN === */}
|
||||||
{centerMain && (
|
{centerMain && (
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<Link href={`/detail/${centerMain.id}`}>
|
<Link href={`/details/${centerMain.slug}`}>
|
||||||
<div className="relative w-full aspect-video mb-2">
|
<div className="relative w-full aspect-video mb-2">
|
||||||
<Image
|
<Image
|
||||||
src={centerMain.thumbnailUrl || "/placeholder.jpg"}
|
src={centerMain.thumbnailUrl || "/placeholder.jpg"}
|
||||||
|
|
@ -165,7 +166,7 @@ export default function Health() {
|
||||||
<div className="space-y-8">
|
<div className="space-y-8">
|
||||||
{centerList.map((item) => (
|
{centerList.map((item) => (
|
||||||
<div key={item.id}>
|
<div key={item.id}>
|
||||||
<Link className="flex gap-3" href={`/detail/${item.id}`}>
|
<Link className="flex gap-3" href={`/details/${item.slug}`}>
|
||||||
<div className="relative w-[120px] h-[86px] shrink-0">
|
<div className="relative w-[120px] h-[86px] shrink-0">
|
||||||
<Image
|
<Image
|
||||||
src={item.thumbnailUrl || "/placeholder.jpg"}
|
src={item.thumbnailUrl || "/placeholder.jpg"}
|
||||||
|
|
@ -192,7 +193,7 @@ export default function Health() {
|
||||||
{/* === RIGHT COLUMN === */}
|
{/* === RIGHT COLUMN === */}
|
||||||
{rightMain && (
|
{rightMain && (
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<Link href={`/detail/${rightMain.id}`}>
|
<Link href={`/details/${rightMain.slug}`}>
|
||||||
<div className="relative w-full aspect-video mb-2">
|
<div className="relative w-full aspect-video mb-2">
|
||||||
<Image
|
<Image
|
||||||
src={rightMain.thumbnailUrl || "/placeholder.jpg"}
|
src={rightMain.thumbnailUrl || "/placeholder.jpg"}
|
||||||
|
|
@ -218,7 +219,7 @@ export default function Health() {
|
||||||
<div className="space-y-8">
|
<div className="space-y-8">
|
||||||
{rightList.map((item) => (
|
{rightList.map((item) => (
|
||||||
<div key={item.id}>
|
<div key={item.id}>
|
||||||
<Link className="flex gap-3" href={`/detail/${item.id}`}>
|
<Link className="flex gap-3" href={`/details/${item.slug}`}>
|
||||||
<div className="relative w-[120px] h-[86px] shrink-0">
|
<div className="relative w-[120px] h-[86px] shrink-0">
|
||||||
<Image
|
<Image
|
||||||
src={item.thumbnailUrl || "/placeholder.jpg"}
|
src={item.thumbnailUrl || "/placeholder.jpg"}
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,7 @@ type Article = {
|
||||||
description: string;
|
description: string;
|
||||||
categoryName: string;
|
categoryName: string;
|
||||||
createdAt: string;
|
createdAt: string;
|
||||||
|
slug: string;
|
||||||
createdByName: string;
|
createdByName: string;
|
||||||
customCreatorName: string;
|
customCreatorName: string;
|
||||||
thumbnailUrl: string;
|
thumbnailUrl: string;
|
||||||
|
|
@ -101,7 +102,7 @@ export default function HeaderHealth() {
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-2 m-8">
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-2 m-8">
|
||||||
{mainArticle && (
|
{mainArticle && (
|
||||||
<div className="md:col-span-2 relative">
|
<div className="md:col-span-2 relative">
|
||||||
<Link href={`/detail/${mainArticle.id}`}>
|
<Link href={`/details/${mainArticle.slug}`}>
|
||||||
<Image
|
<Image
|
||||||
src={mainArticle.files?.[0]?.fileUrl || "/default-image.jpg"}
|
src={mainArticle.files?.[0]?.fileUrl || "/default-image.jpg"}
|
||||||
alt={mainArticle.title}
|
alt={mainArticle.title}
|
||||||
|
|
@ -137,7 +138,7 @@ export default function HeaderHealth() {
|
||||||
<div className="grid grid-rows-2 gap-2">
|
<div className="grid grid-rows-2 gap-2">
|
||||||
{otherArticles.map((article, index) => (
|
{otherArticles.map((article, index) => (
|
||||||
<div key={index} className="relative">
|
<div key={index} className="relative">
|
||||||
<Link href={`/detail/${article.id}`}>
|
<Link href={`/details/${article.slug}`}>
|
||||||
<Image
|
<Image
|
||||||
src={
|
src={
|
||||||
article.thumbnailUrl ||
|
article.thumbnailUrl ||
|
||||||
|
|
|
||||||
|
|
@ -148,7 +148,7 @@ export default function HealthNews() {
|
||||||
<div key={item.id}>
|
<div key={item.id}>
|
||||||
<Link
|
<Link
|
||||||
className="flex flex-col md:flex-row gap-6"
|
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">
|
<div className="relative w-full md:w-1/2 h-64">
|
||||||
<Image
|
<Image
|
||||||
|
|
@ -308,7 +308,7 @@ export default function HealthNews() {
|
||||||
<div key={item.id} className="flex gap-3 items-center">
|
<div key={item.id} className="flex gap-3 items-center">
|
||||||
<Link
|
<Link
|
||||||
className="flex gap-3 items-center"
|
className="flex gap-3 items-center"
|
||||||
href={`/detail/${item?.id}`}
|
href={`/details/${item?.slug}`}
|
||||||
>
|
>
|
||||||
<Image
|
<Image
|
||||||
src={item.thumbnailUrl || "/no-image.jpg"}
|
src={item.thumbnailUrl || "/no-image.jpg"}
|
||||||
|
|
@ -333,7 +333,7 @@ export default function HealthNews() {
|
||||||
</h2>
|
</h2>
|
||||||
<div className=" w-full">
|
<div className=" w-full">
|
||||||
<div className="relative w-full aspect-video mb-5">
|
<div className="relative w-full aspect-video mb-5">
|
||||||
<Link href={`/detail/${articles[0]?.id}`}>
|
<Link href={`/details/${articles[0]?.slug}`}>
|
||||||
<Image
|
<Image
|
||||||
src={
|
src={
|
||||||
articles[0]?.thumbnailUrl ||
|
articles[0]?.thumbnailUrl ||
|
||||||
|
|
@ -383,7 +383,7 @@ export default function HealthNews() {
|
||||||
<div key={index}>
|
<div key={index}>
|
||||||
<Link
|
<Link
|
||||||
className="flex gap-3"
|
className="flex gap-3"
|
||||||
href={`/detail/${article?.id}`}
|
href={`/details/${article?.slug}`}
|
||||||
>
|
>
|
||||||
<div className="relative w-[120px] h-[86px] shrink-0">
|
<div className="relative w-[120px] h-[86px] shrink-0">
|
||||||
<Image
|
<Image
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,7 @@ type Article = {
|
||||||
title: string;
|
title: string;
|
||||||
description: string;
|
description: string;
|
||||||
categoryName: string;
|
categoryName: string;
|
||||||
|
slug: string;
|
||||||
createdAt: string;
|
createdAt: string;
|
||||||
createdByName: string;
|
createdByName: string;
|
||||||
customCreatorName: string;
|
customCreatorName: string;
|
||||||
|
|
@ -77,7 +78,7 @@ export default function News() {
|
||||||
{articles.length > 0 ? (
|
{articles.length > 0 ? (
|
||||||
articles.map((item) => (
|
articles.map((item) => (
|
||||||
<div key={item.id} className="group cursor-pointer">
|
<div key={item.id} className="group cursor-pointer">
|
||||||
<Link href={`/detail/${item.id}`}>
|
<Link href={`/details/${item.slug}`}>
|
||||||
<div className="relative w-full aspect-[3/2] overflow-hidden">
|
<div className="relative w-full aspect-[3/2] overflow-hidden">
|
||||||
<Image
|
<Image
|
||||||
src={
|
src={
|
||||||
|
|
|
||||||
|
|
@ -199,11 +199,11 @@ export default function ArticleTable() {
|
||||||
initState();
|
initState();
|
||||||
};
|
};
|
||||||
|
|
||||||
const copyUrlArticle = async (id: number) => {
|
const copyUrlArticle = async (slug: any) => {
|
||||||
const url =
|
const url =
|
||||||
`${window.location.protocol}//${window.location.host}` +
|
`${window.location.protocol}//${window.location.host}` +
|
||||||
"/detail/" +
|
"/details/" +
|
||||||
`${id}`;
|
`${slug}`;
|
||||||
try {
|
try {
|
||||||
await navigator.clipboard.writeText(url);
|
await navigator.clipboard.writeText(url);
|
||||||
successToast("Success", "Article Copy to Clipboard");
|
successToast("Success", "Article Copy to Clipboard");
|
||||||
|
|
@ -263,7 +263,9 @@ export default function ArticleTable() {
|
||||||
</Button>
|
</Button>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
<DropdownMenuContent className="w-56">
|
<DropdownMenuContent className="w-56">
|
||||||
<DropdownMenuItem onClick={() => copyUrlArticle(article.id)}>
|
<DropdownMenuItem
|
||||||
|
onClick={() => copyUrlArticle(article.slug)}
|
||||||
|
>
|
||||||
<CopyIcon className="mr-2 h-4 w-4" />
|
<CopyIcon className="mr-2 h-4 w-4" />
|
||||||
Copy Url Article
|
Copy Url Article
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
|
|
|
||||||
|
|
@ -106,6 +106,13 @@ export async function getArticleById(id: any) {
|
||||||
return await httpGet(`/articles/${id}`, headers);
|
return await httpGet(`/articles/${id}`, headers);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export async function getArticleBySlug(slug: any) {
|
||||||
|
const headers = {
|
||||||
|
"content-type": "application/json",
|
||||||
|
};
|
||||||
|
return await httpGet(`/articles/slug/${slug}`, headers);
|
||||||
|
}
|
||||||
|
|
||||||
export async function deleteArticle(id: string) {
|
export async function deleteArticle(id: string) {
|
||||||
const headers = {
|
const headers = {
|
||||||
"content-type": "application/json",
|
"content-type": "application/json",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue