Skip to content

Commit 790f251

Browse files
maamokunmaamokun
committed
add: styles, packages and auth stack
1 parent 9508f99 commit 790f251

17 files changed

+464
-2013
lines changed

Diff for: ‎app/assets/HSR.woff2

1.43 MB
Binary file not shown.

Diff for: ‎app/assets/MikanMascotFull.png

1.56 MB
Loading

Diff for: ‎app/assets/mikandev-circle.webp

91.2 KB
Binary file not shown.

Diff for: ‎app/globals.css

+3-27
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,8 @@
22
@tailwind components;
33
@tailwind utilities;
44

5-
:root {
6-
--foreground-rgb: 0, 0, 0;
7-
--background-start-rgb: 214, 219, 220;
8-
--background-end-rgb: 255, 255, 255;
9-
}
10-
11-
@media (prefers-color-scheme: dark) {
12-
:root {
13-
--foreground-rgb: 255, 255, 255;
14-
--background-start-rgb: 0, 0, 0;
15-
--background-end-rgb: 0, 0, 0;
16-
}
17-
}
185

196
body {
20-
color: rgb(var(--foreground-rgb));
21-
background: linear-gradient(
22-
to bottom,
23-
transparent,
24-
rgb(var(--background-end-rgb))
25-
)
26-
rgb(var(--background-start-rgb));
27-
}
28-
29-
@layer utilities {
30-
.text-balance {
31-
text-wrap: balance;
32-
}
33-
}
7+
color: #2d1800;
8+
background: #2d1800
9+
}

Diff for: ‎app/layout.tsx

+25-13
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,34 @@
11
import type { Metadata } from "next";
2-
import { Inter } from "next/font/google";
2+
import { headers } from "next/headers";
3+
import localFont from "next/font/local";
4+
import ClientSessionProvider from "@/app/lib/session";
35
import "./globals.css";
46

5-
const inter = Inter({ subsets: ["latin"] });
7+
const hsr = localFont({ src: "./assets/HSR.woff2" });
68

79
export const metadata: Metadata = {
8-
title: "Create Next App",
9-
description: "Generated by create next app",
10+
title: "MikanDev Payments",
11+
description: "Make a donation, or buy some our cool stuff :)",
1012
};
1113

1214
export default function RootLayout({
13-
children,
14-
}: Readonly<{
15-
children: React.ReactNode;
16-
}>) {
17-
return (
18-
<html lang="en">
19-
<body className={inter.className}>{children}</body>
20-
</html>
21-
);
15+
children,
16+
}: {
17+
children: React.ReactNode;
18+
}) {
19+
return (
20+
<html
21+
className={hsr.className}
22+
lang={headers().get("x-locale")?.split("-")[0]}
23+
>
24+
<body>
25+
<ClientSessionProvider>{children}</ClientSessionProvider>
26+
<script
27+
async
28+
src="https://analytics.mikandev.tech/script.js"
29+
data-website-id="58744762-f124-4ce3-8ec3-20a9081c196b"
30+
></script>
31+
</body>
32+
</html>
33+
);
2234
}

Diff for: ‎app/lib/session.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
"use client";
2+
3+
import { SessionProvider } from "next-auth/react";
4+
import { ReactNode } from "react";
5+
6+
const ClientSessionProvider = ({ children }: { children: ReactNode }) => {
7+
return <SessionProvider>{children}</SessionProvider>;
8+
};
9+
10+
export default ClientSessionProvider;

Diff for: ‎app/page.tsx

+1-109
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,5 @@
11
import Image from "next/image";
22

33
export default function Home() {
4-
return (
5-
<main className="flex min-h-screen flex-col items-center justify-between p-24">
6-
<div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
7-
<p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
8-
Get started by editing&nbsp;
9-
<code className="font-mono font-bold">app/page.tsx</code>
10-
</p>
11-
<div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:size-auto lg:bg-none">
12-
<a
13-
className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
14-
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
15-
target="_blank"
16-
rel="noopener noreferrer"
17-
>
18-
By{" "}
19-
<Image
20-
src="/vercel.svg"
21-
alt="Vercel Logo"
22-
className="dark:invert"
23-
width={100}
24-
height={24}
25-
priority
26-
/>
27-
</a>
28-
</div>
29-
</div>
30-
31-
<div className="relative z-[-1] flex place-items-center before:absolute before:h-[300px] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 sm:before:w-[480px] sm:after:w-[240px] before:lg:h-[360px]">
32-
<Image
33-
className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
34-
src="/next.svg"
35-
alt="Next.js Logo"
36-
width={180}
37-
height={37}
38-
priority
39-
/>
40-
</div>
41-
42-
<div className="mb-32 grid text-center lg:mb-0 lg:w-full lg:max-w-5xl lg:grid-cols-4 lg:text-left">
43-
<a
44-
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
45-
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
46-
target="_blank"
47-
rel="noopener noreferrer"
48-
>
49-
<h2 className="mb-3 text-2xl font-semibold">
50-
Docs{" "}
51-
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
52-
-&gt;
53-
</span>
54-
</h2>
55-
<p className="m-0 max-w-[30ch] text-sm opacity-50">
56-
Find in-depth information about Next.js features and API.
57-
</p>
58-
</a>
59-
60-
<a
61-
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
62-
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
63-
target="_blank"
64-
rel="noopener noreferrer"
65-
>
66-
<h2 className="mb-3 text-2xl font-semibold">
67-
Learn{" "}
68-
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
69-
-&gt;
70-
</span>
71-
</h2>
72-
<p className="m-0 max-w-[30ch] text-sm opacity-50">
73-
Learn about Next.js in an interactive course with&nbsp;quizzes!
74-
</p>
75-
</a>
76-
77-
<a
78-
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
79-
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
80-
target="_blank"
81-
rel="noopener noreferrer"
82-
>
83-
<h2 className="mb-3 text-2xl font-semibold">
84-
Templates{" "}
85-
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
86-
-&gt;
87-
</span>
88-
</h2>
89-
<p className="m-0 max-w-[30ch] text-sm opacity-50">
90-
Explore starter templates for Next.js.
91-
</p>
92-
</a>
93-
94-
<a
95-
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
96-
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
97-
target="_blank"
98-
rel="noopener noreferrer"
99-
>
100-
<h2 className="mb-3 text-2xl font-semibold">
101-
Deploy{" "}
102-
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
103-
-&gt;
104-
</span>
105-
</h2>
106-
<p className="m-0 max-w-[30ch] text-balance text-sm opacity-50">
107-
Instantly deploy your Next.js site to a shareable URL with Vercel.
108-
</p>
109-
</a>
110-
</div>
111-
</main>
112-
);
4+
return <main></main>;
1135
}

Diff for: ‎app/template.tsx

+186
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
"use client";
2+
import { Header, Footer, ToastProvider, useToast } from "@neodyland/ui";
3+
import Image from "next/image";
4+
import mikanLogo from "./assets/mikandev-circle.webp";
5+
import mikanMascot from "./assets/MikanMascotFull.png";
6+
import { useRouter, usePathname } from "next/navigation";
7+
import CookieConsent from "react-cookie-consent";
8+
9+
import { FaDiscord, FaGithub, FaTwitter, FaYoutube } from "react-icons/fa";
10+
import { SiMisskey } from "react-icons/si";
11+
12+
export default function RootLayout({
13+
children,
14+
}: { children: React.ReactNode }) {
15+
const router = useRouter();
16+
const pathname = usePathname();
17+
18+
const changeLanguage = () => {
19+
//@ts-ignore
20+
const pathSegments = pathname.split("/");
21+
if (pathSegments[1] === "en-GB") {
22+
pathSegments[1] = "ja-JP";
23+
} else if (pathSegments[1] === "ja-JP") {
24+
pathSegments[1] = "en-GB";
25+
}
26+
const newPath = pathSegments.join("/");
27+
router.push(newPath);
28+
};
29+
30+
const nav = [
31+
{
32+
name: "ホーム",
33+
href: "/",
34+
},
35+
{
36+
name: "サポート",
37+
href: "https://mikn.dev/contact",
38+
},
39+
{
40+
name: "特定商取引法に基づく表記",
41+
href: "https://docs.mikn.dev/legal/jp-payments",
42+
},
43+
];
44+
45+
const social = [
46+
{
47+
name: "GitHub",
48+
href: "https://github.com/maamokun",
49+
color: "hover:text-github hover:bg-github",
50+
icon: FaGithub,
51+
},
52+
{
53+
name: "Twitter",
54+
href: "https://twitter.com/kunkunmaamo",
55+
color: "hover:text-twitter hover:bg-twitter",
56+
icon: FaTwitter,
57+
},
58+
{
59+
name: "Discord",
60+
href: "https://discord.gg/FZCN6fjPuG",
61+
color: "hover:text-discord hover:bg-discord",
62+
icon: FaDiscord,
63+
},
64+
{
65+
name: "Misskey Server",
66+
href: "https://social.mikandev.tech/",
67+
color: "hover:text-misskey hover:bg-misskey",
68+
icon: SiMisskey,
69+
},
70+
];
71+
72+
const links = [
73+
{
74+
name: "Resouces",
75+
children: [
76+
{
77+
name: "About us",
78+
href: "/about",
79+
},
80+
{
81+
name: "Partners",
82+
href: "/partners",
83+
},
84+
{
85+
name: "Services",
86+
href: "/solutions",
87+
},
88+
{
89+
name: "Blog",
90+
href: "/blog",
91+
},
92+
],
93+
},
94+
{
95+
name: "Support",
96+
children: [
97+
{
98+
name: "Discord",
99+
href: "https://discord.gg/FZCN6fjPuG",
100+
},
101+
{
102+
name: "Contact Info",
103+
href: "/contact",
104+
},
105+
],
106+
},
107+
{
108+
name: "Legal",
109+
children: [
110+
{
111+
name: "Terms of use",
112+
href: "https://docs.mikn.dev/legal/terms",
113+
},
114+
{
115+
name: "Privacy policy",
116+
href: "https://docs.mikn.dev/legal/privacy",
117+
},
118+
{
119+
name: "Payments",
120+
href: "https://docs.mikn.dev/legal/jp-payments",
121+
},
122+
{
123+
name: "GDPR",
124+
href: "https://docs.mikn.dev/legal/dpa",
125+
},
126+
],
127+
},
128+
];
129+
130+
const buttons = [
131+
{
132+
href: "/account",
133+
title: "アカウント",
134+
colorScheme: "primary",
135+
},
136+
{
137+
title: "🌎",
138+
colorScheme: "primary",
139+
onClick: () => {
140+
changeLanguage();
141+
},
142+
},
143+
];
144+
145+
return (
146+
<>
147+
<Header
148+
navigation={nav}
149+
//@ts-ignore
150+
buttons={buttons}
151+
brand={{
152+
showTitle: true,
153+
name: "Payment Center",
154+
href: "/",
155+
logo: mikanLogo.src,
156+
}}
157+
/>
158+
<div className="mx-auto min-h-screen max-w-7xl px-4 py-24">
159+
<ToastProvider>
160+
{children}
161+
<CookieConsent
162+
location="bottom"
163+
buttonText="Yum! 🍪"
164+
cookieName="CookieConsent"
165+
style={{ background: "#ff9900" }}
166+
buttonStyle={{ color: "#261800", fontSize: "13px" }}
167+
expires={150}
168+
>
169+
We use cookies to enhance your experience. Would you like some?
170+
</CookieConsent>
171+
</ToastProvider>
172+
</div>
173+
<Footer social={social} links={links} copylight="2020-2024 MikanDev">
174+
<div className="flex items-center self-end">
175+
<Image
176+
src={mikanMascot.src}
177+
width={200}
178+
height={100}
179+
alt="MikanDev Tech"
180+
className="ml-2 mb-0"
181+
/>
182+
</div>
183+
</Footer>
184+
</>
185+
);
186+
}

Diff for: ‎bun.lockb

246 KB
Binary file not shown.

0 commit comments

Comments
 (0)