tambahannnya
This commit is contained in:
bipproduction
11
src/app/_com/WebVitals.tsx
Normal file
11
src/app/_com/WebVitals.tsx
Normal file
@@ -0,0 +1,11 @@
|
||||
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||
"use client";
|
||||
|
||||
import { useReportWebVitals } from "next/web-vitals";
|
||||
|
||||
export function WebVitals() {
|
||||
useReportWebVitals((metric) => {
|
||||
// console.log(metric);
|
||||
});
|
||||
return null;
|
||||
}
|
||||
128
src/app/animate/page.tsx
Normal file
128
src/app/animate/page.tsx
Normal file
@@ -0,0 +1,128 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
motion,
|
||||
MotionValue,
|
||||
useScroll,
|
||||
useSpring,
|
||||
useTransform,
|
||||
} from "motion/react"
|
||||
import { useRef } from "react"
|
||||
|
||||
function useParallax(value: MotionValue<number>, distance: number) {
|
||||
return useTransform(value, [0, 1], [-distance, distance])
|
||||
}
|
||||
|
||||
function Image({ id }: { id: number }) {
|
||||
const ref = useRef(null)
|
||||
const { scrollYProgress } = useScroll({ target: ref })
|
||||
const y = useParallax(scrollYProgress, 300)
|
||||
|
||||
return (
|
||||
<section className="img-container">
|
||||
<div ref={ref}>
|
||||
<img
|
||||
src={`https://placehold.co/40${id}`}
|
||||
alt="A London skyscraper"
|
||||
/>
|
||||
</div>
|
||||
<motion.h2
|
||||
// Hide until scroll progress is measured
|
||||
initial={{ visibility: "hidden" }}
|
||||
animate={{ visibility: "visible" }}
|
||||
style={{ y }}
|
||||
>{`#00${id}`}</motion.h2>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Parallax() {
|
||||
const { scrollYProgress } = useScroll()
|
||||
const scaleX = useSpring(scrollYProgress, {
|
||||
stiffness: 100,
|
||||
damping: 30,
|
||||
restDelta: 0.001,
|
||||
})
|
||||
|
||||
return (
|
||||
<div id="example">
|
||||
{[1, 2, 3, 4, 5].map((image) => (
|
||||
<Image key={image} id={image} />
|
||||
))}
|
||||
<motion.div className="progress" style={{ scaleX }} />
|
||||
<StyleSheet />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* ============== Styles ================
|
||||
*/
|
||||
|
||||
function StyleSheet() {
|
||||
return (
|
||||
<style>{`
|
||||
html {
|
||||
scroll-snap-type: y mandatory;
|
||||
}
|
||||
|
||||
.img-container {
|
||||
height: 100vh;
|
||||
scroll-snap-align: start;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.img-container > div {
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
margin: 20px;
|
||||
background: #f5f5f5;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.img-container img {
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.img-container > div {
|
||||
width: 150px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.img-container img {
|
||||
width: 150px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.img-container h2 {
|
||||
color: #4ff0b7;
|
||||
margin: 0;
|
||||
font-family: JetBrains Mono, monospace;
|
||||
font-size: 50px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -3px;
|
||||
line-height: 1.2;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
top: calc(50% - 25px);
|
||||
left: calc(50% + 120px);
|
||||
}
|
||||
|
||||
.progress {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 5px;
|
||||
background: #4ff0b7;
|
||||
bottom: 50px;
|
||||
transform: scaleX(0);
|
||||
}
|
||||
`}</style>
|
||||
)
|
||||
}
|
||||
10
src/app/api/[[...slugs]]/_lib/get-potensi.ts
Normal file
10
src/app/api/[[...slugs]]/_lib/get-potensi.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
import prisma from "@/lib/prisma";
|
||||
|
||||
async function getPotensi() {
|
||||
const data = await prisma.potensi.findMany()
|
||||
return {
|
||||
data
|
||||
}
|
||||
}
|
||||
|
||||
export default getPotensi
|
||||
38
src/app/api/[[...slugs]]/route.ts
Normal file
38
src/app/api/[[...slugs]]/route.ts
Normal file
@@ -0,0 +1,38 @@
|
||||
import prisma from "@/lib/prisma";
|
||||
import cors, { HTTPMethod } from "@elysiajs/cors";
|
||||
import swagger from "@elysiajs/swagger";
|
||||
import { Elysia } from "elysia";
|
||||
import getPotensi from "./_lib/get-potensi";
|
||||
|
||||
const corsConfig = {
|
||||
origin: "*",
|
||||
methods: ["GET", "POST", "PATCH", "DELETE", "PUT"] as HTTPMethod[],
|
||||
allowedHeaders: "*",
|
||||
exposedHeaders: "*",
|
||||
maxAge: 5,
|
||||
credentials: true,
|
||||
};
|
||||
|
||||
|
||||
async function layanan() {
|
||||
const data = await prisma.layanan.findMany();
|
||||
return { data };
|
||||
}
|
||||
const ApiServer = new Elysia()
|
||||
.use(swagger({ path: "/api/docs" }))
|
||||
.use(cors(corsConfig))
|
||||
.group("/api", app => app
|
||||
.get("/layanan", layanan)
|
||||
.get("/potensi", getPotensi)
|
||||
)
|
||||
|
||||
|
||||
|
||||
export const GET = ApiServer.handle;
|
||||
export const POST = ApiServer.handle;
|
||||
export const PATCH = ApiServer.handle;
|
||||
export const DELETE = ApiServer.handle;
|
||||
export const PUT = ApiServer.handle;
|
||||
|
||||
export type AppServer = typeof ApiServer
|
||||
|
||||
7
src/app/desa/page.tsx
Normal file
7
src/app/desa/page.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
import { Stack } from "@mantine/core";
|
||||
|
||||
export default function Page() {
|
||||
return <Stack>
|
||||
desa
|
||||
</Stack>
|
||||
}
|
||||
7
src/app/ekonomi/page.tsx
Normal file
7
src/app/ekonomi/page.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
import { Stack } from "@mantine/core";
|
||||
|
||||
export default function Page() {
|
||||
return <Stack>
|
||||
ekonomi
|
||||
</Stack>
|
||||
}
|
||||
@@ -1,42 +1,31 @@
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
/* styles/globals.css */
|
||||
@font-face {
|
||||
font-family: 'San Francisco';
|
||||
src: url('/assets/fonts/font.otf') format('opentype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
.glass {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
-webkit-backdrop-filter: blur(40px);
|
||||
backdrop-filter: blur(40px);
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
max-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
.glass2 {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
-webkit-backdrop-filter: blur(40px);
|
||||
backdrop-filter: blur(40px);
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--foreground);
|
||||
background: var(--background);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
||||
.glass3 {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
-webkit-backdrop-filter: blur(40px);
|
||||
backdrop-filter: blur(40px);
|
||||
}
|
||||
|
||||
7
src/app/inovasi/page.tsx
Normal file
7
src/app/inovasi/page.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
import { Stack } from "@mantine/core";
|
||||
|
||||
export default function Page() {
|
||||
return <Stack>
|
||||
inovasi
|
||||
</Stack>
|
||||
}
|
||||
7
src/app/keamanan/page.tsx
Normal file
7
src/app/keamanan/page.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
import { Stack } from "@mantine/core";
|
||||
|
||||
export default function Page() {
|
||||
return <Stack>
|
||||
keamanan
|
||||
</Stack>
|
||||
}
|
||||
7
src/app/kesehatan/page.tsx
Normal file
7
src/app/kesehatan/page.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
import { Stack } from "@mantine/core";
|
||||
|
||||
export default function Page() {
|
||||
return <Stack>
|
||||
kesehatan
|
||||
</Stack>
|
||||
}
|
||||
@@ -1,32 +1,60 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
// Import styles of packages that you've installed.
|
||||
// All packages except `@mantine/hooks` require styles imports
|
||||
import "@mantine/carousel/styles.css";
|
||||
import "@mantine/core/styles.css";
|
||||
import "animate.css";
|
||||
import "./globals.css";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
import LoadDataFirstClient from "@/com/LoadDataFirstClient";
|
||||
import {
|
||||
ColorSchemeScript,
|
||||
MantineProvider,
|
||||
createTheme,
|
||||
mantineHtmlProps,
|
||||
} from "@mantine/core";
|
||||
import { MainLayout } from "../com/MainLayout";
|
||||
import { ViewTransitions } from "next-view-transitions";
|
||||
import { WebVitals } from "./_com/WebVitals";
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
export const metadata = {
|
||||
title: "desa darmasaba",
|
||||
description: "Desa Darmasaba Kabupaten Badung",
|
||||
};
|
||||
|
||||
const theme = createTheme({
|
||||
fontFamily:
|
||||
"San Francisco, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif",
|
||||
fontFamilyMonospace:
|
||||
"SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace",
|
||||
headings: { fontFamily: "San Francisco, sans-serif" },
|
||||
});
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={`${geistSans.variable} ${geistMono.variable}`}>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
<ViewTransitions>
|
||||
<html lang="en" {...mantineHtmlProps}>
|
||||
<head>
|
||||
<ColorSchemeScript />
|
||||
<link
|
||||
rel="icon"
|
||||
href="/assets/images/darmasaba-icon.png"
|
||||
sizes="any"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<MantineProvider theme={theme}>
|
||||
<MainLayout>
|
||||
<WebVitals />
|
||||
{children}
|
||||
</MainLayout>
|
||||
</MantineProvider>
|
||||
</body>
|
||||
<LoadDataFirstClient />
|
||||
</html>
|
||||
</ViewTransitions>
|
||||
);
|
||||
}
|
||||
|
||||
7
src/app/lingkungan/page.tsx
Normal file
7
src/app/lingkungan/page.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
import { Stack } from "@mantine/core";
|
||||
|
||||
export default function Page() {
|
||||
return <Stack>
|
||||
lingkungan
|
||||
</Stack>
|
||||
}
|
||||
15
src/app/module/page.tsx
Normal file
15
src/app/module/page.tsx
Normal file
@@ -0,0 +1,15 @@
|
||||
'use client'
|
||||
|
||||
import { Stack } from "@mantine/core"
|
||||
import { useSnapshot } from "valtio"
|
||||
import stateNav from "@/state/state-nav"
|
||||
|
||||
export default function Page() {
|
||||
const { module, isSearch } = useSnapshot(stateNav)
|
||||
|
||||
return (
|
||||
<Stack h={"100vh"} >
|
||||
{JSON.stringify({ module, isSearch })}
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
@@ -1,168 +0,0 @@
|
||||
.page {
|
||||
--gray-rgb: 0, 0, 0;
|
||||
--gray-alpha-200: rgba(var(--gray-rgb), 0.08);
|
||||
--gray-alpha-100: rgba(var(--gray-rgb), 0.05);
|
||||
|
||||
--button-primary-hover: #383838;
|
||||
--button-secondary-hover: #f2f2f2;
|
||||
|
||||
display: grid;
|
||||
grid-template-rows: 20px 1fr 20px;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
min-height: 100svh;
|
||||
padding: 80px;
|
||||
gap: 64px;
|
||||
font-family: var(--font-geist-sans);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.page {
|
||||
--gray-rgb: 255, 255, 255;
|
||||
--gray-alpha-200: rgba(var(--gray-rgb), 0.145);
|
||||
--gray-alpha-100: rgba(var(--gray-rgb), 0.06);
|
||||
|
||||
--button-primary-hover: #ccc;
|
||||
--button-secondary-hover: #1a1a1a;
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
grid-row-start: 2;
|
||||
}
|
||||
|
||||
.main ol {
|
||||
font-family: var(--font-geist-mono);
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
letter-spacing: -0.01em;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
.main li:not(:last-of-type) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.main code {
|
||||
font-family: inherit;
|
||||
background: var(--gray-alpha-100);
|
||||
padding: 2px 4px;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ctas {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.ctas a {
|
||||
appearance: none;
|
||||
border-radius: 128px;
|
||||
height: 48px;
|
||||
padding: 0 20px;
|
||||
border: none;
|
||||
border: 1px solid transparent;
|
||||
transition:
|
||||
background 0.2s,
|
||||
color 0.2s,
|
||||
border-color 0.2s;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
a.primary {
|
||||
background: var(--foreground);
|
||||
color: var(--background);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
a.secondary {
|
||||
border-color: var(--gray-alpha-200);
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
grid-row-start: 3;
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.footer img {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Enable hover only on non-touch devices */
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
a.primary:hover {
|
||||
background: var(--button-primary-hover);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
a.secondary:hover {
|
||||
background: var(--button-secondary-hover);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.footer a:hover {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.page {
|
||||
padding: 32px;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.main {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.main ol {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ctas {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.ctas a {
|
||||
font-size: 14px;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
a.secondary {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.footer {
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.logo {
|
||||
filter: invert();
|
||||
}
|
||||
}
|
||||
119
src/app/page.tsx
119
src/app/page.tsx
@@ -1,95 +1,32 @@
|
||||
import Image from "next/image";
|
||||
import styles from "./page.module.css";
|
||||
import Content1 from "@/com/main-page/content-1";
|
||||
import Content2 from "@/com/main-page/content-2";
|
||||
import Content3 from "@/com/main-page/content-3";
|
||||
import Content4 from "@/com/main-page/content-4";
|
||||
import Content5 from "@/com/main-page/content-5";
|
||||
import Content6 from "@/com/main-page/content-6";
|
||||
import colors from "@/con/colors";
|
||||
// import ApiFetch from "@/lib/api-fetch";
|
||||
import { Stack } from "@mantine/core";
|
||||
|
||||
export default function Home() {
|
||||
export default function Page() {
|
||||
return (
|
||||
<div className={styles.page}>
|
||||
<main className={styles.main}>
|
||||
<Image
|
||||
className={styles.logo}
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={180}
|
||||
height={38}
|
||||
priority
|
||||
/>
|
||||
<ol>
|
||||
<li>
|
||||
Get started by editing <code>src/app/page.tsx</code>.
|
||||
</li>
|
||||
<li>Save and see your changes instantly.</li>
|
||||
</ol>
|
||||
|
||||
<div className={styles.ctas}>
|
||||
<a
|
||||
className={styles.primary}
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className={styles.logo}
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
Deploy now
|
||||
</a>
|
||||
<a
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={styles.secondary}
|
||||
>
|
||||
Read our docs
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
<footer className={styles.footer}>
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/file.svg"
|
||||
alt="File icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Learn
|
||||
</a>
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/window.svg"
|
||||
alt="Window icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Examples
|
||||
</a>
|
||||
<a
|
||||
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/globe.svg"
|
||||
alt="Globe icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Go to nextjs.org →
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
<Stack bg={colors.grey[1]} gap={"4rem"}>
|
||||
<Content1 />
|
||||
<Content2 />
|
||||
<Content3 />
|
||||
<Content4 />
|
||||
<Content5 />
|
||||
<Content6 />
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
// async function Content3Loader() {
|
||||
// const { data } = await fetch("/api/layanan").then((v) => v.json());
|
||||
// return <Content3 data={data} />;
|
||||
// }
|
||||
|
||||
// async function Content4Loader() {
|
||||
// const { data } = await ApiFetch.api.potensi.get();
|
||||
// return <Content4 data={data?.data as any} />;
|
||||
// }
|
||||
|
||||
7
src/app/pendidikan/page.tsx
Normal file
7
src/app/pendidikan/page.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
import { Stack } from "@mantine/core";
|
||||
|
||||
export default function Page() {
|
||||
return <Stack>
|
||||
pendidikan
|
||||
</Stack>
|
||||
}
|
||||
Reference in New Issue
Block a user