fix: navbar, berita satke and polda, content-catergory
This commit is contained in:
commit
f8c138f53b
|
|
@ -72,7 +72,7 @@ const ContentCategory = (props: { group?: string; type: string }) => {
|
|||
)}
|
||||
</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{(seeAllValue ? categories : categories?.slice(0, 8))?.map((category: any) => (
|
||||
{(seeAllValue ? categories : categories?.slice(0, 4))?.map((category: any) => (
|
||||
<div key={category?.id}>
|
||||
<div onClick={() => router.push(`${prefixPath}all/filter?category=${category?.id}`)} className="cursor-pointer relative group rounded-md overflow-hidden shadow-md hover:shadow-lg block">
|
||||
{/* Gambar */}
|
||||
|
|
@ -98,7 +98,7 @@ const ContentCategory = (props: { group?: string; type: string }) => {
|
|||
</div>
|
||||
|
||||
{/* Tombol See More / See Less */}
|
||||
{categories?.length > 8 && (
|
||||
{categories?.length > 4 && (
|
||||
<div className="flex items-center flex-row justify-center mt-6">
|
||||
<Button onClick={() => setSeeAllValue(!seeAllValue)} className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]">
|
||||
{seeAllValue ? t("seeLess") : t("seeMore")}
|
||||
|
|
|
|||
|
|
@ -5,16 +5,8 @@ import { usePathname } from "next/navigation";
|
|||
|
||||
export const DynamicLogoPolda = () => {
|
||||
const pathname = usePathname();
|
||||
const polda = pathname?.split("/")[3];
|
||||
console.log("polda", polda)
|
||||
|
||||
const getLogoSrc = () => {
|
||||
if (pathname?.startsWith("/polda/aceh")) return "/logo/polda/polda-aceh.png";
|
||||
if (pathname?.startsWith("/user")) return "/logos/user-logo.svg";
|
||||
return "/logos/default-logo.svg";
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-2">
|
||||
<Image src={getLogoSrc()} alt="Logo" width={120} height={40} className="object-contain" />
|
||||
</div>
|
||||
);
|
||||
return <div className="p-2">{pathname?.includes("/polda") && <Image src={`/logo/polda/polda-${polda}.png`} alt="Logo" width={1920} height={1080} className="object-contain h-[150px] w-[50px]" />}</div>;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -10,10 +10,13 @@ import { getHeroData } from "@/service/landing/landing";
|
|||
import { title } from "process";
|
||||
import { htmlToString } from "@/utils/globals";
|
||||
import { Link } from "@/i18n/routing";
|
||||
import { Button } from "../ui/button";
|
||||
|
||||
const ScrollableContent = () => {
|
||||
const [contentType, setContentType] = useState("all");
|
||||
const [search, setSearch] = useState("");
|
||||
const [seeAllValueSatker, setSeeAllValueSatker] = useState(false);
|
||||
const [seeAllValuePolda, setSeeAllValuePolda] = useState(false);
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const locale = params?.locale;
|
||||
|
|
@ -112,7 +115,7 @@ const ScrollableContent = () => {
|
|||
<div className="w-[10%] h-1 bg-[#bb3523]"></div>
|
||||
<div className="w-full h-1 bg-[#bb3523] mx-auto mb-4"></div>
|
||||
<div className="grid gap-4">
|
||||
{content?.slice(0, 4).map((item: any, index: number) => (
|
||||
{(seeAllValuePolda ? content : content?.slice(0, 3))?.map((item: any, index: number) => (
|
||||
<div key={index} className={`bg-white rounded-lg shadow-md overflow-hidden ${index === 0 ? "" : "flex"}`}>
|
||||
<div className={`relative ${index === 0 ? "w-full h-48" : " w-1/2 h-[150px]"}`}>
|
||||
<Link
|
||||
|
|
@ -126,7 +129,7 @@ const ScrollableContent = () => {
|
|||
: `${locale}/audio/detail/${item?.slug}`
|
||||
}
|
||||
>
|
||||
<Image src={item.thumbnailLink} alt={item.title} layout="fill" objectFit="cover" />
|
||||
<Image src={item?.thumbnailLink} alt={item?.title} layout="fill" objectFit="cover" />
|
||||
<div className="absolute top-2 right-2 bg-[#c03724] rounded-full p-1 shadow">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<g fill="none">
|
||||
|
|
@ -158,14 +161,26 @@ const ScrollableContent = () => {
|
|||
</div>
|
||||
</div>
|
||||
))}
|
||||
<button className="w-fit px-2 mt-2 py-2 border flex flex-row gap-2 border-[#bb3523] bg-white text-[#bb3523] rounded-lg font-semibold hover:bg-[#bb3523] hover:border-white hover:text-white transition">
|
||||
{/* <button className="w-fit px-2 mt-2 py-2 border flex flex-row gap-2 border-[#bb3523] bg-white text-[#bb3523] rounded-lg font-semibold hover:bg-[#bb3523] hover:border-white hover:text-white transition">
|
||||
LEBIH SEDIKIT
|
||||
<span className="text-[#bb3523] hover:text-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="m10 17l5-5m0 0l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>{" "}
|
||||
</button>{" "} */}
|
||||
{/* Tombol See More / See Less */}
|
||||
{content?.length > 3 && (
|
||||
<div className="flex items-center flex-row justify-start mt-6">
|
||||
<Button onClick={() => setSeeAllValuePolda(!seeAllValuePolda)} className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]">
|
||||
{seeAllValuePolda ? t("seeLess") : t("seeMore")} <span className="text-[#bb3523] hover:text-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="m10 17l5-5m0 0l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -175,9 +190,9 @@ const ScrollableContent = () => {
|
|||
<div className="w-[10%] h-1 bg-[#bb3523]"></div>
|
||||
<div className="w-full h-1 bg-[#bb3523] mx-auto mb-4"></div>
|
||||
<div className="grid gap-4">
|
||||
{content
|
||||
{/* {seeAllValue ? content : content
|
||||
?.filter((item: any) => item.isPublishOnPolda === true)
|
||||
.slice(0, 4)
|
||||
.slice(0, 3)
|
||||
.map((item: any, index: number) => (
|
||||
<div key={index} className={`bg-white rounded-lg shadow-md overflow-hidden ${index === 0 ? "" : "flex"}`}>
|
||||
<div className={`relative ${index === 0 ? "w-full h-48" : " w-1/2 h-[150px]"}`}>
|
||||
|
|
@ -212,15 +227,75 @@ const ScrollableContent = () => {
|
|||
<p className="text-xs text-gray-500 mt-1 truncate">{htmlToString(item.description)}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<button className="w-fit px-2 mt-2 py-2 border flex flex-row gap-2 border-[#bb3523] bg-white text-[#bb3523] rounded-lg font-semibold hover:bg-[#bb3523] hover:text-white transition">
|
||||
))} */}
|
||||
{/* <button className="w-fit px-2 mt-2 py-2 border flex flex-row gap-2 border-[#bb3523] bg-white text-[#bb3523] rounded-lg font-semibold hover:bg-[#bb3523] hover:text-white transition">
|
||||
LEBIH SEDIKIT
|
||||
<span className="text-[#bb3523] hover:text-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="m10 17l5-5m0 0l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</button> */}
|
||||
{(seeAllValueSatker ? content : content?.slice(0, 3))?.map((item: any, index: number) => (
|
||||
<div key={index} className={`bg-white rounded-lg shadow-md overflow-hidden ${index === 0 ? "" : "flex"}`}>
|
||||
<div className={`relative ${index === 0 ? "w-full h-48" : " w-1/2 h-[150px]"}`}>
|
||||
<Link
|
||||
href={
|
||||
Number(item?.fileTypeId) == 1
|
||||
? `${locale}/image/detail/${item?.slug}`
|
||||
: Number(item?.fileTypeId) == 2
|
||||
? `${locale}/video/detail/${item?.slug}`
|
||||
: Number(item?.fileTypeId) == 3
|
||||
? `${locale}/document/detail/${item?.slug}`
|
||||
: `${locale}/audio/detail/${item?.slug}`
|
||||
}
|
||||
>
|
||||
<Image src={item?.thumbnailLink} alt={item?.title} layout="fill" objectFit="cover" />
|
||||
<div className="absolute top-2 right-2 bg-[#c03724] rounded-full p-1 shadow">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<g fill="none">
|
||||
<path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
|
||||
<path
|
||||
fill="white"
|
||||
d="M20 6a2 2 0 0 1 2 2v11.333a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm-8.268 7.944L7.136 18.54l-.066.06l-.07.054v.68h13v-.68l-.07-.053l-.066-.06l-2.24-2.24l-.353.354l.055.055a1 1 0 0 1-1.32 1.497l-.094-.083zM17 3a2 2 0 0 1 1.995 1.85L19 5H5a1 1 0 0 0-.993.883L4 6v12a2 2 0 0 1-1.995-1.85L2 16V6a3 3 0 0 1 2.824-2.995L5 3zm3 5H7v7.848L10.848 12a1.25 1.25 0 0 1 1.768 0l3.241 3.24l.884-.883a1.25 1.25 0 0 1 1.768 0L20 15.848zm-3.5 1.5a1.5 1.5 0 1 1 0 3a1.5 1.5 0 0 1 0-3"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
{/* <Link
|
||||
href={
|
||||
Number(item?.fileTypeId) == 1
|
||||
? `${locale}/image/detail/${item?.slug}`
|
||||
: Number(item?.fileTypeId) == 2
|
||||
? `${locale}/video/detail/${item?.slug}`
|
||||
: Number(item?.fileTypeId) == 3
|
||||
? `${locale}/document/detail/${item?.slug}`
|
||||
: `${locale}/audio/detail/${item?.slug}`
|
||||
}
|
||||
> */}
|
||||
<div className={`${index === 0 ? "p-4" : "p-3 w-[50%]"}`}>
|
||||
<p className="text-sm text-[#bb3523] font-bold mb-1">{item.categoryName}</p>
|
||||
<h3 className="text-sm font-semibold text-gray-800">{item.title}</h3>
|
||||
<p className="text-xs text-gray-500 mt-1 truncate">{htmlToString(item.description)}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{/* Tombol See More / See Less */}
|
||||
{content?.length > 3 && (
|
||||
<div className="flex items-center flex-row justify-start mt-6">
|
||||
<Button onClick={() => setSeeAllValueSatker(!seeAllValueSatker)} className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]">
|
||||
|
||||
|
||||
{seeAllValueSatker ? t("seeLess") : t("seeMore")} <span className="text-[#bb3523] hover:text-white">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="m10 17l5-5m0 0l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue