humas
/
web-humas-fe
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix:landing

This commit is contained in:
Rama Priyanto 2025-01-17 09:57:45 +07:00
parent c065569c28
commit 0e87d7d627
19 changed files with 750 additions and 334 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/(admin)/admin/article/page.tsx
View File

@ -21,7 +21,7 @@ export default function BasicPage() {
}; };
return ( return (
<div className="overflow-x-hidden overflow-y-scroll rounded-lg border-2"> <div className="overflow-x-hidden overflow-y-scroll">
<div className="px-2 md:px-4 w-full"> <div className="px-2 md:px-4 w-full">
<div className="rounded-md my-5 px-5 py-2 bg-white dark:bg-[#18181b] flex flex-row gap-3"> <div className="rounded-md my-5 px-5 py-2 bg-white dark:bg-[#18181b] flex flex-row gap-3">
<Link href="/admin/article/create"> <Link href="/admin/article/create">
@ -30,7 +30,7 @@ export default function BasicPage() {
<AddIcon /> <AddIcon />
</Button> </Button>
</Link> </Link>
<Button {/* <Button
size="md" size="md"
color="primary" color="primary"
className="bg-[#F07C00] text-white" className="bg-[#F07C00] text-white"
@ -38,9 +38,9 @@ export default function BasicPage() {
> >
<AddIcon /> <AddIcon />
Generate Article Generate Article
</Button> </Button> */}
</div> </div>
<div className="bg-white dark:bg-[#18181b] rounded-xl my-5 p-2"> <div className="bg-white dark:bg-[#18181b] rounded-xl p-2">
<ArticleTable /> <ArticleTable />
</div> </div>
</div> </div>

2
app/(admin)/admin/dashboard/page.tsx
View File

@ -2,7 +2,7 @@ import DashboardContainer from "@/components/main/dashboard/dashboard-container"
export default function AdminPage() { export default function AdminPage() {
return ( return (
<div className="h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-small"> <div className="h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid">
<div className="px-4"> <div className="px-4">
<DashboardContainer /> <DashboardContainer />
</div> </div>

4
app/(admin)/admin/master-category/page.tsx Normal file
View File

@ -0,0 +1,4 @@
"use client";
export default function MasterCategory() {
return <div>master category</div>;
}

517
components/icons/sidebar-icon.tsx
View File

@ -2,166 +2,415 @@ import * as React from "react";
import { IconSvgProps } from "@/types/globals"; import { IconSvgProps } from "@/types/globals";
export const MenuBurgerIcon = ({ export const MenuBurgerIcon = ({
size, size,
height = 24, height = 24,
width = 24, width = 24,
fill = "currentColor", fill = "currentColor",
...props ...props
}: IconSvgProps) => ( }: IconSvgProps) => (
<svg <svg
fill="none" fill="none"
height={size || height} height={size || height}
viewBox="0 0 24 24" viewBox="0 0 24 24"
width={size || width} width={size || width}
{...props} {...props}
> >
<path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M3 6h18M3 12h18M3 18h18" /> <path
</svg> fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2.5"
d="M3 6h18M3 12h18M3 18h18"
/>
</svg>
); );
export const DashboardIcon = ({ export const DashboardIcon = ({
size, size,
height = 24, height = 24,
width = 24, width = 24,
fill = "currentColor", fill = "currentColor",
...props ...props
}: IconSvgProps) => ( }: IconSvgProps) => (
<svg <svg
fill="none" fill="none"
height={size || height} height={size || height}
viewBox="0 0 24 24" viewBox="0 0 24 24"
width={size || width} width={size || width}
{...props} {...props}
> >
<path fill="currentColor" d="M13 9V3h8v6zM3 13V3h8v10zm10 8V11h8v10zM3 21v-6h8v6z" /> <path
</svg> fill="currentColor"
d="M13 9V3h8v6zM3 13V3h8v10zm10 8V11h8v10zM3 21v-6h8v6z"
/>
</svg>
); );
export const HomeIcon = ({ export const HomeIcon = ({
size, size,
height = 24, height = 24,
width = 24, width = 24,
fill = "currentColor", fill = "currentColor",
...props ...props
}: IconSvgProps) => ( }: IconSvgProps) => (
<svg <svg
fill="none" fill="none"
height={size || height} height={size || height}
viewBox="0 0 24 24" viewBox="0 0 24 24"
width={size || width} width={size || width}
{...props} {...props}
> >
<g fill="none" stroke="currentColor" strokeWidth="1.5"> <g fill="none" stroke="currentColor" strokeWidth="1.5">
<path d="M2 12.204c0-2.289 0-3.433.52-4.381c.518-.949 1.467-1.537 3.364-2.715l2-1.241C9.889 2.622 10.892 2 12 2c1.108 0 2.11.622 4.116 1.867l2 1.241c1.897 1.178 2.846 1.766 3.365 2.715c.519.948.519 2.092.519 4.38v1.522c0 3.9 0 5.851-1.172 7.063C19.657 22 17.771 22 14 22h-4c-3.771 0-5.657 0-6.828-1.212C2 19.576 2 17.626 2 13.725z" /> <path d="M2 12.204c0-2.289 0-3.433.52-4.381c.518-.949 1.467-1.537 3.364-2.715l2-1.241C9.889 2.622 10.892 2 12 2c1.108 0 2.11.622 4.116 1.867l2 1.241c1.897 1.178 2.846 1.766 3.365 2.715c.519.948.519 2.092.519 4.38v1.522c0 3.9 0 5.851-1.172 7.063C19.657 22 17.771 22 14 22h-4c-3.771 0-5.657 0-6.828-1.212C2 19.576 2 17.626 2 13.725z" />
<path strokeLinecap="round" d="M12 15v3" /> <path strokeLinecap="round" d="M12 15v3" />
</g> </g>
</svg> </svg>
); );
export const Submenu1Icon = ({ export const Submenu1Icon = ({
size, size,
height = 24, height = 24,
width = 24, width = 24,
fill = "currentColor", fill = "currentColor",
...props ...props
}: IconSvgProps) => ( }: IconSvgProps) => (
<svg <svg
fill="none" fill="none"
height={size || height} height={size || height}
viewBox="0 0 48 48" viewBox="0 0 48 48"
width={size || width} width={size || width}
{...props} {...props}
> >
<defs> <defs>
<mask id="ipTData0"> <mask id="ipTData0">
<g fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="4"> <g
<path d="M44 11v27c0 3.314-8.954 6-20 6S4 41.314 4 38V11" /><path d="M44 29c0 3.314-8.954 6-20 6S4 32.314 4 29m40-9c0 3.314-8.954 6-20 6S4 23.314 4 20" /> fill="none"
<ellipse cx="24" cy="10" fill="#555" rx="20" ry="6" /> stroke="#fff"
</g> strokeLinecap="round"
</mask> strokeLinejoin="round"
</defs> strokeWidth="4"
<path fill="currentColor" d="M0 0h48v48H0z" mask="url(#ipTData0)" /> >
</svg> <path d="M44 11v27c0 3.314-8.954 6-20 6S4 41.314 4 38V11" />
<path d="M44 29c0 3.314-8.954 6-20 6S4 32.314 4 29m40-9c0 3.314-8.954 6-20 6S4 23.314 4 20" />
<ellipse cx="24" cy="10" fill="#555" rx="20" ry="6" />
</g>
</mask>
</defs>
<path fill="currentColor" d="M0 0h48v48H0z" mask="url(#ipTData0)" />
</svg>
); );
export const Submenu2Icon = ({ export const Submenu2Icon = ({
size, size,
height = 24, height = 24,
width = 24, width = 24,
fill = "currentColor", fill = "currentColor",
...props ...props
}: IconSvgProps) => ( }: IconSvgProps) => (
<svg <svg
fill="none" fill="none"
height={size || height} height={size || height}
viewBox="0 0 256 256" viewBox="0 0 256 256"
width={size || width} width={size || width}
{...props} {...props}
> >
<path fill="currentColor" d="M230.93 220a8 8 0 0 1-6.93 4H32a8 8 0 0 1-6.92-12c15.23-26.33 38.7-45.21 66.09-54.16a72 72 0 1 1 73.66 0c27.39 8.95 50.86 27.83 66.09 54.16a8 8 0 0 1 .01 8" /> <path
</svg> fill="currentColor"
d="M230.93 220a8 8 0 0 1-6.93 4H32a8 8 0 0 1-6.92-12c15.23-26.33 38.7-45.21 66.09-54.16a72 72 0 1 1 73.66 0c27.39 8.95 50.86 27.83 66.09 54.16a8 8 0 0 1 .01 8"
/>
</svg>
); );
export const InfoCircleIcon = ({ export const InfoCircleIcon = ({
size, size,
height = 24, height = 24,
width = 24, width = 24,
fill = "currentColor", fill = "currentColor",
...props ...props
}: IconSvgProps) => ( }: IconSvgProps) => (
<svg <svg
fill="none" fill="none"
height={size || height} height={size || height}
viewBox="0 0 1024 1024" viewBox="0 0 1024 1024"
width={size || width} width={size || width}
{...props} {...props}
> >
<path fill="currentColor" d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448s448-200.6 448-448S759.4 64 512 64m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372s372 166.6 372 372s-166.6 372-372 372" /> <path
<path fill="currentColor" d="M464 336a48 48 0 1 0 96 0a48 48 0 1 0-96 0m72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8" /> fill="currentColor"
</svg> d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448s448-200.6 448-448S759.4 64 512 64m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372s372 166.6 372 372s-166.6 372-372 372"
/>
<path
fill="currentColor"
d="M464 336a48 48 0 1 0 96 0a48 48 0 1 0-96 0m72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8"
/>
</svg>
); );
export const MinusCircleIcon = ({ export const MinusCircleIcon = ({
size, size,
height = 24, height = 24,
width = 24, width = 24,
fill = "currentColor", fill = "currentColor",
...props ...props
}: IconSvgProps) => ( }: IconSvgProps) => (
<svg <svg
fill="none" fill="none"
height={size || height} height={size || height}
viewBox="0 0 16 16" viewBox="0 0 16 16"
width={size || width} width={size || width}
{...props} {...props}
> >
<g fill="currentColor"> <g fill="currentColor">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" /> <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
<path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8" /> <path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8" />
</g> </g>
</svg> </svg>
); );
export const TableIcon = ({ export const TableIcon = ({
size, size,
height = 24, height = 24,
width = 22, width = 22,
fill = "currentColor", fill = "currentColor",
...props ...props
}: IconSvgProps) => ( }: IconSvgProps) => (
<svg <svg
fill="none" fill="none"
height={size || height} height={size || height}
viewBox="0 0 24 22" viewBox="0 0 24 22"
width={size || width} width={size || width}
stroke-width="1.5" strokeWidth="1.5"
stroke="currentColor" stroke="currentColor"
{...props} {...props}
> >
<path stroke-linecap="round" stroke-linejoin="round" d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 0 1-1.125-1.125M3.375 19.5h7.5c.621 0 1.125-.504 1.125-1.125m-9.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-7.5A1.125 1.125 0 0 1 12 18.375m9.75-12.75c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125m19.5 0v1.5c0 .621-.504 1.125-1.125 1.125M2.25 5.625v1.5c0 .621.504 1.125 1.125 1.125m0 0h17.25m-17.25 0h7.5c.621 0 1.125.504 1.125 1.125M3.375 8.25c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m17.25-3.75h-7.5c-.621 0-1.125.504-1.125 1.125m8.625-1.125c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M12 10.875v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125M13.125 12h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125M20.625 12c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5M12 14.625v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 14.625c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m0 1.5v-1.5m0 0c0-.621.504-1.125 1.125-1.125m0 0h7.5" /> <path
</svg> strokeLinecap="round"
); strokeLinejoin="round"
d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 0 1-1.125-1.125M3.375 19.5h7.5c.621 0 1.125-.504 1.125-1.125m-9.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-7.5A1.125 1.125 0 0 1 12 18.375m9.75-12.75c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125m19.5 0v1.5c0 .621-.504 1.125-1.125 1.125M2.25 5.625v1.5c0 .621.504 1.125 1.125 1.125m0 0h17.25m-17.25 0h7.5c.621 0 1.125.504 1.125 1.125M3.375 8.25c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m17.25-3.75h-7.5c-.621 0-1.125.504-1.125 1.125m8.625-1.125c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M12 10.875v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125M13.125 12h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125M20.625 12c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5M12 14.625v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 14.625c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m0 1.5v-1.5m0 0c0-.621.504-1.125 1.125-1.125m0 0h7.5"
/>
</svg>
);
export const ArticleIcon = ({
size,
height = 20,
width = 20,
fill = "currentColor",
...props
}: IconSvgProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
height={size || height}
width={size || width}
viewBox="0 0 20 20"
{...props}
>
<path
fill="currentColor"
d="M5 1a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm0 3h5v1H5zm0 2h5v1H5zm0 2h5v1H5zm10 7H5v-1h10zm0-2H5v-1h10zm0-2H5v-1h10zm0-2h-4V4h4z"
/>
</svg>
);
export const MagazineIcon = ({
size,
height = 20,
width = 20,
fill = "currentColor",
...props
}: IconSvgProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
height={size || height}
width={size || width}
viewBox="0 0 128 128"
{...props}
>
<path
fill="#bdbdbd"
d="M-125.7 124.54V11.79c29.36 1.85 58.81 1.91 88.18.19c1.77-.1 3.21 1.08 3.21 2.66v107.04c0 1.58-1.44 2.94-3.21 3.05a727 727 0 0 1-88.18-.19"
/>
<path
fill="#e0e0e0"
d="M-125.7 124.54V11.79c27.11-5.31 54.34-8.57 81.45-9.76c1.64-.07 2.96 1.15 2.96 2.73V111.8c0 1.58-1.33 2.9-2.96 2.98c-27.11 1.19-54.34 4.45-81.45 9.76"
/>
<g fill="#757575">
<path d="M-92.84 42.86c-7.46 1-14.91 2.16-22.36 3.47v-3.22c7.45-1.31 14.9-2.47 22.36-3.47zm-12.76-15.72c-3.2.51-6.4 1.04-9.6 1.6v-8.47c3.2-.56 6.4-1.1 9.6-1.6zm12.17-1.78c-3.2.43-6.4.9-9.6 1.39v-8.47c3.2-.49 6.4-.95 9.6-1.39zm12.17-1.52q-4.8.54-9.6 1.17v-8.47q4.8-.63 9.6-1.17zm12.17-1.23c-3.2.29-6.4.61-9.6.95v-8.47c3.2-.35 6.4-.66 9.6-.95zm17.21 5.12a548 548 0 0 0-63.31 7.42v-.81c21.09-3.72 42.23-6.19 63.31-7.42zm-32.67 14.08c-2.21.26-4.41.54-6.62.83v-3.22c2.21-.29 4.41-.57 6.62-.83z" />
<path d="M-75.06 40.77c-3.6.37-7.21.77-10.81 1.2v-3.22c3.6-.44 7.21-.84 10.81-1.2zm12.29-1.11l-3.66.3v-3.22l3.66-.3z" />
<path d="M-65.38 39.87c-2.47.21-4.95.43-7.42.67v-3.22c2.47-.24 4.95-.46 7.42-.67zm10.32-.76c-2.02.13-4.05.27-6.07.42v-3.22c2.02-.15 4.05-.29 6.07-.42zm-49.89 14.57c-3.42.54-6.83 1.11-10.25 1.71v-3.22c3.41-.6 6.83-1.17 10.25-1.71zm9.51-1.4c-2.63.37-5.26.75-7.89 1.16v-3.22c2.63-.41 5.26-.79 7.89-1.16z" />
<path d="M-84.55 50.87c-3.95.47-7.89.98-11.84 1.54v-3.22c3.95-.56 7.89-1.07 11.84-1.54z" />
<path d="M-75.06 49.82c-3.6.37-7.21.77-10.81 1.2V47.8c3.6-.44 7.21-.84 10.81-1.2zm12.29-1.1l-3.66.3V45.8l3.66-.3z" />
<path d="M-61.13 48.59c-3.89.29-7.78.63-11.67 1.01v-3.22c3.89-.38 7.78-.71 11.67-1.01z" />
<path d="M-51.89 47.97c-3.08.18-6.16.39-9.25.62v-3.22c3.08-.23 6.17-.44 9.25-.62zm-49.5 14.22q-6.9 1.035-13.8 2.25v-3.22q6.9-1.215 13.8-2.25z" />
<path d="M-95.44 61.33c-2.63.37-5.26.75-7.89 1.16v-3.22c2.63-.41 5.26-.79 7.89-1.16zm10.89-1.4c-2.76.33-5.53.68-8.29 1.05v-3.22c2.76-.37 5.53-.72 8.29-1.05z" />
<path d="M-78.26 59.21c-2.54.27-5.07.56-7.61.87v-3.22c2.54-.31 5.07-.6 7.61-.87zm26.37 24.99q-12.075.705-24.18 1.95V55.76q12.09-1.245 24.18-1.95zm-38.55-14.48c-8.25 1.07-16.51 2.34-24.75 3.79v-3.22c8.24-1.45 16.5-2.72 24.75-3.79z" />
<path d="M-95.44 70.39c-1.31.18-2.63.37-3.94.56v-3.22c1.31-.19 2.63-.38 3.94-.56zm10.89-1.41c-2.21.26-4.41.54-6.62.83v-3.22c2.21-.29 4.41-.57 6.62-.83z" />
<path d="M-78.32 68.28c-2.51.27-5.03.56-7.54.86v-3.22c2.51-.31 5.03-.59 7.54-.86zm-23.07 12.03q-6.9 1.035-13.8 2.25v-3.22q6.9-1.215 13.8-2.25z" />
<path d="M-98.16 79.83c-1.72.25-3.44.51-5.17.77v-3.22c1.72-.27 3.44-.52 5.17-.77zm13.61-1.79q-5.445.645-10.89 1.41v-3.22c3.63-.51 7.26-.97 10.89-1.41z" />
<path d="M-80.46 77.57c-1.8.2-3.6.41-5.41.63v-3.22c1.8-.22 3.6-.43 5.41-.63zm-16.95 11.21c-5.93.85-11.86 1.79-17.79 2.84V88.4c5.92-1.04 11.85-1.99 17.79-2.84z" />
<path d="M-92.54 88.1c-2.28.31-4.56.62-6.84.96v-3.22q3.42-.495 6.84-.96zm7.99-1.01c-1.75.21-3.5.43-5.25.65v-3.22c1.75-.23 3.5-.44 5.25-.65z" />
<path d="M-78.32 86.39c-2.51.27-5.03.56-7.54.86v-3.22c2.51-.31 5.03-.59 7.54-.86zm-23.07 12.03q-6.9 1.035-13.8 2.25v-3.22q6.9-1.215 13.8-2.25zm14.22-1.95q-6.105.75-12.21 1.65V94.9q6.105-.9 12.21-1.65z" />
<path d="M-84.55 96.15c-2.21.26-4.41.54-6.62.83v-3.22c2.21-.29 4.41-.57 6.62-.83z" />
<path d="M-75.06 95.1c-3.6.37-7.21.77-10.81 1.2v-3.22c3.6-.44 7.21-.84 10.81-1.2zm12.29-1.1l-3.66.3v-3.22l3.66-.3zm-5.64.47c-1.46.13-2.93.27-4.39.41v-3.22c1.46-.14 2.93-.28 4.39-.41z" />
<path d="M-51.89 93.25c-6 .35-12.01.8-18.01 1.35v-3.22c6.01-.55 12.01-1 18.01-1.35zm-43.56 13.36c-6.59.92-13.17 1.96-19.75 3.11v-3.22c6.58-1.16 13.16-2.2 19.75-3.11zm22.09-2.62c-3.48.34-6.96.72-10.44 1.13v-3.22c3.48-.41 6.96-.78 10.44-1.13zm-13.53 1.5c-2.18.27-4.36.55-6.55.85v-3.22c2.18-.3 4.36-.58 6.55-.85z" />
</g>
<path
fill="#eee"
d="M15.71 280.41V170.86h76.08a2.77 2.77 0 0 1 2.77 2.77v104.01a2.77 2.77 0 0 1-2.77 2.77z"
/>
<g fill="#757575">
<path d="M25.53 203.19h20.88v3.13H25.53zm0-22.19h8.96v8.23h-8.96zm11.36 0h8.96v8.23h-8.96zm11.36 0h8.96v8.23h-8.96zm11.36 0h8.96v8.23h-8.96zm-34.08 13.66h59.12v.79H25.53zm22.44 8.53h6.18v3.13h-6.18z" />
<path d="M52.92 203.19h10.09v3.13H52.92zm18.14 0h3.42v3.13h-3.42z" />
<path d="M65.11 203.19h6.93v3.13h-6.93zm10.9 0h5.67v3.13h-5.67zm-50.48 8.8h9.57v3.13h-9.57zm11.08 0h7.37v3.13h-7.37z" />
<path d="M43.1 211.99h11.05v3.13H43.1z" />
<path d="M52.92 211.99h10.09v3.13H52.92zm18.14 0h3.42v3.13h-3.42z" />
<path d="M65.11 211.99H76v3.13H65.11zm10.9 0h8.64v3.13h-8.64zm-50.48 8.8h12.89v3.13H25.53z" />
<path d="M36.61 220.79h7.37v3.13h-7.37zm9.8 0h7.74v3.13h-7.74z" />
<path d="M52.92 220.79h7.1v3.13h-7.1zm9.15 0h22.58v29.53H62.07zm-36.54 8.8h23.11v3.13H25.53z" />
<path d="M40.3 229.59h3.68v3.13H40.3zm7.67 0h6.18v3.13h-6.18z" />
<path d="M52.92 229.59h7.04v3.13h-7.04zm-27.39 8.8h12.89v3.13H25.53z" />
<path d="M36.61 238.39h4.82v3.13h-4.82zm7.37 0h10.17v3.13H43.98z" />
<path d="M52.92 238.39h5.04v3.13h-5.04zm-27.39 8.79h16.61v3.13H25.53z" />
<path d="M40.3 247.18h6.38v3.13H40.3zm8.95 0h4.9v3.13h-4.9z" />
<path d="M52.92 247.18h7.04v3.13h-7.04zm-27.39 8.8h12.89v3.13H25.53zm14.77 0h11.39v3.13H40.3z" />
<path d="M47.97 255.98h6.18v3.13h-6.18z" />
<path d="M52.92 255.98h10.09v3.13H52.92zm18.14 0h3.42v3.13h-3.42zm-5.95 0h4.1v3.13h-4.1z" />
<path d="M67.82 255.98h16.82v3.13H67.82zm-42.29 8.8h18.44v3.13H25.53zm29.32 0h9.74v3.13h-9.74zm-9 0h6.11v3.13h-6.11z" />
</g>
<path
fill="#bdbdbd"
d="M16.62 124.27V14.04c30.52 2.2 61.18 2.27 91.71.21c1.68-.11 3.05 1.04 3.05 2.58v104.65c0 1.54-1.36 2.89-3.05 3a659 659 0 0 1-91.71-.21"
/>
<path
fill="#e0e0e0"
d="M16.62 124.25V14.02C44.36 7.91 72.21 3.9 99.95 2.03c1.53-.1 2.77 1.07 2.77 2.61v104.65c0 1.54-1.24 2.87-2.77 2.97c-27.74 1.87-55.59 5.88-83.33 11.99"
/>
<path
fill="none"
stroke="#616161"
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth="5"
d="M28.75 49.34c20.6-4.08 41.25-7 61.84-8.74M28.75 63.23a565 565 0 0 1 26.45-4.6M28.75 77.11a565 565 0 0 1 26.45-4.6m-26.45 33.06c20.6-4.08 41.25-7 61.84-8.74M28.75 91a565 565 0 0 1 26.45-4.6"
/>
<path
fill="#616161"
d="M64.86 87.55a560 560 0 0 1 24.67-2.69c1.49-.13 2.69-1.44 2.69-2.94V54.54c0-1.5-1.21-2.61-2.69-2.48c-8.22.71-16.44 1.61-24.67 2.69c-1.49.2-2.7 1.58-2.7 3.07V85.2c.01 1.5 1.21 2.55 2.7 2.35m-34.4-52.14c2.03-.4 4.05-.78 6.08-1.15c1.49-.27 2.69-1.7 2.69-3.2v-7.02c0-1.5-1.21-2.49-2.69-2.22c-2.03.37-4.05.76-6.08 1.15c-1.49.29-2.69 1.75-2.69 3.24v7.02c-.01 1.5 1.2 2.47 2.69 2.18m15.96-2.88c2.03-.34 4.05-.66 6.08-.97c1.49-.23 2.7-1.62 2.7-3.12v-7.02c0-1.5-1.21-2.53-2.7-2.3c-2.03.31-4.06.64-6.08.97c-1.49.25-2.69 1.67-2.69 3.16v7.02c0 1.5 1.2 2.51 2.69 2.26m15.97-2.41c2.03-.28 4.06-.54 6.08-.8c1.49-.19 2.7-1.54 2.7-3.04v-7.02c0-1.5-1.21-2.57-2.7-2.38c-2.03.25-4.06.52-6.08.8c-1.49.2-2.7 1.59-2.7 3.08v7.02c.01 1.5 1.22 2.54 2.7 2.34"
/>
<path
fill="#e0e0e0"
d="M374.07 165.73V44.63h92.1a3.06 3.06 0 0 1 3.06 3.06v114.98a3.06 3.06 0 0 1-3.06 3.06z"
/>
<path
fill="none"
stroke="#616161"
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth="5"
d="M387.48 86.21h68.34m-68.34 15.26h29.23m-29.23 15.26h29.23M387.48 148h68.34m-68.34-16.01h29.23"
/>
<path
fill="#616161"
d="M427.38 134.75h27.26c1.64 0 2.98-1.33 2.98-2.98v-30.08c0-1.64-1.33-2.98-2.98-2.98h-27.26c-1.64 0-2.98 1.33-2.98 2.98v30.08a2.987 2.987 0 0 0 2.98 2.98m-38.01-63.47h6.72c1.64 0 2.98-1.33 2.98-2.98v-7.71c0-1.64-1.33-2.98-2.98-2.98h-6.72c-1.64 0-2.98 1.33-2.98 2.98v7.71c0 1.65 1.33 2.98 2.98 2.98m17.64 0h6.72c1.64 0 2.98-1.33 2.98-2.98v-7.71c0-1.64-1.33-2.98-2.98-2.98h-6.72c-1.64 0-2.98 1.33-2.98 2.98v7.71a2.987 2.987 0 0 0 2.98 2.98m17.65 0h6.72c1.64 0 2.98-1.33 2.98-2.98v-7.71c0-1.64-1.33-2.98-2.98-2.98h-6.72c-1.64 0-2.98 1.33-2.98 2.98v7.71c0 1.65 1.33 2.98 2.98 2.98"
/>
<path
fill="#bdbdbd"
d="M479.86 165.73V44.63h92.1a3.06 3.06 0 0 1 3.06 3.06v114.98a3.06 3.06 0 0 1-3.06 3.06z"
/>
</svg>
);
export const StaticPageIcon = ({
size,
height = 20,
width = 20,
fill = "currentColor",
...props
}: IconSvgProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={size || width}
height={size || height}
viewBox="0 0 2048 2048"
{...props}
>
<path
fill="currentColor"
d="M1755 512h-475V37zm37 128v1408H128V0h1024v640z"
/>
</svg>
);
export const MasterUsersIcon = ({
size,
height = 24,
width = 24,
fill = "currentColor",
...props
}: IconSvgProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={size || width}
height={size || height}
viewBox="0 0 640 512"
{...props}
>
<path
fill="currentColor"
d="M144 0a80 80 0 1 1 0 160a80 80 0 1 1 0-160m368 0a80 80 0 1 1 0 160a80 80 0 1 1 0-160M0 298.7C0 239.8 47.8 192 106.7 192h42.7c15.9 0 31 3.5 44.6 9.7c-1.3 7.2-1.9 14.7-1.9 22.3c0 38.2 16.8 72.5 43.3 96H21.3C9.6 320 0 310.4 0 298.7M405.3 320h-.7c26.6-23.5 43.3-57.8 43.3-96c0-7.6-.7-15-1.9-22.3c13.6-6.3 28.7-9.7 44.6-9.7h42.7c58.9 0 106.7 47.8 106.7 106.7c0 11.8-9.6 21.3-21.3 21.3H405.4zM224 224a96 96 0 1 1 192 0a96 96 0 1 1-192 0m-96 261.3c0-73.6 59.7-133.3 133.3-133.3h117.3c73.7 0 133.4 59.7 133.4 133.3c0 14.7-11.9 26.7-26.7 26.7H154.6c-14.7 0-26.7-11.9-26.7-26.7z"
/>
</svg>
);
export const MasterRoleIcon = ({
size,
height = 24,
width = 24,
fill = "currentColor",
...props
}: IconSvgProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={size || width}
height={size || height}
viewBox="0 0 24 24"
{...props}
>
<path
fill="currentColor"
d="M15 21h-2a2 2 0 0 1 0-4h2v-2h-2a4 4 0 0 0 0 8h2Zm8-2a4 4 0 0 1-4 4h-2v-2h2a2 2 0 0 0 0-4h-2v-2h2a4 4 0 0 1 4 4"
/>
<path
fill="currentColor"
d="M14 18h4v2h-4zm-7 1a6 6 0 0 1 .09-1H3v-1.4c0-2 4-3.1 6-3.1a8.6 8.6 0 0 1 1.35.125A5.95 5.95 0 0 1 13 13h5V4a2.006 2.006 0 0 0-2-2h-4.18a2.988 2.988 0 0 0-5.64 0H2a2.006 2.006 0 0 0-2 2v14a2.006 2.006 0 0 0 2 2h5.09A6 6 0 0 1 7 19M9 2a1 1 0 1 1-1 1a1.003 1.003 0 0 1 1-1m0 4a3 3 0 1 1-3 3a2.996 2.996 0 0 1 3-3"
/>
</svg>
);
export const MasterCategoryIcon = ({
size,
height = 24,
width = 24,
fill = "currentColor",
...props
}: IconSvgProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={size || width}
height={size || height}
viewBox="0 0 48 48"
{...props}
>
<defs>
<mask id="ipSTag0">
<g fill="none" strokeLinejoin="round" strokeWidth="4">
<path
fill="#fff"
stroke="#fff"
d="M8 44V6a2 2 0 0 1 2-2h28a2 2 0 0 1 2 2v38l-16-8.273z"
/>
<path stroke="#000" strokeLinecap="round" d="M16 18h16" />
</g>
</mask>
</defs>
<path fill="currentColor" d="M0 0h48v48H0z" mask="url(#ipSTag0)" />
</svg>
);

4
components/landing/BannerHumas.tsx
View File

@ -8,10 +8,10 @@ export default function BannerHumas() {
<img <img
src="headerbanner1.png" src="headerbanner1.png"
alt="humasbanner" alt="humasbanner"
className="w-full relative h-[33vh] lg:h-[95vh] object-cover" className="w-full relative h-[78vh] lg:h-[95vh] object-cover"
/> />
<div className="absolute lg:mt-[50px] top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center w-full lg:w-[75%]"> <div className="absolute lg:mt-[50px] top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center w-full lg:w-[75%]">
<p className="lg:text-[42px] lg:leading-10 font-bold pb-1 md:pb-5"> <p className="text-[30px] lg:text-[42px] lg:leading-10 font-bold pb-1 md:pb-5">
{t("jumbotron")} {t("jumbotron")}
</p> </p>
<p className="text-xs md:text-medium">{`"${t("phrase")}"`}</p> <p className="text-xs md:text-medium">{`"${t("phrase")}"`}</p>

38
components/landing/ENewsPolri.tsx
View File

@ -21,7 +21,6 @@ export default function ENewsPolri() {
const req = { page: 1, search: "", limit: "10" }; const req = { page: 1, search: "", limit: "10" };
const response = await getListArticle(req); const response = await getListArticle(req);
console.log("res", response?.data?.data);
setArticle(response?.data?.data); setArticle(response?.data?.data);
} }
getArticle(); getArticle();
@ -38,10 +37,6 @@ export default function ENewsPolri() {
<Swiper <Swiper
centeredSlides={false} centeredSlides={false}
spaceBetween={10} spaceBetween={10}
autoplay={{
delay: 5000,
disableOnInteraction: false,
}}
navigation={true} navigation={true}
modules={[Autoplay, Navigation]} modules={[Autoplay, Navigation]}
className="mySwiper" className="mySwiper"
@ -52,6 +47,22 @@ export default function ENewsPolri() {
slidesPerView: 3, // Set slidesPerView to 1 on mobile slidesPerView: 3, // Set slidesPerView to 1 on mobile
}, },
}} }}
onSwiper={(swiper) => {
swiper.navigation.nextEl?.classList.add(
"bg-white/70",
"!text-black",
"rounded-full",
"!w-[40px]",
"!h-[40px]"
);
swiper.navigation.prevEl?.classList.add(
"bg-white/70",
"!text-black",
"rounded-full",
"!w-[40px]",
"!h-[40px]"
);
}}
> >
{article?.map((newsItem: any) => ( {article?.map((newsItem: any) => (
<SwiperSlide key={newsItem.id}> <SwiperSlide key={newsItem.id}>
@ -68,13 +79,16 @@ export default function ENewsPolri() {
{textEllipsis(newsItem.title, 40)} {textEllipsis(newsItem.title, 40)}
</p> </p>
</Link> </Link>
<p className="py-[2px] text-left text-sm"> <div className="flex flex-row gap-1">
{convertDateFormat(newsItem.createdAt)} WIB {" "}
</p> <p className="py-[2px] text-left text-xs">
<p className="flex items-center gap-1 text-sm"> {convertDateFormat(newsItem.createdAt)} WIB
<EyeIcon className="text-white" /> </p>
{newsItem.viewCount === null ? 0 : newsItem.viewCount} <p className="flex items-center gap-1 text-xs">
</p> <EyeIcon className="text-white" />
{newsItem.viewCount === null ? 0 : newsItem.viewCount}
</p>
</div>
</div> </div>
</CardFooter> </CardFooter>
</Card> </Card>

247
components/landing/HeaderNews.tsx
View File

@ -1,13 +1,18 @@
"use client"; "use client";
import { Button, Card, CardFooter, ScrollShadow } from "@nextui-org/react"; import {
Button,
Card,
CardFooter,
CircularProgress,
ScrollShadow,
} from "@nextui-org/react";
import Image from "next/image"; import Image from "next/image";
import { EyeIcon } from "../icons"; import { ChevronLeftIcon, ChevronRightIcon, EyeIcon } from "../icons";
import { Swiper, SwiperSlide } from "swiper/react"; import { Swiper, SwiperSlide, useSwiper } from "swiper/react";
import "swiper/css"; import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/effect-fade";
import "swiper/css/navigation"; import "swiper/css/navigation";
import { Autoplay, Pagination, Navigation } from "swiper/modules";
import { Autoplay, Pagination, Navigation, Controller } from "swiper/modules";
import Link from "next/link"; import Link from "next/link";
import GPRKominfo from "../ui/social-media/gpr-kominfo"; import GPRKominfo from "../ui/social-media/gpr-kominfo";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
@ -15,6 +20,8 @@ import { getListArticle } from "@/service/article";
import { convertDateFormat, textEllipsis } from "@/utils/global"; import { convertDateFormat, textEllipsis } from "@/utils/global";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { data } from "autoprefixer"; import { data } from "autoprefixer";
import { Controller as FormController } from "react-hook-form";
import { Nabla } from "next/font/google";
export default function HeaderNews() { export default function HeaderNews() {
const [article, setArticle] = useState<any>([]); const [article, setArticle] = useState<any>([]);
@ -30,46 +37,69 @@ export default function HeaderNews() {
}, []); }, []);
return ( return (
<div className="flex flex-col lg:flex-row gap-3 bg-white p-1 lg:p-8 lg:h-[70vh]"> <div className="flex flex-col lg:flex-row gap-3 lg:gap-8 bg-white p-1 lg:p-8 lg:h-[70vh]">
<div className="lg:hidden w-full h-full"> <div className="lg:hidden w-full h-full">
<Swiper {article ? (
centeredSlides={true} <Swiper
autoplay={{ centeredSlides={true}
delay: 5000, autoplay={{
disableOnInteraction: false, delay: 5000,
}} disableOnInteraction: false,
navigation={true} }}
modules={[Navigation]} navigation={true}
className="mySwiper" className="mySwiper"
> modules={[Autoplay, Controller, Navigation]}
{article?.map((newsItem: any) => ( onSwiper={(swiper) => {
<SwiperSlide key={newsItem.id}> swiper.navigation.nextEl?.classList.add(
<Card isFooterBlurred radius="lg" className="border-none"> "bg-white/70",
<img "!text-black",
alt="headernews" "rounded-full",
src="/headernews.png" "!w-[24px]",
className="h-[25vh] object-cover" "!h-[24px]"
/> );
<CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10"> swiper.navigation.prevEl?.classList.add(
<div className="text-black dark:text-white"> "bg-white/70",
<Link href={`news/detail/${newsItem.id}-${newsItem?.slug}`}> "!text-black",
<p className="text-left font-semibold"> "rounded-full",
{textEllipsis(newsItem.title, 40)} "!w-[24px]",
"!h-[24px]"
);
}}
>
{article?.map((newsItem: any) => (
<SwiperSlide key={newsItem.id}>
<Card isFooterBlurred radius="lg" className="border-none">
<img
alt="headernews"
src="/headernews.png"
className="h-[25vh] object-cover"
/>
<CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
<div className="text-black dark:text-white">
<Link
href={`news/detail/${newsItem.id}-${newsItem?.slug}`}
>
<p className="text-left font-semibold">
{textEllipsis(newsItem.title, 40)}
</p>
</Link>
<p className="py-[2px] text-left text-sm">
{convertDateFormat(newsItem.createdAt)} WIB
</p> </p>
</Link> <p className="flex items-center gap-1 text-sm">
<p className="py-[2px] text-left text-sm"> <EyeIcon className="text-black dark:text-white" />
{convertDateFormat(newsItem.createdAt)} WIB {newsItem.viewCount === null ? 0 : newsItem.viewCount}
</p> </p>
<p className="flex items-center gap-1 text-sm"> </div>
<EyeIcon className="text-black dark:text-white" /> </CardFooter>
{newsItem.viewCount === null ? 0 : newsItem.viewCount} </Card>
</p> </SwiperSlide>
</div> ))}
</CardFooter> </Swiper>
</Card> ) : (
</SwiperSlide> <CircularProgress aria-label="Loading..." size="lg" />
))} )}
</Swiper>
</div> </div>
<div className="w-auto lg:w-[25%] p-2 dark:bg-stone-800 bg-[#f0f0f0] shadow-lg dark:text-white text-black rounded-xl mb-2 md:mb-0 h-[50vh] lg:h-[67vh]"> <div className="w-auto lg:w-[25%] p-2 dark:bg-stone-800 bg-[#f0f0f0] shadow-lg dark:text-white text-black rounded-xl mb-2 md:mb-0 h-[50vh] lg:h-[67vh]">
<p className="text-lg font-bold h-10 text-center dark:text-white text-black"> <p className="text-lg font-bold h-10 text-center dark:text-white text-black">
@ -84,7 +114,7 @@ export default function HeaderNews() {
<img <img
alt="headernews" alt="headernews"
src="/headernews.png" src="/headernews.png"
className="object-cover w-[18%]" className="object-cover w-[18%] rounded-md"
/> />
<div> <div>
<Link <Link
@ -101,14 +131,15 @@ export default function HeaderNews() {
> >
{data.title}{" "} {data.title}{" "}
</Link> </Link>
<div className="flex flex-row gap-2 text-[10px]">
<p className="py-[2px]"> <p className="py-[2px]">
{convertDateFormat(data.createdAt)} WIB {convertDateFormat(data.createdAt)} WIB
</p> </p>
<p className="flex items-center gap-1"> <p className="flex items-center gap-1">
<EyeIcon /> <EyeIcon size={14} />
{data.viewCount === null ? 0 : data.viewCount} {data.viewCount === null ? 0 : data.viewCount}
</p> </p>
</div>
</div> </div>
</div> </div>
))} ))}
@ -116,7 +147,7 @@ export default function HeaderNews() {
<div className="m-2"> <div className="m-2">
<Link href="/news/all"> <Link href="/news/all">
<Button <Button
className="w-full bg-[#DD8306] text-white font-bold rounded-bl-md rounded-br-md focus:outline-none" className="w-full bg-[#DD8306] text-white font-bold rounded-md focus:outline-none"
radius="none" radius="none"
> >
{t("semua")} {t("semua")}
@ -126,47 +157,73 @@ export default function HeaderNews() {
</div> </div>
<div className="hidden lg:block w-full lg:w-[50%] h-[67vh]"> <div className="hidden lg:block w-full lg:w-[50%] h-[67vh]">
<Swiper {article ? (
autoplay={{ <Swiper
delay: 5000, centeredSlides={true}
disableOnInteraction: false, autoplay={{
}} delay: 5000,
navigation={true} disableOnInteraction: false,
modules={[Autoplay, Navigation]} }}
className="mySwiper" navigation={true}
> modules={[Autoplay, Controller, Navigation]}
{article?.map((newsItem: any) => ( className="mySwiper"
<SwiperSlide key={newsItem.id} className="h-[67vh]"> onSwiper={(swiper) => {
<Card swiper.navigation.nextEl?.classList.add(
isFooterBlurred "bg-white/70",
radius="lg" "!text-black",
className="border-none h-[67vh]" "rounded-full",
> "!w-[48px]",
<img "!h-[48px]"
alt="headernews" );
src="/headernews.png" swiper.navigation.prevEl?.classList.add(
className="w-full h-[67vh] object-cover" "bg-white/70",
/> "!text-black",
<CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10"> "rounded-full",
<div className="text-white"> "!w-[48px]",
<Link href={`news/detail/${newsItem.id}-${newsItem?.slug}`}> "!h-[48px]"
<p className="text-left font-semibold"> );
{newsItem.title} }}
</p> >
</Link> {article?.map((newsItem: any) => (
<p className="py-[2px] text-left text-sm"> <SwiperSlide key={newsItem.id} className="h-[67vh]">
{convertDateFormat(newsItem.createdAt)} WIB <Card
</p> isFooterBlurred
<p className="flex items-center gap-1 text-sm"> radius="lg"
<EyeIcon /> className="border-none h-[67vh] shadow-none"
{newsItem.viewCount === null ? 0 : newsItem.viewCount} >
</p> <img
</div> alt="headernews"
</CardFooter> src="/headernews.png"
</Card> className="w-full h-[67vh] object-cover rounded-lg"
</SwiperSlide> />
))}
</Swiper> <CardFooter className="mb-1 max-h-[20vh] before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
<div className="text-white">
<Link
href={`news/detail/${newsItem.id}-${newsItem?.slug}`}
>
<p className="text-left font-semibold text-2xl">
{newsItem.title}
</p>
</Link>
<div className="flex flex-row gap-1">
<p className="py-[2px] text-left text-sm">
{convertDateFormat(newsItem.createdAt)} WIB
</p>
<p className="flex items-center gap-1 text-sm">
<EyeIcon />
{newsItem.viewCount === null ? 0 : newsItem.viewCount}
</p>
</div>
</div>
</CardFooter>
</Card>
</SwiperSlide>
))}
</Swiper>
) : (
<CircularProgress aria-label="Loading..." size="lg" />
)}
</div> </div>
<div className="lg:w-[25%] rounded-md text-white dark:text-black "> <div className="lg:w-[25%] rounded-md text-white dark:text-black ">
<GPRKominfo /> <GPRKominfo />

4
components/landing/NewsTicker.tsx
View File

@ -57,7 +57,7 @@ export default function NewsTicker() {
}`} }`}
> >
<Link <Link
href={`news/detail/${article[currentNewsIndex]?.id}`} href={`news/detail/${article[currentNewsIndex]?.id}-${article[currentNewsIndex]?.slug}`}
className="hidden lg:block" className="hidden lg:block"
> >
<p className="text-sm lg:text-base"> <p className="text-sm lg:text-base">
@ -65,7 +65,7 @@ export default function NewsTicker() {
</p> </p>
</Link> </Link>
<Link <Link
href={`news/detail/${article[currentNewsIndex]?.id}`} href={`news/detail/${article[currentNewsIndex]?.id}-${article[currentNewsIndex]?.slug}`}
className="lg:hidden" className="lg:hidden"
> >
<p className="text-sm lg:text-base"> <p className="text-sm lg:text-base">

9
components/landing/RegionalNews.tsx
View File

@ -16,7 +16,6 @@ import Link from "next/link";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
export default function RegionalNews() { export default function RegionalNews() {
const [limitedData, setLimitedData] = useState<any>([]);
const { isOpen, onOpen, onOpenChange } = useDisclosure(); const { isOpen, onOpen, onOpenChange } = useDisclosure();
const [scrollBehavior, setScrollBehavior] = const [scrollBehavior, setScrollBehavior] =
React.useState<ModalProps["scrollBehavior"]>("inside"); React.useState<ModalProps["scrollBehavior"]>("inside");
@ -54,6 +53,12 @@ export default function RegionalNews() {
title: "Polda Jawa Timur", title: "Polda Jawa Timur",
path: "news/polda-jatim", path: "news/polda-jatim",
}, },
{
id: 6,
img: "/assets/polda/polda-jawa-barat.svg",
title: "Polda Jawa Barat",
path: "/news/polda-jawa-barat",
},
]; ];
const listPoldaAll = [ const listPoldaAll = [
@ -305,7 +310,7 @@ export default function RegionalNews() {
{/* <div> {/* <div>
<ChevronLeftWhite color="orange" /> <ChevronLeftWhite color="orange" />
</div> */} </div> */}
<div className="gap-2 md:gap-4 lg:gap-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5"> <div className="gap-2 md:gap-4 lg:gap-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6">
{listPolda.map((item: any, index: any) => ( {listPolda.map((item: any, index: any) => (
<Link href={item.path} key={item.path}> <Link href={item.path} key={item.path}>
<div <div

18
components/landing/SidebarNav.tsx
View File

@ -58,18 +58,20 @@ export default function SidebarNav() {
<Link href={`news/detail/${list?.id}`}> <Link href={`news/detail/${list?.id}`}>
<p className="text-left font-semibold">{list?.title}</p> <p className="text-left font-semibold">{list?.title}</p>
</Link> </Link>
<p className="py-[2px] text-left text-xs"> <div className="flex flex-row gap-1">
{convertDateFormat(list?.createdAt)} WIB <p className="py-[2px] text-left text-xs">
</p> {convertDateFormat(list?.createdAt)} WIB
<p className="flex items-center gap-1 text-xs"> </p>
<EyeIcon /> <p className="flex items-center gap-1 text-xs">
{list?.viewCount === null ? 0 : list?.viewCount} <EyeIcon />
</p> {list?.viewCount === null ? 0 : list?.viewCount}
</p>
</div>
</div> </div>
))} ))}
</ScrollShadow> </ScrollShadow>
<Button <Button
className="w-full bg-[#DD8306] text-white font-bold rounded-bl-md rounded-br-md focus:outline-none" className="w-full bg-[#DD8306] text-white font-bold rounded-md focus:outline-none"
radius="none" radius="none"
> >
Lihat Semua Lihat Semua

4
components/layout/admin-layout.tsx
View File

@ -27,9 +27,9 @@ export const AdminLayout = ({ children }: Props) => {
return ( return (
<SidebarProvider> <SidebarProvider>
<div className="h-screen flex items-center flex-row p-1 md:p-4"> <div className="h-screen flex items-center flex-row">
<Sidebar sidebarData={isOpen} updateSidebarData={updateSidebarData} /> <Sidebar sidebarData={isOpen} updateSidebarData={updateSidebarData} />
<div className={`w-full h-full flex flex-col gap-4`}> <div className={`w-full h-full flex flex-col`}>
<Breadcrumb /> <Breadcrumb />
{children} {children}
</div> </div>

54
components/layout/sidebar/sidebar.tsx
View File

@ -13,10 +13,16 @@ import {
FormVerticalIcon, FormVerticalIcon,
} from "../../icons"; } from "../../icons";
import { import {
ArticleIcon,
DashboardIcon, DashboardIcon,
HomeIcon, HomeIcon,
InfoCircleIcon, InfoCircleIcon,
MagazineIcon,
MasterCategoryIcon,
MasterRoleIcon,
MasterUsersIcon,
MinusCircleIcon, MinusCircleIcon,
StaticPageIcon,
TableIcon, TableIcon,
} from "../../icons/sidebar-icon"; } from "../../icons/sidebar-icon";
import { ThemeSwitch } from "../../theme-switch"; import { ThemeSwitch } from "../../theme-switch";
@ -100,7 +106,21 @@ const sideBarDummyData = [
moduleName: "Dashboard", moduleName: "Dashboard",
modulePathUrl: "/admin/article", modulePathUrl: "/admin/article",
parentId: -1, parentId: -1,
icon: <TableIcon />, icon: <ArticleIcon size={24} />,
position: 1,
statusId: 1,
childMenu: [],
statusName: "Active",
childModule: null,
},
{
id: 4,
name: "Majalah",
moduleId: 652,
moduleName: "Apps",
modulePathUrl: "/admin/magazine",
parentId: -1,
icon: <MagazineIcon />,
position: 1, position: 1,
statusId: 1, statusId: 1,
childMenu: [], childMenu: [],
@ -114,7 +134,7 @@ const sideBarDummyData = [
moduleName: "Dashboard", moduleName: "Dashboard",
modulePathUrl: "/admin/static-page", modulePathUrl: "/admin/static-page",
parentId: -1, parentId: -1,
icon: <FormValidationIcon />, icon: <StaticPageIcon />,
position: 1, position: 1,
statusId: 1, statusId: 1,
childMenu: [], childMenu: [],
@ -178,6 +198,20 @@ const sideBarDummyData = [
// statusName: "Active", // statusName: "Active",
// childModule: null, // childModule: null,
// }, // },
{
id: 30,
name: "Master Category",
moduleId: 654,
moduleName: "Master",
modulePathUrl: "/admin/master-category",
parentId: -1,
icon: <MasterCategoryIcon />,
position: 1,
statusId: 1,
childMenu: [],
statusName: "Active",
childModule: null,
},
{ {
id: 8, id: 8,
name: "Master User", name: "Master User",
@ -185,7 +219,7 @@ const sideBarDummyData = [
moduleName: "Form Vertical", moduleName: "Form Vertical",
modulePathUrl: "/admin/master-user", modulePathUrl: "/admin/master-user",
parentId: -1, parentId: -1,
icon: <FormVerticalIcon />, icon: <MasterUsersIcon />,
position: 1, position: 1,
statusId: 1, statusId: 1,
childMenu: [], childMenu: [],
@ -200,7 +234,7 @@ const sideBarDummyData = [
moduleName: "Form Validation", moduleName: "Form Validation",
modulePathUrl: "/admin/master-role", modulePathUrl: "/admin/master-role",
parentId: -1, parentId: -1,
icon: <FormValidationIcon />, icon: <MasterRoleIcon />,
position: 1, position: 1,
statusId: 1, statusId: 1,
childMenu: [], childMenu: [],
@ -237,12 +271,12 @@ const Sidebar: React.FC<SidebarProps> = ({ updateSidebarData }) => {
return ( return (
<div <div
className={`hidden md:flex h-full flex-grow ${ className={`hidden md:flex h-full flex-grow ${
isOpen ? "min-w-[290px]" : "min-w-[80px]" isOpen ? "min-w-[240px]" : "min-w-[80px]"
}`} }`}
> >
<div <div
className={` flex h-full flex-col rounded-lg p-4 mb-0 bg-gray-100 dark:bg-stone-950 z-40 transition-width !ease-in-out justify-between ${ className={` flex h-full flex-col rounded-lg p-4 mb-0 bg-gray-100 dark:bg-stone-900 z-40 transition-width !ease-in-out justify-between ${
isOpen ? "w-[288px]" : "w-[80px]" isOpen ? "w-[238px]" : "w-[80px]"
}`} }`}
> >
<div> <div>
@ -302,10 +336,10 @@ const Sidebar: React.FC<SidebarProps> = ({ updateSidebarData }) => {
}`} }`}
> */} > */}
<div <div
className={`px-3.5 py-2 mr-4 rounded-lg hover:bg-[#f07c00] hover:text-white dark:hover:text-white flex flex-row gap-2 ${ className={`px-3.5 py-2 mr-4 rounded-lg flex flex-row gap-2 ${
pathname.includes(list.modulePathUrl) pathname.includes(list.modulePathUrl)
? "bg-[#f07c00] dark:bg-[#c46602] text-white font-bold" ? "bg-black dark:bg-white text-white dark:text-black font-bold"
: "text-zinc-600 dark:text-zinc-400" : "text-black dark:text-white hover:bg-stone-900 hover:text-white dark:hover:bg-gray-200 dark:hover:text-black"
}`} }`}
> >
{list.icon} {isOpen && list.name} {list.icon} {isOpen && list.name}

8
components/main/detail/list-news.tsx
View File

@ -86,9 +86,13 @@ export default function ListNews() {
key={news?.id} key={news?.id}
> >
<div className=""> <div className="">
<img src="/headernews.png" alt="thumbnail" /> <img
src="/headernews.png"
alt="thumbnail"
className="rounded-md"
/>
</div> </div>
<div className="p-2 lg:p-5 bg-[#f0f0f0] h-[220px]"> <div className="p-2 lg:p-5 bg-[#f0f0f0] rounded-md">
<div className="font-semibold text-lg">{news?.title}</div> <div className="font-semibold text-lg">{news?.title}</div>
<div className="flex flex-row items-center py-1 text-xs gap-2"> <div className="flex flex-row items-center py-1 text-xs gap-2">
<div className="flex flex-row items-center gap-1"> <div className="flex flex-row items-center gap-1">

14
components/page/detail-news.tsx
View File

@ -91,6 +91,16 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
setNextArticle(nextString); setNextArticle(nextString);
} }
}, [data, listArticle]); }, [data, listArticle]);
function removeImgTags(htmlString?: { __html: string }) {
const parser = new DOMParser();
const doc = parser.parseFromString(String(htmlString?.__html), "text/html");
const images = doc.querySelectorAll("img");
images.forEach((img) => img.remove());
return { __html: doc.body.innerHTML };
}
return ( return (
<div className="flex flex-col gap-2 py-4"> <div className="flex flex-col gap-2 py-4">
<p className="font-semibold text-xl lg:text-3xl">{data?.title}</p> <p className="font-semibold text-xl lg:text-3xl">{data?.title}</p>
@ -130,7 +140,9 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
/> />
</div> </div>
<div <div
dangerouslySetInnerHTML={formatTextToHtmlTag(data?.htmlDescription)} dangerouslySetInnerHTML={removeImgTags(
formatTextToHtmlTag(data?.htmlDescription)
)}
className="text-sm lg:text-xl lg:leading-8" className="text-sm lg:text-xl lg:leading-8"
/> />

28
components/page/related-news.tsx
View File

@ -32,15 +32,11 @@ export default function RelatedNews() {
<UnderLine /> <UnderLine />
</div> </div>
</div> </div>
<div className="w-[90vw] lg:w-full bg-[#f0f0f0]"> <div className="w-[90vw] lg:w-full">
<div> <div>
<Swiper <Swiper
centeredSlides={false} centeredSlides={false}
spaceBetween={10} spaceBetween={10}
autoplay={{
delay: 5000,
disableOnInteraction: false,
}}
navigation={true} navigation={true}
modules={[Autoplay, Navigation]} modules={[Autoplay, Navigation]}
className="mySwiper" className="mySwiper"
@ -51,6 +47,22 @@ export default function RelatedNews() {
slidesPerView: 4, // Set slidesPerView to 1 on mobile slidesPerView: 4, // Set slidesPerView to 1 on mobile
}, },
}} }}
onSwiper={(swiper) => {
swiper.navigation.nextEl?.classList.add(
"bg-white/70",
"!text-black",
"rounded-full",
"!w-[40px]",
"!h-[40px]"
);
swiper.navigation.prevEl?.classList.add(
"bg-white/70",
"!text-black",
"rounded-full",
"!w-[40px]",
"!h-[40px]"
);
}}
> >
{article?.map((newsItem: any) => ( {article?.map((newsItem: any) => (
<SwiperSlide key={newsItem.id}> <SwiperSlide key={newsItem.id}>
@ -65,11 +77,11 @@ export default function RelatedNews() {
<Link <Link
href={`/news/detail/${newsItem.id}-${newsItem.slug}`} href={`/news/detail/${newsItem.id}-${newsItem.slug}`}
> >
<p className="text-left font-semibold text-sm"> <p className="text-left font-bold text-sm">
{textEllipsis(newsItem.title, 40)} {textEllipsis(newsItem.title, 33)}
</p> </p>
</Link> </Link>
<p className="py-[2px] text-left text-sm"> <p className="py-[2px] text-left text-xs">
{convertDateFormat(newsItem.createdAt)} WIB {convertDateFormat(newsItem.createdAt)} WIB
</p> </p>
</div> </div>

12
components/page/sidebar-detail.tsx
View File

@ -53,16 +53,16 @@ export default function SidebarDetail() {
> >
{article?.map((newsItem: any) => ( {article?.map((newsItem: any) => (
<SwiperSlide key={newsItem.id}> <SwiperSlide key={newsItem.id}>
<div className="h-[230px] lg:h-[180px] flex flex-col gap-2 bg-gray-50 dark:bg-stone-900 p-5"> <div className="h-[230px] lg:h-[180px] flex flex-col gap-2 bg-gray-50 dark:bg-stone-900 p-5 rounded-lg">
<img <img
alt="headernews" alt="headernews"
src="/headernews.png" src="/headernews.png"
className="object-cover !h-[70%]" className="object-cover !h-[70%] rounded-lg"
/> />
<div className="text-black dark:text-white flex flex-col"> <div className="text-black dark:text-white flex flex-col">
<Link href={`/news/detail/${newsItem.id}-${newsItem.slug}`}> <Link href={`/news/detail/${newsItem.id}-${newsItem.slug}`}>
<p className="text-left font-semibold text-xs"> <p className="text-left font-bold text-sm">
{textEllipsis(newsItem.title, 40)} {textEllipsis(newsItem.title, 30)}
</p> </p>
</Link> </Link>
<p className="py-[2px] text-left text-xs"> <p className="py-[2px] text-left text-xs">
@ -103,11 +103,11 @@ export default function SidebarDetail() {
> >
{article?.map((newsItem: any) => ( {article?.map((newsItem: any) => (
<SwiperSlide key={newsItem.id}> <SwiperSlide key={newsItem.id}>
<div className="h-[230px] lg:h-[180px] flex flex-col gap-2 bg-gray-50 dark:bg-stone-900 p-5"> <div className="h-[230px] lg:h-[180px] flex flex-col gap-2 bg-gray-50 dark:bg-stone-900 p-5 rounded-lg">
<img <img
alt="headernews" alt="headernews"
src="/headernews.png" src="/headernews.png"
className="object-cover !h-[70%]" className="object-cover !h-[70%] rounded-lg"
/> />
<div className="text-black dark:text-white flex flex-col"> <div className="text-black dark:text-white flex flex-col">
<Link href={`/news/detail/${newsItem.id}-${newsItem.slug}`}> <Link href={`/news/detail/${newsItem.id}-${newsItem.slug}`}>

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

@ -7,7 +7,11 @@ import {
SearchIcon, SearchIcon,
} from "@/components/icons"; } from "@/components/icons";
import { error, success } from "@/config/swal"; import { error, success } from "@/config/swal";
import { deleteArticle, getListArticle } from "@/service/article"; import {
deleteArticle,
getArticleByCategory,
getListArticle,
} from "@/service/article";
import { Article } from "@/types/globals"; import { Article } from "@/types/globals";
import { convertDateFormat } from "@/utils/global"; import { convertDateFormat } from "@/utils/global";
import { Button } from "@nextui-org/button"; import { Button } from "@nextui-org/button";
@ -58,6 +62,8 @@ export default function ArticleTable() {
const [article, setArticle] = useState<ArticleData[]>([]); const [article, setArticle] = useState<ArticleData[]>([]);
const [showData, setShowData] = useState("10"); const [showData, setShowData] = useState("10");
const [search, setSearch] = useState(""); const [search, setSearch] = useState("");
const [categories, setCategoies] = useState<any>([]);
const [selectedCategories, setSelectedCategories] = useState<any>([]);
const [startDateValue, setStartDateValue] = useState({ const [startDateValue, setStartDateValue] = useState({
startDate: null, startDate: null,
endDate: null, endDate: null,
@ -67,6 +73,17 @@ export default function ArticleTable() {
initState(); initState();
}, [page, showData, startDateValue]); }, [page, showData, startDateValue]);
useEffect(() => {
getCategories();
}, []);
async function getCategories() {
const res = await getArticleByCategory();
const data = res?.data?.data;
console.log("datass", res?.data?.data);
setCategoies(data);
}
async function initState() { async function initState() {
const req = { const req = {
limit: showData, limit: showData,
@ -105,7 +122,8 @@ export default function ArticleTable() {
return false; return false;
} }
close(); close();
success("Success Deleted"); success("Berhasil Hapus");
initState();
} }
const handleDelete = (id: any) => { const handleDelete = (id: any) => {
@ -123,19 +141,6 @@ export default function ArticleTable() {
}); });
}; };
function successSubmit() {
MySwal.fire({
title: "Sukses",
icon: "success",
confirmButtonColor: "#3085d6",
confirmButtonText: "OK",
}).then((result) => {
if (result.isConfirmed) {
// initStete();
}
});
}
const renderCell = useCallback((article: ArticleData, columnKey: Key) => { const renderCell = useCallback((article: ArticleData, columnKey: Key) => {
const cellValue = article[columnKey as keyof ArticleData]; const cellValue = article[columnKey as keyof ArticleData];
const statusColorMap: Record<string, ChipProps["color"]> = { const statusColorMap: Record<string, ChipProps["color"]> = {
@ -224,7 +229,7 @@ export default function ArticleTable() {
<div className="flex flex-col items-start rounded-2xl gap-3"> <div className="flex flex-col items-start rounded-2xl gap-3">
<div className="flex flex-col md:flex-row gap-3 w-full"> <div className="flex flex-col md:flex-row gap-3 w-full">
<div className="flex flex-col gap-1 w-1/3"> <div className="flex flex-col gap-1 w-1/3">
<p className="font-semibold text-sm">Search</p> <p className="font-semibold text-sm">Pencarian</p>
<Input <Input
aria-label="Search" aria-label="Search"
classNames={{ classNames={{
@ -242,7 +247,7 @@ export default function ArticleTable() {
/> />
</div> </div>
<div className="flex flex-col gap-1 w-[72px]"> <div className="flex flex-col gap-1 w-[72px]">
<p className="font-semibold text-sm">Show</p> <p className="font-semibold text-sm">Data</p>
<Select <Select
label="" label=""
variant="bordered" variant="bordered"
@ -250,6 +255,7 @@ export default function ArticleTable() {
placeholder="Select" placeholder="Select"
selectedKeys={[showData]} selectedKeys={[showData]}
className="w-full" className="w-full"
classNames={{ trigger: "border-1" }}
onChange={(e) => onChange={(e) =>
e.target.value === "" ? "" : setShowData(e.target.value) e.target.value === "" ? "" : setShowData(e.target.value)
} }
@ -262,29 +268,33 @@ export default function ArticleTable() {
</SelectItem> </SelectItem>
</Select> </Select>
</div> </div>
<div className="flex flex-col gap-1 w-[170px]"> <div className="flex flex-col gap-1 w-[230px]">
<p className="font-semibold text-sm">Category</p> <p className="font-semibold text-sm">Kategori</p>
<Select <Select
label="" label=""
variant="bordered" variant="bordered"
labelPlacement="outside" labelPlacement="outside"
placeholder="Select" placeholder="Select"
selectedKeys={[showData]} selectionMode="multiple"
selectedKeys={[selectedCategories]}
className="w-full" className="w-full"
onChange={(e) => classNames={{ trigger: "border-1" }}
e.target.value === "" ? "" : setShowData(e.target.value) onChange={(e) => {
} e.target.value === ""
? ""
: setSelectedCategories(e.target.value);
console.log("eeess", e.target.value);
}}
> >
<SelectItem key="10" value="10"> {categories?.map((category: any) => (
Polda Metro Jaya <SelectItem key={category?.id} value={category?.id}>
</SelectItem> {category?.title}
<SelectItem key="5" value="5"> </SelectItem>
Polda Sumatera Utara ))}
</SelectItem>
</Select> </Select>
</div> </div>
<div className="flex flex-col gap-1 w-full md:w-[340px]"> <div className="flex flex-col gap-1 w-full md:w-[240px]">
<p className="font-semibold text-sm">Date</p> <p className="font-semibold text-sm">Tanggal</p>
<Datepicker <Datepicker
value={startDateValue} value={startDateValue}
displayFormat="DD/MM/YYYY" displayFormat="DD/MM/YYYY"

29
components/ui/breadcrumb.tsx
View File

@ -34,10 +34,10 @@ export const Breadcrumb = () => {
}; };
return ( return (
<div className="h-[100px] rounded-lg border-small"> <div className="h-[100px] border-b-2">
<div className="px-4 md:px-8"> <div className="px-4 md:px-8">
<div className="flex flex-row justify-between items-center"> <div className="flex flex-row justify-between items-center py-3">
<div className="pt-1"> <div className="">
<p className="text-2xl font-semibold mb-2"> <p className="text-2xl font-semibold mb-2">
{pathnameTransformed[pathnameTransformed.length - 1]} {pathnameTransformed[pathnameTransformed.length - 1]}
</p> </p>
@ -45,19 +45,20 @@ export const Breadcrumb = () => {
underline="active" underline="active"
onAction={(key) => handleAction(key)} onAction={(key) => handleAction(key)}
> >
{pathnameTransformed?.map((item, index) => ( {pathnameTransformed?.map(
<BreadcrumbItem (item, index) =>
key={pathnameSplit[index]} item !== "Admin" && (
isCurrent={pathnameSplit[index] === currentPage} <BreadcrumbItem
> key={pathnameSplit[index]}
{item} isCurrent={pathnameSplit[index] === currentPage}
</BreadcrumbItem> >
))} {item}
</BreadcrumbItem>
)
)}
</Breadcrumbs> </Breadcrumbs>
</div> </div>
<div className="pt-2"> <FormLayoutIcon width={50} height={50} />
<FormLayoutIcon width={50} height={50} />
</div>
</div> </div>
</div> </div>
</div> </div>

12
styles/globals.css
View File

@ -56,6 +56,18 @@
object-fit: cover; object-fit: cover;
} }
.swiper-button-next::after,
.swiper-button-prev::after {
font-size: 28px !important;
}
@media (max-width: 768px) {
.swiper-button-next::after,
.swiper-button-prev::after {
font-size: 14px !important;
}
}
@layer utilities { @layer utilities {
.clip-path-triangle { .clip-path-triangle {
clip-path: polygon(0 0, 100% 50%, 0 100%); clip-path: polygon(0 0, 100% 50%, 0 100%);