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

update

This commit is contained in:
amd123 2024-01-10 20:07:12 +07:00
parent 70b0422de3
commit 2d59536fc1
14 changed files with 888 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/campaign/detail/[id]/page.tsx Normal file
View File

@ -0,0 +1,12 @@
import DetailCampaign from '@/components/page/detail-campaign'
import SimilarNews from '@/components/page/similar-news'
import React from 'react'
export default function DetailPage() {
return (
<div className='container mx-auto space-y-10'>
<DetailCampaign />
<SimilarNews />
</div>
)
}

12
app/headline/detail/[id]/page.tsx Normal file
View File

@ -0,0 +1,12 @@
import DetailCampaign from '@/components/page/detail-campaign'
import SimilarNews from '@/components/page/similar-news'
import React from 'react'
export default function HeadlineDetail() {
return (
<>
<DetailCampaign />
<SimilarNews />
</>
)
}

13
app/report/layout.tsx Normal file
View File

@ -0,0 +1,13 @@
export default function ReportLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<section>
<div>
{children}
</div>
</section>
);
}

8
app/report/page.tsx Normal file
View File

@ -0,0 +1,8 @@
import FormReport from '@/components/form/form-report'
import React from 'react'
export default function ReportPage() {
return (
<FormReport />
)
}

100
components/form/form-report.tsx Normal file
View File

@ -0,0 +1,100 @@
'use client'
import { Button } from '@nextui-org/button';
import { Textarea } from '@nextui-org/input';
import { useState } from 'react';
export default function FormReport() {
const [formData, setFormData] = useState({
date: '',
location: '',
attachment: '',
complaint: '',
complaintLink: '',
voiceNote: '',
});
const handleChange = (e: any) => {
const { name, value } = e.target;
setFormData((prevData) => ({
...prevData,
[name]: value,
}));
}
const handleDateChange = (e: any) => {
const { value } = e.target;
setFormData((prevData) => ({
...prevData,
date: value,
}));
};
const handleSubmit = () => {
// Lakukan apa pun yang diperlukan dengan data formulir
console.log('Data formulir yang dikirim:', formData);
console.log('Tanggal yang dipilih:', formData.date);
// Contoh: Kirim data ke server atau lakukan tindakan lainnya
};
return (
<div className=''>
<div className='text-[#1A328E] font-bold text-center'>
<p className='text-3xl pt-3'>Lapor Pelanggan Pemilu</p>
<p className='text-sm pt-5'>Portal Laporan Pengaduan Online Pelanggaran Pemilu</p>
</div>
<div className='space-y-5 container mx-auto pt-10'>
<div>
<p>Tanggal</p>
<input
className='w-full border-2 rounded-md p-1 mt-2 bg-transparent'
type="date"
name='date'
value={formData.date}
onChange={handleDateChange}
/>
</div>
{/* <div>
<p>Lokasi Kejadian</p>
</div> */}
<div>
<p>Lampiran Aduan</p>
<input className='border-2 w-full mt-2' type="file" accept="image/*, text/*" name="file" />
</div>
<div>
<p>Isi Aduan</p>
<Textarea
placeholder="Masukkan Link Pendukung"
className="w-full mt-2"
variant='bordered'
name='complaint'
value={formData.complaint}
onChange={handleChange}
/>
</div>
<div>
<p>Link Pengaduan</p>
<Textarea
placeholder="Masukkan Link Pendukung"
className="w-full mt-2"
variant='bordered'
name='complaintLink'
value={formData.complaintLink}
onChange={handleChange}
/>
</div>
{/* <div>
<p>Voice Note</p>
</div> */}
<div>
<Button
className='bg-[#1A328E] w-full my-4 text-white'
onClick={handleSubmit}
>
Kirim
</Button>
</div>
</div>
</div>
)
}

224
components/landing/campaign.tsx
View File

@ -1,91 +1,177 @@
'use client'
import { Button } from '@nextui-org/button' import { Button } from '@nextui-org/button'
import { Card, CardBody, CardFooter } from '@nextui-org/react' import { Card, CardBody, CardFooter, Image } from '@nextui-org/react'
import Image from 'next/image' import Slider from 'react-slick'
import React from 'react' import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Link from 'next/link';
export default function Campaign() { export default function Campaign() {
const settings = {
dots: true,
infinite: false,
speed: 500,
slidesToShow: 3,
slidesToScroll: 1,
};
const dummyData = [
{
id: 1,
date: '03/01/2024 14:30 WIB',
title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
imageUrl: '/vm1.jpg',
link: '/link1',
},
{
id: 2,
date: '03/02/2024 15:45 WIB',
title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
imageUrl: '/vm1.jpg',
link: '/link2',
},
{
id: 3,
date: '03/02/2024 15:45 WIB',
title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
imageUrl: '/vm1.jpg',
link: '/link2',
},
// {
// id: 4,
// date: '03/04/2024 17:30 WIB',
// title: 'Judul Artikel 4',
// imageUrl: '/vm4.jpg',
// link: '/link4',
// },
// {
// id: 5,
// date: '03/05/2024 18:45 WIB',
// title: 'Judul Artikel 5',
// imageUrl: '/vm5.jpg',
// link: '/link5',
// },
];
return ( return (
<div> <div className='h-screen'>
<div className='h-screen'> <p className='text-3xl font-bold text-center text-[#FF3900] pt-10'>Kampanye Daerah</p>
<p className='text-3xl font-bold text-red-600 text-center pt-10'>Kampanye Daerah</p> <div className='pt-10'>
<div className='space-y-2 pt-10'> <div className='flex justify-center gap-4 h-full'>
<div className='flex justify-center gap-4 border-2'> {dummyData.map((data) => (
<Card className='h-[400px] w-[250px] overflow-hidden '> <Card key={data.id} className='w-[250px] items-center rounded-lg'>
<CardBody className="items-center "> <CardBody>
<Image <Image
alt="Card background" alt='visimisi'
className="object-cover rounded-t-xl" className='rounded-lg object-fill'
src={data.imageUrl}
/>
</CardBody>
<CardFooter >
<div className='px-3 pb-2 text-left w-full h-full'>
<p className='text-xs'>{data.date}</p>
<p className='leading-tight text-sm font-semibold'>{data.title}</p>
<Link href={`campaign/detail/${data.id}`}>
<p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkapnya</p>
</Link>
</div>
</CardFooter>
</Card>
))}
{/* <Card className='max-h-max w-[250px] items-center rounded-lg'>
<CardBody>
<Image
alt='visimisi'
className='rounded-lg'
src="/vm1.jpg" src="/vm1.jpg"
width={180} height={150}
height={200} width={220}
/> />
</CardBody> </CardBody>
<CardFooter className='flex flex-col border overflow-hidden leading-tight p-0 items-start'> <div className='px-3 pb-2'>
<p className='text-xs'>03/01/2024 14:00 WIB</p> <p className='text-xs '>03/01/2024 14:30 WIB</p>
<p className='leading-none'>MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p > <p className='leading-tight text-sm font-semibold'>MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
<p className='text-xs text-blue-800'>Lihat Selengkapnya</p> <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
</CardFooter> </div>
</Card> </Card>
{/* <Card className="py-2 h-[420px] w-[300px]"> <Card className='max-h-max w-[250px] items-center rounded-lg'>
<CardBody className="overflow-visible py-2"> <CardBody>
<Image <Image
alt="Card background" alt='visimisi'
className="object-cover rounded-xl h-full" className='rounded-lg'
src="/HL1.png" src="/vm1.jpg"
width={270} height={150}
height={400} width={220}
/> />
</CardBody> </CardBody>
<CardFooter className="pb-0 pt-2 px-4 flex-col items-start"> <div className='px-3 pb-2'>
<p className="text-tiny uppercase font-bold">Daily Mix</p> <p className='text-xs '>03/01/2024 14:30 WIB</p>
<small className="text-default-500">12 Tracks</small> <p className='leading-tight text-sm font-semibold'>MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
<h4 className="font-bold text-large">Frontend Radio</h4> <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
</CardFooter> </div>
</Card> </Card>
<Card className="py-2 w-[270px]"> <Card className='max-h-max w-[250px] items-center rounded-lg'>
<CardBody className="overflow-visible py-2"> <CardBody>
<Image <Image
alt="Card background" alt='visimisi'
className="object-cover rounded-xl h-full" className='rounded-lg'
src="/HL1.png" src="/vm1.jpg"
width={270} height={150}
height={400} width={220}
/> />
</CardBody> </CardBody>
<CardFooter className="pb-0 pt-2 px-4 flex-col items-start"> <div className='px-3 pb-2'>
<p className="text-tiny uppercase font-bold">Daily Mix</p> <p className='text-xs '>03/01/2024 14:30 WIB</p>
<small className="text-default-500">12 Tracks</small> <p className='leading-tight text-sm font-semibold'>MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
<h4 className="font-bold text-large">Frontend Radio</h4> <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
</CardFooter> </div>
</Card>
<Card className="py-2 w-[270px]">
<CardBody className="overflow-visible py-2">
<Image
alt="Card background"
className="object-cover rounded-xl h-full"
src="/HL1.png"
width={270}
height={400}
/>
</CardBody>
<CardFooter className="pb-0 pt-2 px-4 flex-col items-start">
<p className="text-tiny uppercase font-bold">Daily Mix</p>
<small className="text-default-500">12 Tracks</small>
<h4 className="font-bold text-large">Frontend Radio</h4>
</CardFooter>
</Card> */} </Card> */}
</div> </div>
<div className='flex justify-center pt-5'> <div className='flex justify-center pt-5'>
<Button <Button
className='text-[#FF3900] font-bold border-[#FF3900]' className='text-[#FF3900] font-bold border-[#FF3900]'
variant='bordered' variant='bordered'
radius='full' radius='full'
> >
Lihat Selengkapnya Lihat Selengkapnya
</Button> </Button>
</div>
</div> </div>
</div> </div>
{/* <div className='border-2 border-green-600 container mx-auto'>
<h2> Single Item</h2>
<Slider {...settings}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</div>
</Slider>
</div> */}
{/* <div className='flex justify-start relative bottom-[135px] z-0 left-0 '>
<Image
alt='anisbaswedan'
className='rounded-lg'
src="/anis1.png"
/>
</div> */}
</div> </div>
) )
} }

472
components/landing/headline.tsx
View File

@ -1,104 +1,392 @@
'use client' 'use client'
import { Card, CardBody, Tab, Tabs } from '@nextui-org/react' import { Card, CardBody, Tab, Tabs } from '@nextui-org/react'
import Image from 'next/image' import Image from 'next/image'
import Link from 'next/link';
import React from 'react' import React from 'react'
export default function Headline() { export default function Headline() {
const headlineData = [
{
id: 1,
date: '03/02/2024 15:45 WIB',
title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
imageUrl: '/headline1.png',
link: '/link2',
},
{
id: 2,
date: '03/02/2024 15:45 WIB',
title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
imageUrl: '/headline2.png',
link: '/link2',
},
{
id: 3,
date: '03/02/2024 15:45 WIB',
title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
imageUrl: '/headline3.png',
link: '/link2',
},
{
id: 4,
date: '03/02/2024 15:45 WIB',
title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
imageUrl: '/headline4.png',
link: '/link2',
},
{
id: 5,
date: '03/02/2024 15:45 WIB',
title: 'MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03',
imageUrl: '/headline5.png',
link: '/link2',
},
];
return ( return (
<div className='h-screen space-y-5 pt-10 bg-[#F1F4FE]'> <div className='h-screen space-y-5 pt-10 bg-[#F1F4FE]'>
<div className='text-3xl font-bold z-10 text-black'>Headline News</div> <div className='mx-7 space-y-4'>
<div> <div className='text-3xl font-bold z-10 text-black'>Headline News</div>
<div className="flex w-full flex-col"> <div>
<Tabs <div className="flex w-full flex-col">
aria-label="Options" <Tabs
size='sm' aria-label="Options"
color='primary' size='sm'
radius='full' color='primary'
// disabledKeys={["audio", "foto", "teks"]} className='pb-5 pt-4'
> radius='full'
<Tab key="audiovisual" title="Audio Visual"> // disabledKeys={["audio", "foto", "teks"]}
<div className='flex'> >
<Card className='bg-transparent'> <Tab key="audiovisual" title="Audio Visual">
<CardBody> <div className='flex justify-center gap-4'>
<Image {headlineData.map((data) => (
alt="Card background" <Card key={data.id} className='max-h-max w-[250px] items-center rounded-lg'>
className="object-fill rounded-xl" <CardBody>
src="/HL1.png" <Image
height={900} alt='visimisi'
width={300} className='rounded-lg'
/> src={data.imageUrl}
</CardBody> height={150}
</Card> width={220}
<Card className='bg-transparent'> />
<CardBody> </CardBody>
<Image <div className='px-3 pb-2'>
alt="Card background" <p className='text-xs'>{data.date}</p>
className="object-fill rounded-xl" <p className='leading-tight text-sm font-semibold'>{data.title}</p>
src="/HL1.png" <Link href={`headline/detail/${data.id}`}>
height={900} <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkapnya</p>
width={300} </Link>
/> </div>
</CardBody> </Card>
</Card> ))}
<Card className='bg-transparent'> {/* <Card className='max-h-max w-[250px] items-center rounded-lg'>
<CardBody> <CardBody>
<Image <Image
alt="Card background" alt='visimisi'
className="object-fill rounded-xl" className='rounded-lg'
src="/HL1.png" src="/vm1.jpg"
height={900} height={150}
width={300} width={220}
/> />
</CardBody> </CardBody>
</Card> <div className='px-3 pb-2'>
<Card className='bg-transparent'> <p className='text-xs '>03/01/2024 14:30 WIB</p>
<CardBody> <p className='leading-tight text-sm font-semibold'>MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
<Image <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
alt="Card background" </div>
className="object-fill rounded-xl" </Card> */}
src="/HL1.png" {/* <Card className='max-h-max w-[250px] items-center rounded-lg'>
height={900} <CardBody>
width={300} <Image
/> alt='visimisi'
</CardBody> className='rounded-lg'
</Card> src="/vm1.jpg"
<Card className='bg-transparent'> height={150}
<CardBody> width={220}
<Image />
alt="Card background" </CardBody>
className="object-fill rounded-xl" <div className='px-3 pb-2'>
src="/HL1.png" <p className='text-xs '>03/01/2024 14:30 WIB</p>
height={900} <p className='leading-tight text-sm font-semibold'>MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
width={300} <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
/> </div>
</CardBody> </Card>
</Card> <Card className='max-h-max w-[250px] items-center rounded-lg'>
</div> <CardBody>
</Tab> <Image
<Tab key="audio" title="Audio"> alt='visimisi'
<Card> className='rounded-lg'
<CardBody> src="/vm1.jpg"
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. height={150}
</CardBody> width={220}
</Card> />
</Tab> </CardBody>
<Tab key="foto" title="Foto"> <div className='px-3 pb-2'>
<Card> <p className='text-xs '>03/01/2024 14:30 WIB</p>
<CardBody> <p className='leading-tight text-sm font-semibold'>MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
</CardBody> </div>
</Card> </Card> */}
</Tab> </div>
<Tab key="teks" title="Teks"> </Tab>
<Card> <Tab key="audio" title="Audio">
<CardBody> <div className='flex justify-center gap-4'>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <Card className='max-h-max w-[250px] items-center rounded-lg'>
</CardBody> <CardBody>
</Card> <Image
</Tab> alt='visimisi'
</Tabs> className='rounded-lg'
src="/vm1.jpg"
height={150}
width={220}
/>
</CardBody>
<div className='px-3 pb-2'>
<p className='text-xs '>03/01/2024 14:30 WIB</p>
<p className='leading-tight text-sm font-semibold'>MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
<p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
</div>
</Card>
<Card className='max-h-max w-[250px] items-center rounded-lg'>
<CardBody>
<Image
alt='visimisi'
className='rounded-lg'
src="/vm1.jpg"
height={150}
width={220}
/>
</CardBody>
<div className='px-3 pb-2'>
<p className='text-xs '>03/01/2024 14:30 WIB</p>
<p className='leading-tight text-sm font-semibold'>MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
<p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
</div>
</Card>
<Card className='max-h-max w-[250px] items-center rounded-lg'>
<CardBody>
<Image
alt='visimisi'
className='rounded-lg'
src="/vm1.jpg"
height={150}
width={220}
/>
</CardBody>
<div className='px-3 pb-2'>
<p className='text-xs '>03/01/2024 14:30 WIB</p>
<p className='leading-tight text-sm font-semibold'>MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
<p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
</div>
</Card>
<Card className='max-h-max w-[250px] items-center rounded-lg'>
<CardBody>
<Image
alt='visimisi'
className='rounded-lg'
src="/vm1.jpg"
height={150}
width={220}
/>
</CardBody>
<div className='px-3 pb-2'>
<p className='text-xs '>03/01/2024 14:30 WIB</p>
<p className='leading-tight text-sm font-semibold'>MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
<p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
</div>
</Card>
<Card className='max-h-max w-[250px] items-center rounded-lg'>
<CardBody>
<Image
alt='visimisi'
className='rounded-lg'
src="/vm1.jpg"
height={150}
width={220}
/>
</CardBody>
<div className='px-3 pb-2'>
<p className='text-xs '>03/01/2024 14:30 WIB</p>
<p className='leading-tight text-sm font-semibold'>MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
<p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
</div>
</Card>
</div>
</Tab>
<Tab key="foto" title="Foto">
<div className='flex justify-center gap-4'>
<Card className='max-h-max w-[250px] items-center rounded-lg'>
<CardBody>
<Image
alt='visimisi'
className='rounded-lg'
src="/vm1.jpg"
height={150}
width={220}
/>
</CardBody>
<div className='px-3 pb-2'>
<p className='text-xs '>03/01/2024 14:30 WIB</p>
<p className='leading-tight text-sm font-semibold'>MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
<p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
</div>
</Card>
<Card className='max-h-max w-[250px] items-center rounded-lg'>
<CardBody>
<Image
alt='visimisi'
className='rounded-lg'
src="/vm1.jpg"
height={150}
width={220}
/>
</CardBody>
<div className='px-3 pb-2'>
<p className='text-xs '>03/01/2024 14:30 WIB</p>
<p className='leading-tight text-sm font-semibold'>MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
<p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
</div>
</Card>
<Card className='max-h-max w-[250px] items-center rounded-lg'>
<CardBody>
<Image
alt='visimisi'
className='rounded-lg'
src="/vm1.jpg"
height={150}
width={220}
/>
</CardBody>
<div className='px-3 pb-2'>
<p className='text-xs '>03/01/2024 14:30 WIB</p>
<p className='leading-tight text-sm font-semibold'>MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
<p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
</div>
</Card>
<Card className='max-h-max w-[250px] items-center rounded-lg'>
<CardBody>
<Image
alt='visimisi'
className='rounded-lg'
src="/vm1.jpg"
height={150}
width={220}
/>
</CardBody>
<div className='px-3 pb-2'>
<p className='text-xs '>03/01/2024 14:30 WIB</p>
<p className='leading-tight text-sm font-semibold'>MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
<p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
</div>
</Card>
<Card className='max-h-max w-[250px] items-center rounded-lg'>
<CardBody>
<Image
alt='visimisi'
className='rounded-lg'
src="/vm1.jpg"
height={150}
width={220}
/>
</CardBody>
<div className='px-3 pb-2'>
<p className='text-xs '>03/01/2024 14:30 WIB</p>
<p className='leading-tight text-sm font-semibold'>MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
<p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
</div>
</Card>
</div>
</Tab>
<Tab key="teks" title="Teks">
<div className='flex justify-center gap-4'>
<Card className='max-h-max w-[250px] items-center rounded-lg'>
<CardBody>
<Image
alt='visimisi'
className='rounded-lg'
src="/vm1.jpg"
height={150}
width={220}
/>
</CardBody>
<div className='px-3 pb-2'>
<p className='text-xs '>03/01/2024 14:30 WIB</p>
<p className='leading-tight text-sm font-semibold'>MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
<p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
</div>
</Card>
<Card className='max-h-max w-[250px] items-center rounded-lg'>
<CardBody>
<Image
alt='visimisi'
className='rounded-lg'
src="/vm1.jpg"
height={150}
width={220}
/>
</CardBody>
<div className='px-3 pb-2'>
<p className='text-xs '>03/01/2024 14:30 WIB</p>
<p className='leading-tight text-sm font-semibold'>MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
<p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
</div>
</Card>
<Card className='max-h-max w-[250px] items-center rounded-lg'>
<CardBody>
<Image
alt='visimisi'
className='rounded-lg'
src="/vm1.jpg"
height={150}
width={220}
/>
</CardBody>
<div className='px-3 pb-2'>
<p className='text-xs '>03/01/2024 14:30 WIB</p>
<p className='leading-tight text-sm font-semibold'>MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
<p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
</div>
</Card>
<Card className='max-h-max w-[250px] items-center rounded-lg'>
<CardBody>
<Image
alt='visimisi'
className='rounded-lg'
src="/vm1.jpg"
height={150}
width={220}
/>
</CardBody>
<div className='px-3 pb-2'>
<p className='text-xs '>03/01/2024 14:30 WIB</p>
<p className='leading-tight text-sm font-semibold'>MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
<p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
</div>
</Card>
<Card className='max-h-max w-[250px] items-center rounded-lg'>
<CardBody>
<Image
alt='visimisi'
className='rounded-lg'
src="/vm1.jpg"
height={150}
width={220}
/>
</CardBody>
<div className='px-3 pb-2'>
<p className='text-xs '>03/01/2024 14:30 WIB</p>
<p className='leading-tight text-sm font-semibold'>MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
<p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
</div>
</Card>
</div>
</Tab>
</Tabs>
</div>
</div> </div>
</div> </div>
</div> </div >
) )
} }

41
components/landing/visi-misi.tsx
View File

@ -1,3 +1,7 @@
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";
import { Card, CardBody } from "@nextui-org/react"; import { Card, CardBody } from "@nextui-org/react";
import Image from "next/image"; import Image from "next/image";
@ -48,43 +52,6 @@ export default function VisiMisi() {
/> />
</CardBody> </CardBody>
</Card> </Card>
{/* <div className='w-1/3'>
<Card className='bg-transparent'>
<CardBody>
<Image
alt="Card background"
className="object-fill rounded-xl"
src="/vm1.jpg"
height={900}
width={400}
/>
</CardBody>
</Card>
</div> */}
{/* <div className='w-1/3'>
<Card className='h-full'>
<CardBody>
<Image
alt="Card background"
className="object-fill rounded-xl"
src="/vm4.jpg"
fill={true}
/>
</CardBody>
</Card>
</div>
<div className='w-1/3'>
<Card className='h-full'>
<CardBody>
<Image
alt="Card background"
className="object-cover rounded-xl"
src="/vm2.jpg"
fill={true}
/>
</CardBody>
</Card>
</div> */}
</div> </div>
</div> </div>
</div> </div>

38
components/page/detail-campaign.tsx Normal file
View File

@ -0,0 +1,38 @@
import { Button, Image } from '@nextui-org/react'
import React from 'react'
export default function DetailCampaign() {
return (
<div className='flex container mx-auto pt-8'>
<div className='w-9/12'>
<div className='w-full'>
<Image
alt='detail campaign'
className='rounded-none'
src='/detil1.png'
/>
</div>
<div className='pt-5'>
<p className='text-xs'>03/01/2024 13:10 WIB</p>
<p className='text-xl font-bold'>Anies Baswedan Kampanye di Sumbar: InsyaAllah Masyarakat Minang di Barisan Perubahan.</p>
<p className='pt-2 text-sm leading-relaxed'>Calon Presiden (Capres) nomor urut satu Anies Baswedan mengawali kampanye di tahun 2024 dengan berkunjung ke Sumatera Barat. Kedatangan Anies disambut meriah di Bandara Internasional Minangkabau, Rabu (3/1/2024). Anies mengaku kagum dengan antusiasme masyarakat Minang untuk menyambut perubahan. Anies meyakini masyarakat Minang akan mendukungnya dalam Pilpres 2024 mendatang.
"Senang sekali bisa kembali ke Sumatera Barat, dan pagi ini antusiasme masyarakat tinggi sekali. Insya Allah seperti juga sebelum-sebelumnya, masyarakat Minang ada di barisan perubahan yang selalu memilih untuk Indonesia lebih adil bagi semuanya," ujar Anies di Bandara Internasional Minangkabau, Rabu (3/1/2024).
"Kami makin optimistis bahwa di Sumatera Barat masyarakat akan terus makin kokoh untuk mengusung perubahan di Pilpres tahun ini," Anies menambahkan.
Anies menyebut masyarakat Minang punya tradisi panjang memperjuangkan gagasan perubahan untuk Indonesia yang lebih baik. Dia yakin masyarakat Minang mendukungnya karena memiliki visi misi merubah Indonesia ke arah yang lebih baik.
"Jadi saya tidak menterjemahkan sebagai dukungan kepada satu orang tapi dukungan kepada satu gagasan, yaitu gagasan perubahan," kata dia.
Sementara itu, Ketua Tim Kampanye Daerah (TKD) Sumatera Barat, Rahmat Saleh mengatakan upaya pemenangan Anies di Sumbar tak lepas dari peran penting partai pendukung dan relawan setempat.
"Kita mempunyai struktur yang baik, tiga partai koalisi (Nasdem, PKB, PKS) plus dua partai koalisi tambahan yaitu Partai Ummat dan Partai Masyumi yang kuat dan solid," kata Saleh.</p>
</div>
</div>
<div className='w-3/12'>
<div className='flex flex-col space-y-2 border-2 p-3 m-3 rounded-md'>
<Button className='text-white bg-[#25292D] rounded-lg'>Simpan</Button>
<Button className='text-white bg-[#007748] rounded-lg'>Download</Button>
<Button className='text-white bg-[#1A328E] rounded-lg'>Share</Button>
</div>
</div>
</div>
)
}

62
components/page/similar-news.tsx Normal file
View File

@ -0,0 +1,62 @@
'use client'
import { Card, CardBody } from '@nextui-org/react'
import Image from 'next/image'
import React from 'react'
export default function SimilarNews() {
return (
<div>
<p className='text-center pb-10 text-3xl font-bold text-[#FF3900]'>Berita Serupa</p>
<div className='flex justify-center gap-3 pb-5'>
<Card className='max-h-max w-[250px] items-center rounded-lg'>
<CardBody>
<Image
alt='visimisi'
className='rounded-lg'
src="/vm1.jpg"
height={150}
width={220}
/>
</CardBody>
<div className='px-3 pb-2'>
<p className='text-xs '>03/01/2024 14:30 WIB</p>
<p className='leading-tight text-sm font-semibold'>MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
<p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
</div>
</Card>
<Card className='max-h-max w-[250px] items-center rounded-lg'>
<CardBody>
<Image
alt='visimisi'
className='rounded-lg'
src="/vm1.jpg"
height={150}
width={220}
/>
</CardBody>
<div className='px-3 pb-2'>
<p className='text-xs '>03/01/2024 14:30 WIB</p>
<p className='leading-tight text-sm font-semibold'>MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
<p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
</div>
</Card>
<Card className='max-h-max w-[250px] items-center rounded-lg'>
<CardBody>
<Image
alt='visimisi'
className='rounded-lg'
src="/vm1.jpg"
height={150}
width={220}
/>
</CardBody>
<div className='px-3 pb-2'>
<p className='text-xs '>03/01/2024 14:30 WIB</p>
<p className='leading-tight text-sm font-semibold'>MNC Penyelenggara Debat Capres, Timnas AMIN: Kita Tahu Ownernya Pendukung 03</p>
<p className='text-xs text-blue-800 cursor-pointer'>Lihat Selengkanya</p>
</div>
</Card>
</div>
</div>
)
}

4
config/site.ts
View File

@ -10,11 +10,11 @@ export const siteConfig = {
}, },
{ {
label: "Lapor Kampanye", label: "Lapor Kampanye",
href: "/docs", href: "/report",
}, },
{ {
label: "Update TPS", label: "Update TPS",
href: "/pricing", href: "/docs",
}, },
// { // {
// label: "Blog", // label: "Blog",

98
package-lock.json generated
View File

@ -22,9 +22,12 @@
"@react-aria/ssr": "^3.8.0", "@react-aria/ssr": "^3.8.0",
"@react-aria/visually-hidden": "^3.8.6", "@react-aria/visually-hidden": "^3.8.6",
"@types/node": "20.5.7", "@types/node": "20.5.7",
"@types/react": "18.2.21", "@types/react": "^18.2.21",
"@types/react-dates": "^21.8.6",
"@types/react-dom": "18.2.7", "@types/react-dom": "18.2.7",
"@types/react-slick": "^0.23.13", "@types/react-slick": "^0.23.13",
"@types/react-slider": "^1.3.6",
"@types/slick-carousel": "^1.6.40",
"autoprefixer": "10.4.16", "autoprefixer": "10.4.16",
"clsx": "^2.0.0", "clsx": "^2.0.0",
"eslint": "8.48.0", "eslint": "8.48.0",
@ -36,11 +39,12 @@
"postcss": "8.4.31", "postcss": "8.4.31",
"react": "18.2.0", "react": "18.2.0",
"react-dom": "18.2.0", "react-dom": "18.2.0",
"react-dropzone": "^14.2.3",
"react-slick": "^0.29.0", "react-slick": "^0.29.0",
"slick-carousel": "^1.8.1", "slick-carousel": "^1.8.1",
"tailwind-variants": "^0.1.18", "tailwind-variants": "^0.1.18",
"tailwindcss": "3.3.5", "tailwindcss": "3.3.5",
"typescript": "5.0.4" "typescript": "^5.0.4"
} }
}, },
"node_modules/@aashutoshrathi/word-wrap": { "node_modules/@aashutoshrathi/word-wrap": {
@ -2737,6 +2741,14 @@
"tslib": "^2.4.0" "tslib": "^2.4.0"
} }
}, },
"node_modules/@types/jquery": {
"version": "3.5.29",
"resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.29.tgz",
"integrity": "sha512-oXQQC9X9MOPRrMhPHHOsXqeQDnWeCDT3PelUIg/Oy8FAbzSZtFHRjc7IpbfFVmpLtJ+UOoywpRsuO5Jxjybyeg==",
"dependencies": {
"@types/sizzle": "*"
}
},
"node_modules/@types/json5": { "node_modules/@types/json5": {
"version": "0.0.29", "version": "0.0.29",
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@ -2762,6 +2774,16 @@
"csstype": "^3.0.2" "csstype": "^3.0.2"
} }
}, },
"node_modules/@types/react-dates": {
"version": "21.8.6",
"resolved": "https://registry.npmjs.org/@types/react-dates/-/react-dates-21.8.6.tgz",
"integrity": "sha512-fDF322SOXAxstapv0/oruiPx9kY4DiiaEHYAVvXdPfQhi/hdaONsA9dFw5JBNPAWz7Niuwk+UUhxPU98h70TjA==",
"dependencies": {
"@types/react": "*",
"@types/react-outside-click-handler": "*",
"moment": "^2.26.0"
}
},
"node_modules/@types/react-dom": { "node_modules/@types/react-dom": {
"version": "18.2.7", "version": "18.2.7",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.7.tgz", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.7.tgz",
@ -2770,6 +2792,14 @@
"@types/react": "*" "@types/react": "*"
} }
}, },
"node_modules/@types/react-outside-click-handler": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/@types/react-outside-click-handler/-/react-outside-click-handler-1.3.3.tgz",
"integrity": "sha512-fF7x4dHf/IPIne8kkt3rlCGuWFrWkFJmzQm4JkxSBzXJIM9WDLob++VnmGpE3ToVWrW3Xw9D5TxcUWrwqe04Gg==",
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/react-slick": { "node_modules/@types/react-slick": {
"version": "0.23.13", "version": "0.23.13",
"resolved": "https://registry.npmjs.org/@types/react-slick/-/react-slick-0.23.13.tgz", "resolved": "https://registry.npmjs.org/@types/react-slick/-/react-slick-0.23.13.tgz",
@ -2778,11 +2808,32 @@
"@types/react": "*" "@types/react": "*"
} }
}, },
"node_modules/@types/react-slider": {
"version": "1.3.6",
"resolved": "https://registry.npmjs.org/@types/react-slider/-/react-slider-1.3.6.tgz",
"integrity": "sha512-RS8XN5O159YQ6tu3tGZIQz1/9StMLTg/FCIPxwqh2gwVixJnlfIodtVx+fpXVMZHe7A58lAX1Q4XTgAGOQaCQg==",
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/scheduler": { "node_modules/@types/scheduler": {
"version": "0.16.6", "version": "0.16.6",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.6.tgz", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.6.tgz",
"integrity": "sha512-Vlktnchmkylvc9SnwwwozTv04L/e1NykF5vgoQ0XTmI8DD+wxfjQuHuvHS3p0r2jz2x2ghPs2h1FVeDirIteWA==" "integrity": "sha512-Vlktnchmkylvc9SnwwwozTv04L/e1NykF5vgoQ0XTmI8DD+wxfjQuHuvHS3p0r2jz2x2ghPs2h1FVeDirIteWA=="
}, },
"node_modules/@types/sizzle": {
"version": "2.3.8",
"resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.8.tgz",
"integrity": "sha512-0vWLNK2D5MT9dg0iOo8GlKguPAU02QjmZitPEsXRuJXU/OGIOt9vT9Fc26wtYuavLxtO45v9PGleoL9Z0k1LHg=="
},
"node_modules/@types/slick-carousel": {
"version": "1.6.40",
"resolved": "https://registry.npmjs.org/@types/slick-carousel/-/slick-carousel-1.6.40.tgz",
"integrity": "sha512-r56PBGVLYHmZvFSV+UC4dYbnpEu3LGzgJiSSixBx5ME+IUhsyho1XP7gKSG0R9tiYSx54ftq/g+miLQTbA10Dw==",
"dependencies": {
"@types/jquery": "*"
}
},
"node_modules/@typescript-eslint/parser": { "node_modules/@typescript-eslint/parser": {
"version": "6.10.0", "version": "6.10.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.10.0.tgz", "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.10.0.tgz",
@ -3106,6 +3157,14 @@
"has-symbols": "^1.0.3" "has-symbols": "^1.0.3"
} }
}, },
"node_modules/attr-accept": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
"integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==",
"engines": {
"node": ">=4"
}
},
"node_modules/autoprefixer": { "node_modules/autoprefixer": {
"version": "10.4.16", "version": "10.4.16",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz",
@ -4160,6 +4219,17 @@
"node": "^10.12.0 || >=12.0.0" "node": "^10.12.0 || >=12.0.0"
} }
}, },
"node_modules/file-selector": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
"integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
"dependencies": {
"tslib": "^2.4.0"
},
"engines": {
"node": ">= 12"
}
},
"node_modules/fill-range": { "node_modules/fill-range": {
"version": "7.0.1", "version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@ -5181,6 +5251,14 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/moment": {
"version": "2.30.1",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
"engines": {
"node": "*"
}
},
"node_modules/ms": { "node_modules/ms": {
"version": "2.1.2", "version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@ -5743,6 +5821,22 @@
"react": "^18.2.0" "react": "^18.2.0"
} }
}, },
"node_modules/react-dropzone": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz",
"integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==",
"dependencies": {
"attr-accept": "^2.2.2",
"file-selector": "^0.6.0",
"prop-types": "^15.8.1"
},
"engines": {
"node": ">= 10.13"
},
"peerDependencies": {
"react": ">= 16.8 || 18.0.0"
}
},
"node_modules/react-is": { "node_modules/react-is": {
"version": "16.13.1", "version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

8
package.json
View File

@ -23,9 +23,12 @@
"@react-aria/ssr": "^3.8.0", "@react-aria/ssr": "^3.8.0",
"@react-aria/visually-hidden": "^3.8.6", "@react-aria/visually-hidden": "^3.8.6",
"@types/node": "20.5.7", "@types/node": "20.5.7",
"@types/react": "18.2.21", "@types/react": "^18.2.21",
"@types/react-dates": "^21.8.6",
"@types/react-dom": "18.2.7", "@types/react-dom": "18.2.7",
"@types/react-slick": "^0.23.13", "@types/react-slick": "^0.23.13",
"@types/react-slider": "^1.3.6",
"@types/slick-carousel": "^1.6.40",
"autoprefixer": "10.4.16", "autoprefixer": "10.4.16",
"clsx": "^2.0.0", "clsx": "^2.0.0",
"eslint": "8.48.0", "eslint": "8.48.0",
@ -37,10 +40,11 @@
"postcss": "8.4.31", "postcss": "8.4.31",
"react": "18.2.0", "react": "18.2.0",
"react-dom": "18.2.0", "react-dom": "18.2.0",
"react-dropzone": "^14.2.3",
"react-slick": "^0.29.0", "react-slick": "^0.29.0",
"slick-carousel": "^1.8.1", "slick-carousel": "^1.8.1",
"tailwind-variants": "^0.1.18", "tailwind-variants": "^0.1.18",
"tailwindcss": "3.3.5", "tailwindcss": "3.3.5",
"typescript": "5.0.4" "typescript": "^5.0.4"
} }
} }

BIN
public/detil1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 733 KiB