diff --git a/package.json b/package.json index db57c44..d3ae8ba 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "seed": "tsx prisma/seed.ts" }, "dependencies": { - "@mantine/carousel": "^7.11.0", + "@mantine/carousel": "^7.11.1", "@mantine/charts": "^7.11.0", "@mantine/code-highlight": "^7.11.0", "@mantine/core": "^7.11.0", @@ -31,10 +31,12 @@ "@tiptap/react": "^2.4.0", "@tiptap/starter-kit": "^2.4.0", "dayjs": "^1.11.11", - "embla-carousel-react": "^8.1.6", + "embla-carousel-autoplay": "^7.1.0", + "embla-carousel-react": "^7.1.0", "next": "14.2.4", "react": "^18", "react-dom": "^18", + "react-icons": "^5.2.1", "recharts": "2" }, "devDependencies": { diff --git a/src/app/(application)/detail-feature/page.tsx b/src/app/(application)/detail-feature/page.tsx new file mode 100644 index 0000000..7838a54 --- /dev/null +++ b/src/app/(application)/detail-feature/page.tsx @@ -0,0 +1,10 @@ +import { ViewDetailFeature } from '@/module/home'; +import React from 'react'; + +function Page() { + return ( + + ); +} + +export default Page; \ No newline at end of file diff --git a/src/app/layout.tsx b/src/app/layout.tsx index da5bd36..7ade263 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -8,6 +8,7 @@ import { } from "@mantine/core"; import { WARNA } from "@/module/_global"; import { Lato } from "next/font/google"; +import '@mantine/carousel/styles.css'; export const metadata = { title: "SISTEM DESA MANDIRI", diff --git a/src/module/_global/fun/WARNA.ts b/src/module/_global/fun/WARNA.ts index d9f6868..a8d2c6c 100644 --- a/src/module/_global/fun/WARNA.ts +++ b/src/module/_global/fun/WARNA.ts @@ -1,4 +1,5 @@ export const WARNA = { bgWhite: "#F4F9FD", biruTua: "#19345E", + bgIcon: "#384288" } \ No newline at end of file diff --git a/src/module/home/components/carosole.tsx b/src/module/home/components/carosole.tsx new file mode 100644 index 0000000..4954f1a --- /dev/null +++ b/src/module/home/components/carosole.tsx @@ -0,0 +1,35 @@ +import React, { useRef } from 'react'; +import { Carousel } from '@mantine/carousel'; +import { WARNA } from '@/module/_global'; +import Autoplay from 'embla-carousel-autoplay'; +import { Flex, Text } from '@mantine/core'; +export default function Carosole() { + const autoplay = useRef(Autoplay({ delay: 5000 })); + return ( + <> + + + + INFORMASI DARMASABA + + + + + INFORMASI DARMASABA + + + + + INFORMASI DARMASABA + + + + + ); +} diff --git a/src/module/home/components/features.tsx b/src/module/home/components/features.tsx new file mode 100644 index 0000000..cc32e84 --- /dev/null +++ b/src/module/home/components/features.tsx @@ -0,0 +1,78 @@ +import { WARNA } from '@/module/_global'; +import { ActionIcon, Box, Center, Grid, SimpleGrid, Text } from '@mantine/core'; +import { useRouter } from 'next/navigation'; +import React from 'react'; +import { HiMiniUserGroup, HiMiniPresentationChartBar, HiMegaphone, HiSquares2X2 } from "react-icons/hi2"; + +export default function Features() { + const router = useRouter() + return ( + <> + + Features + + +
+ + + +
+
+ Divisi +
+ + +
+ + + +
+
+ Proyek +
+ + +
+ + + +
+
+ Pengumuman +
+ + router.push('detail-feature')}> +
+ + + +
+
+ Semua +
+ + + + + + ); +} + diff --git a/src/module/home/index.ts b/src/module/home/index.ts index f731d3a..0a599af 100644 --- a/src/module/home/index.ts +++ b/src/module/home/index.ts @@ -1,3 +1,5 @@ +import ViewDetailFeature from "./view/view_detail_feature"; import ViewHome from "./view/view_home"; -export {ViewHome} \ No newline at end of file +export { ViewHome } +export {ViewDetailFeature} \ No newline at end of file diff --git a/src/module/home/view/view_detail_feature.tsx b/src/module/home/view/view_detail_feature.tsx new file mode 100644 index 0000000..78c7037 --- /dev/null +++ b/src/module/home/view/view_detail_feature.tsx @@ -0,0 +1,113 @@ +import { LayoutNavbarHome, WARNA } from '@/module/_global'; +import { ActionIcon, Box, Center, Grid, Group, SimpleGrid, Text } from '@mantine/core'; +import React from 'react'; +import { HiMiniUserGroup, HiMiniPresentationChartBar, HiMegaphone, HiSquares2X2, HiChevronLeft, HiUserGroup, HiUsers } from "react-icons/hi2"; +import { PiUsersFourFill } from "react-icons/pi"; +import { FaUsersRays, FaUserTie } from "react-icons/fa6"; + +export default function ViewDetailFeature() { + return ( + <> + + + + + + Semua Fitur + + + + + + +
+ + + +
+
+ Divisi +
+ + +
+ + + +
+
+ Proyek +
+ + +
+ + + +
+
+ Pengumuman +
+ + +
+ + + +
+
+ Anggota +
+ + +
+ + + +
+
+ Group +
+ + +
+ + + +
+
+ Jabatan +
+ + + + + + ); +} diff --git a/src/module/home/view/view_home.tsx b/src/module/home/view/view_home.tsx index aa85323..b0f7766 100644 --- a/src/module/home/view/view_home.tsx +++ b/src/module/home/view/view_home.tsx @@ -1,16 +1,38 @@ -import { LayoutNavbarHome } from '@/module/_global'; -import { Group, Text } from '@mantine/core'; +"use client" +import { LayoutNavbarHome, WARNA } from '@/module/_global'; +import { ActionIcon, Box, Group, rem, Stack, Text } from '@mantine/core'; import React from 'react'; +import { HiMagnifyingGlass, HiOutlineBell, HiOutlineUser } from "react-icons/hi2"; +import Carosole from '../components/carosole'; +import Features from '../components/features'; + export default function ViewHome() { return ( <> - - - Perbekal Darmasaba - icon - - + + + Perbekal Darmasaba + + + + + + + + + + + + + + + + + + + + ); } diff --git a/yarn.lock b/yarn.lock index 9fe85cc..b407bb7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -160,10 +160,10 @@ "@jridgewell/resolve-uri" "^3.1.0" "@jridgewell/sourcemap-codec" "^1.4.14" -"@mantine/carousel@^7.11.0": - version "7.11.0" - resolved "https://registry.npmjs.org/@mantine/carousel/-/carousel-7.11.0.tgz" - integrity sha512-NVyChCtBfi8HOZkN6i9FPC2ZGkjjaNTtZDsbu22rYb3iHteKDS76Hp5hy04b2eLGwglHERCMeZu4g5Nf2ZSa/Q== +"@mantine/carousel@^7.11.1": + version "7.11.1" + resolved "https://registry.yarnpkg.com/@mantine/carousel/-/carousel-7.11.1.tgz#0d586c1bd9230b5c93a36479309499d2e5451f7a" + integrity sha512-w/hDZKkfamaiADhtWwo33ssrR8c6N9neVo5o5fep36k1R56+7+pFSm51g0/YgH8Y41GyLGzSVcGDvVGWOzg3+Q== "@mantine/charts@^7.11.0": version "7.11.0" @@ -1300,23 +1300,22 @@ eastasianwidth@^0.2.0: resolved "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz" integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA== -embla-carousel-react@^8.1.6: - version "8.1.6" - resolved "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.1.6.tgz" - integrity sha512-DHxwFzF63yVrU95Eo58E9Xr5b6Y9ul6TTsqb/rtwMi+jXudAmIqN1i9iBxQ73i8jKuUVxll/ziNYMmnWvrdQJQ== +embla-carousel-autoplay@^7.1.0: + version "7.1.0" + resolved "https://registry.yarnpkg.com/embla-carousel-autoplay/-/embla-carousel-autoplay-7.1.0.tgz#766a45eb5f21b9e3ff4bd1d91b4c3c578c04d8b6" + integrity sha512-nYfgSGn3ek44OzwO0t/Ptuxq4PNPD5l7Y9X7JjLYI/DN1uGjqxz9L73YYqR6YCRDnTYJ88s9fep48dzBnSG4vQ== + +embla-carousel-react@^7.1.0: + version "7.1.0" + resolved "https://registry.yarnpkg.com/embla-carousel-react/-/embla-carousel-react-7.1.0.tgz#e716f4df7fd31f7ca3e59a3e011158167bc3c468" + integrity sha512-tbYRPRZSDNd2QLNqYDcArAakGIxtUbhS7tkP0dGXktXHGgcX+3ji3VrOUTOftBiujZrMV8kRxtrRUe/1soloIQ== dependencies: - embla-carousel "8.1.6" - embla-carousel-reactive-utils "8.1.6" + embla-carousel "7.1.0" -embla-carousel-reactive-utils@8.1.6: - version "8.1.6" - resolved "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.1.6.tgz" - integrity sha512-Wg+J2YoqLqkaqsXi7fTJaLmXm6BpgDRJ0EfTdvQ4KE/ip5OsUuKGpJsEQDTt4waGXSDyZhIBlfoQtgGJeyYQ1Q== - -embla-carousel@8.1.6: - version "8.1.6" - resolved "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.1.6.tgz" - integrity sha512-9n7FVsbPAs1KD+JmO84DnEDOZMXPBQbLujjMQqvsBRN2CDWwgZ9hRSNapztdPnyJfzOIxowGmj0BUQ8ACYAPkA== +embla-carousel@7.1.0: + version "7.1.0" + resolved "https://registry.yarnpkg.com/embla-carousel/-/embla-carousel-7.1.0.tgz#c770dd3ade9285a97f5e3b6bbf705bc35ec0f9b5" + integrity sha512-Bh8Pa8NWzgugLkf8sAGexQlBCNDFaej5BXiKgQdRJ1mUC9NWBrw9Z23YVPVGkguWoz5LMjZXXFVGCobl3UPt/Q== emoji-regex@^8.0.0: version "8.0.0" @@ -2810,6 +2809,11 @@ react-dropzone-esm@15.0.1: dependencies: prop-types "^15.8.1" +react-icons@^5.2.1: + version "5.2.1" + resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.2.1.tgz#28c2040917b2a2eda639b0f797bff1888e018e4a" + integrity sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw== + react-is@^16.10.2, react-is@^16.13.1: version "16.13.1" resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"