Skip to content

Commit fa39960

Browse files
katelovestocodekatelovestocode
committed
add pages, reused components
1 parent 7a1af4e commit fa39960

33 files changed

+608
-41
lines changed

‎app/about/loading.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export default function Loading() {
2+
return (
3+
<div style={{ position: "absolute", zIndex: 100, top: "45%", left: "45%" }}>
4+
<span
5+
style={{ height: "130px", width: "130px" }}
6+
className="loading loading-ring loading-lg"
7+
></span>
8+
</div>
9+
);
10+
}

‎app/about/page.tsx

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import Container from "@/components/Container";
2+
import Modal from "@/components/Modal";
3+
import { Metadata } from "next";
4+
5+
export const metadata: Metadata = {
6+
title: "About Us",
7+
};
8+
9+
export default function About() {
10+
return (
11+
<Container title={"About Us"}>
12+
<p className="text-xl">
13+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem
14+
aspernatur dolores provident commodi ratione explicabo ipsam nesciunt
15+
optio eaque unde qui sit tempora sunt dolor neque, illo, aliquid et ad.
16+
</p>
17+
18+
<Modal
19+
modal_id={"about"}
20+
title={"About Us Page"}
21+
text={
22+
"Lorem ipsum dolor sit, amet consectetur adipisicing elit.Quidem aspernatur dolores provident commodi ratione explicabo ipsam"
23+
}
24+
/>
25+
</Container>
26+
);
27+
}

‎app/companies/loading.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export default function Loading() {
2+
return (
3+
<div style={{ position: "absolute", zIndex: 100, top: "45%", left: "45%" }}>
4+
<span
5+
style={{ height: "130px", width: "130px" }}
6+
className="loading loading-ring loading-lg"
7+
></span>
8+
</div>
9+
);
10+
}

‎app/companies/page.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import Container from "@/components/Container";
2+
import { Metadata } from "next";
3+
4+
export const metadata: Metadata = {
5+
title: "List of Companies",
6+
};
7+
8+
export default function Companies() {
9+
return (
10+
<Container title={"List of Companies"}>
11+
<p className="text-xl">
12+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem
13+
aspernatur dolores provident commodi ratione explicabo ipsam nesciunt
14+
optio eaque unde qui sit tempora sunt dolor neque, illo, aliquid et ad.
15+
</p>
16+
</Container>
17+
);
18+
}

‎app/company-profile/loading.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export default function Loading() {
2+
return (
3+
<div style={{ position: "absolute", zIndex: 100, top: "45%", left: "45%" }}>
4+
<span
5+
style={{ height: "130px", width: "130px" }}
6+
className="loading loading-ring loading-lg"
7+
></span>
8+
</div>
9+
);
10+
}

‎app/company-profile/page.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import Container from "@/components/Container";
2+
import { Metadata } from "next";
3+
4+
export const metadata: Metadata = {
5+
title: "Company Profile",
6+
};
7+
8+
export default function CompanyProfile() {
9+
return (
10+
<Container title={"Company Profile"}>
11+
<p className="text-xl">
12+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem
13+
aspernatur dolores provident commodi ratione explicabo ipsam nesciunt
14+
optio eaque unde qui sit tempora sunt dolor neque, illo, aliquid et ad.
15+
</p>
16+
</Container>
17+
);
18+
}

‎app/globals.css

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
:root {
66
--foreground-rgb: 0, 0, 0;
7+
background: #fcfaf8;
78
}
89

910
@media (prefers-color-scheme: dark) {

‎app/layout.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Metadata } from "next";
2-
import { Adamina, Inter } from "next/font/google";
2+
import { Adamina } from "next/font/google";
33
import "./globals.css";
44
import { TheHeader } from "@/components/TheHeader";
55

‎app/login/loading.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export default function Loading() {
2+
return (
3+
<div style={{ position: "absolute", zIndex: 100, top: "45%", left: "45%" }}>
4+
<span
5+
style={{ height: "130px", width: "130px" }}
6+
className="loading loading-ring loading-lg"
7+
></span>
8+
</div>
9+
);
10+
}

‎app/login/page.tsx

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { AuthButton } from "@/components/AuthButton";
2+
import Link from "next/link";
3+
import { Wrapper } from "@/components/Wrapper";
4+
import LoginForm from "@/components/LoginForm";
5+
import { Metadata } from "next";
6+
7+
export const metadata: Metadata = {
8+
title: "Sign In",
9+
};
10+
11+
export default function Login() {
12+
return (
13+
<Wrapper title={"Continue the Journey, Sign In"}>
14+
<AuthButton title={"Auth0"} />
15+
<p className="font-bold text-xl p-4"> OR </p>
16+
<LoginForm />
17+
<p>
18+
Do not have an account?
19+
<Link href="/register">
20+
<span className="font-bold"> Sign up</span>
21+
</Link>
22+
</p>
23+
</Wrapper>
24+
);
25+
}

‎app/page.tsx

+10-9
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,25 @@ import Image from "next/image";
22

33
export default function Home() {
44
return (
5-
<main className="flex flex-row gap-10 place-content-between px-20">
6-
<div className="flex flex-col gap-16 justify-center w-3/6">
5+
<main className="flex flex-row gap-10 place-content-around px-20 py-8">
6+
<div className="flex flex-col gap-16 justify-center w-3/6">
77
<h1 className="font-bold text-3xl">
88
Welcome to Meduzzen Full-Stack Internship
99
</h1>
1010
<p className="text-xl">
11-
{" "}
1211
It may be a challenging and lengthy journey, but the rewards will make
1312
it all worthwhile. Stay resilient!
1413
</p>
1514
</div>
1615
<div>
17-
<Image
18-
width={635}
19-
height={675}
20-
src={"/images/hero-min.png"}
21-
alt="hero-image"
22-
/>
16+
<div className={"w-600"}>
17+
<Image
18+
width={635}
19+
height={675}
20+
src={"/images/hero-min.png"}
21+
alt="hero-image"
22+
/>
23+
</div>
2324
</div>
2425
</main>
2526
);

‎app/profile/loading.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export default function Loading() {
2+
return (
3+
<div style={{ position: "absolute", zIndex: 100, top: "45%", left: "45%" }}>
4+
<span
5+
style={{ height: "130px", width: "130px" }}
6+
className="loading loading-ring loading-lg"
7+
></span>
8+
</div>
9+
);
10+
}

‎app/profile/page.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import Container from "@/components/Container";
2+
import { Metadata } from "next";
3+
4+
export const metadata: Metadata = {
5+
title: "User's Profile",
6+
};
7+
8+
export default function Profile() {
9+
return (
10+
<Container title={"Profile"}>
11+
<p className="text-xl">
12+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem
13+
aspernatur dolores provident commodi ratione explicabo ipsam nesciunt
14+
optio eaque unde qui sit tempora sunt dolor neque, illo, aliquid et ad.
15+
</p>
16+
</Container>
17+
);
18+
}

‎app/register/loading.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export default function Loading() {
2+
return (
3+
<div style={{ position: "absolute", zIndex: 100, top: "45%", left: "45%" }}>
4+
<span
5+
style={{ height: "130px", width: "130px" }}
6+
className="loading loading-ring loading-lg"
7+
></span>
8+
</div>
9+
);
10+
}

‎app/register/page.tsx

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { AuthButton } from "@/components/AuthButton";
2+
import RegisterForm from "@/components/RegisterForm";
3+
import { Wrapper } from "@/components/Wrapper";
4+
import { Metadata } from "next";
5+
import Link from "next/link";
6+
7+
export const metadata: Metadata = {
8+
title: "Sign Up",
9+
};
10+
11+
export default function Register() {
12+
return (
13+
<Wrapper title={"Sign Up to be a part of our gang"}>
14+
<RegisterForm />
15+
16+
<p className="font-bold text-xl"> OR </p>
17+
<AuthButton title={"Auth0"} />
18+
19+
<p>
20+
Already have an account?
21+
<Link href="/login">
22+
<span className="font-bold"> Sign in</span>
23+
</Link>
24+
</p>
25+
</Wrapper>
26+
);
27+
}

‎app/users/loading.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export default function Loading() {
2+
return (
3+
<div style={{ position: "absolute", zIndex: 100, top: "45%", left: "45%" }}>
4+
<span
5+
style={{ height: "130px", width: "130px" }}
6+
className="loading loading-ring loading-lg"
7+
></span>
8+
</div>
9+
);
10+
}

‎app/users/page.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import Container from "@/components/Container";
2+
import { Metadata } from "next";
3+
4+
export const metadata: Metadata = {
5+
title: "List of Users",
6+
};
7+
8+
export default function Users() {
9+
return (
10+
<Container title={"List of Users"}>
11+
<p className="text-xl">
12+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem
13+
aspernatur dolores provident commodi ratione explicabo ipsam nesciunt
14+
optio eaque unde qui sit tempora sunt dolor neque, illo, aliquid et ad.
15+
</p>
16+
</Container>
17+
);
18+
}

‎components/AuthButton.tsx

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
interface AuthButtonProps {
2+
title: string;
3+
onClick?: () => void;
4+
}
5+
6+
export const AuthButton = ({ title, onClick, ...rest }: AuthButtonProps) => {
7+
return (
8+
<button
9+
type="submit"
10+
className={
11+
"w-full h-68 px-4 py-2 border-solid border-gray-200 border-2 rounded-xl text-white text-xl bg-gray-700 hover:bg-gray-600 shadow-sm"
12+
}
13+
onClick={onClick}
14+
{...rest}
15+
>
16+
{title}
17+
</button>
18+
);
19+
};

‎components/AuthImage.tsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import Image from "next/image";
2+
3+
const AuthImage = () => {
4+
return (
5+
<div className="flex items-center w-600">
6+
<Image
7+
src="/images/auth-round-min.png"
8+
alt="background"
9+
layout="responsive"
10+
width={418}
11+
height={427}
12+
/>
13+
</div>
14+
);
15+
};
16+
17+
export default AuthImage;

‎components/Container.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
interface ContainerProps {
2+
title: string;
3+
children: React.ReactNode;
4+
}
5+
6+
export default function Container({ title, children }: ContainerProps) {
7+
return (
8+
<main className="flex flex-col gap-10 items-center place-content-between px-20 py-8">
9+
<h1 className="font-bold text-3xl">{title}</h1>
10+
{children}
11+
</main>
12+
);
13+
}

‎components/Input.tsx

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React, { FC, InputHTMLAttributes } from "react";
2+
3+
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
4+
name: string;
5+
type: string;
6+
placeholder: string;
7+
pattern?: string;
8+
className: string;
9+
}
10+
11+
export const Input: FC<InputProps> = ({
12+
name,
13+
type,
14+
placeholder,
15+
pattern,
16+
className,
17+
...rest
18+
}) => {
19+
return (
20+
<input
21+
type={type}
22+
name={name}
23+
placeholder={placeholder}
24+
pattern={pattern}
25+
className={`w-full h-68 px-4 py-2 border-solid border-gray-200 border-2 rounded-xl`}
26+
{...rest}
27+
/>
28+
);
29+
};

0 commit comments

Comments
 (0)