blob: da41a5bb9b13f88f0091be3f2e15f16d5a5e7c92 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
import PageContent from "~/modules/page-content";
import Form from "./components/Form";
import RegistrasiIndividu from "./components/RegistrasiIndividu";
import RegistrasiBisnis from "./components/RegistrasiBisnis";
import FormBisnis from "./components/FormBisnis";
import Link from "next/link";
import Image from "next/image";
import IndoteknikLogo from "~/images/logo.png";
import AccountActivation from "../account-activation";
import { useState } from "react";
const LOGO_WIDTH = 150;
const LOGO_HEIGHT = LOGO_WIDTH / 3;
const Register = () => {
const [isIndividuClicked, setIsIndividuClicked] = useState(true);
const [isBisnisClicked, setIsBisnisClicked] = useState(false);
const handleIndividuClick = () => {
setIsIndividuClicked(true);
setIsBisnisClicked(false);
};
const handleBisnisClick = () => {
setIsIndividuClicked(false);
setIsBisnisClicked(true);
};
return (
<div className="container">
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 pt-10 px-2 md:pt-16">
<section className="border">
<div className="px-8 py-4">
<Link href="/" className="block md:hidden">
<Image
src={IndoteknikLogo}
alt="Logo Indoteknik"
width={LOGO_WIDTH}
height={LOGO_HEIGHT}
className="mx-auto mb-4 w-auto h-auto"
priority
/>
</Link>
<h1 className="text-2xl font-semibold text-center md:text-left">
Daftar Akun Indoteknik
</h1>
<h2 className="text-gray_r-11 mt-1 mb-4 text-center md:text-left">
Buat akun sekarang lebih mudah dan terverifikasi
</h2>
<label htmlFor="name" className="text-black font-bold">
Tipe Akun
</label>
<div className="grid grid-cols-2 gap-x-3 mt-2 h-14 font-bold text-black hover:cursor-pointer">
<div
className={` border rounded-md flex justify-center items-center transition-colors duration-300 ease-in-out ${
isIndividuClicked ? "bg-red-500 text-white" : ""
}`}
onClick={handleIndividuClick}
>
<p>Individu</p>
</div>
<div
className={` border rounded-md flex justify-center items-center transition-colors duration-300 ease-in-out ${
isBisnisClicked ? "bg-red-500 text-white" : ""
}`}
onClick={handleBisnisClick}
>
<p>Bisnis</p>
</div>
</div>
<div className="transition-opacity duration-300 ease-in-out">
{isIndividuClicked && (
<div className="opacity-100">
<RegistrasiIndividu />
</div>
)}
{isBisnisClicked && (
<div className="opacity-100">
<RegistrasiBisnis />
</div>
)}
</div>
<section className="flex justify-center items-center flex-col">
<div className="text-gray_r-11 mt-4 text-center md:text-left">
Sudah punya akun Indoteknik?{" "}
<Link href="/login" className="inline font-medium text-danger-500">
Masuk
</Link>
</div>
<div className="text-gray_r-11 mt-4 text-center md:text-left">
Akun anda belum aktif?{" "}
<Link href="/register?activation=email" className="inline font-medium text-danger-500">
Aktivasi
</Link>
</div>
</section>
</div>
</section>
<section className="my-10 md:my-0">
<PageContent path="/register" />
</section>
</div>
<AccountActivation />
</div>
);
};
export default Register;
|
