Skip to content

Commit 0eb9e58

Browse files
yorukotyorukot
committed
update translate source language &
update header & setup mantine upload license
1 parent 0ddd6e8 commit 0eb9e58

File tree

13 files changed

+2335
-180
lines changed

13 files changed

+2335
-180
lines changed

‎LICENSE‎

Lines changed: 674 additions & 0 deletions
Large diffs are not rendered by default.

‎app/[locale]/layout.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { HeaderComponent } from "@/components/header/Header";
12
import { notFound } from "next/navigation";
23
import React from "react";
34

@@ -16,7 +17,9 @@ export default function LocaleLayout({
1617

1718
return (
1819
<html lang={locale}>
19-
<body>{children}</body>
20+
<body>
21+
{children}
22+
</body>
2023
</html>
2124
);
2225
}

‎app/[locale]/page.tsx‎

Lines changed: 5 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,8 @@
1-
import Image from 'next/image'
2-
import {useTranslations} from 'next-intl';
1+
import { useTranslations } from "next-intl";
2+
import { HeaderComponent } from "@/components/header/Header";
33

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

‎app/globals.css‎

Lines changed: 1 addition & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,3 @@
11
@tailwind base;
22
@tailwind components;
3-
@tailwind utilities;
4-
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-
}
18-
19-
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-
}
3+
@tailwind utilities;

‎app/layout.tsx‎

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,33 @@
1-
import type { Metadata } from 'next'
2-
import { Inter } from 'next/font/google'
3-
import './globals.css'
1+
import "./globals.css";
42

5-
const inter = Inter({ subsets: ['latin'] })
3+
import "@mantine/core/styles.css";
4+
import { MantineProvider, ColorSchemeScript } from "@mantine/core";
5+
import { Inter } from "next/font/google";
6+
import type { Metadata } from "next";
7+
import { theme } from "@/themes/theme";
8+
9+
const inter = Inter({ subsets: ["latin"] });
610

711
export const metadata: Metadata = {
8-
title: 'Create Next App',
9-
description: 'Generated by create next app',
10-
}
12+
title: "Create Next App",
13+
description: "Generated by create next app",
14+
};
1115

1216
export default function RootLayout({
1317
children,
1418
}: {
15-
children: React.ReactNode
19+
children: React.ReactNode;
1620
}) {
1721
return (
18-
<html lang="en">
19-
<body className={inter.className}>{children}</body>
22+
<html>
23+
<head>
24+
<ColorSchemeScript defaultColorScheme="auto" />
25+
</head>
26+
<body className={inter.className}>
27+
<MantineProvider theme={theme} defaultColorScheme="auto">
28+
{children}
29+
</MantineProvider>
30+
</body>
2031
</html>
21-
)
32+
);
2233
}

‎components/header/Header.module.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.header {
2+
margin-bottom: rem(120px);
3+
background-color: var(--mantine-color-body);
4+
border-bottom: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
5+
}
6+
7+
.container {
8+
padding: 10px 5px;
9+
}
10+
11+
.textInput {
12+
flex: 1;
13+
max-width: 400px;
14+
}
15+
16+
.centerHorizontal {
17+
margin-left: auto;
18+
margin-right: auto;
19+
display: block;
20+
}
21+
22+
.flexone {
23+
flex: 1;
24+
}

‎components/header/Header.tsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import {
2+
Container,
3+
Group,
4+
Text,
5+
Button,
6+
TextInput,
7+
Space,
8+
} from "@mantine/core";
9+
import classes from "./Header.module.css";
10+
import { HiOutlineSearch, HiOutlineQuestionMarkCircle } from "react-icons/hi";
11+
import { FaGithub } from "react-icons/fa";
12+
13+
export async function HeaderComponent({ t }: { t: any }) {
14+
return (
15+
<header className={classes.header}>
16+
<Container size="1440px" className={classes.container}>
17+
<Group justify="space-between" gap="xl">
18+
<Group justify="space-between" gap="sm">
19+
<Text fw={700} size="30px" className={classes.centerHorizontal}>
20+
returnone
21+
</Text>
22+
<Space w="xl" className={classes.flexone}/>
23+
<Text fw={700} size="md" className={classes.centerHorizontal}>
24+
{t("blog")}
25+
</Text>{" "}
26+
<Text fw={700} size="md" className={classes.centerHorizontal}>
27+
{t("about_us")}
28+
</Text>
29+
</Group>
30+
31+
<TextInput
32+
placeholder={t("search")}
33+
className={classes.textInput}
34+
radius="lg"
35+
rightSection={<HiOutlineSearch />}
36+
/>
37+
<Group justify="space-between" gap="sm">
38+
<Button
39+
leftSection={<HiOutlineQuestionMarkCircle size={20} />}
40+
radius="md"
41+
variant="gradient"
42+
gradient={{ from: "#FFC37D", to: "#FF6B01", deg: 154 }}
43+
>
44+
Ask
45+
</Button>
46+
<Space w="xl" className={classes.flexone}/>
47+
<Button variant="outline" radius="md">
48+
{t("login")}
49+
</Button>
50+
<Button variant="filled" radius="md" color="">
51+
{t("signup")}
52+
</Button>
53+
<Space w="xl" className={classes.flexone}/>
54+
<FaGithub size={35}></FaGithub>
55+
</Group>
56+
</Group>
57+
</Container>
58+
</header>
59+
);
60+
}

‎crowdin.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
files:
2-
- source: /language/zh-TW.json
2+
- source: /language/en.json
33
translation: /language/%osx_locale%.json

‎language/en.json‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
{
2-
"Index": {
3-
"title": "Hello!"
2+
"Header": {
3+
"signup": "Sign up",
4+
"login": "Log in",
5+
"search": "Search",
6+
"blog": "BLOG",
7+
"about_us": "ABOUT US"
48
}
9+
510
}

0 commit comments

Comments
 (0)