Skip to content

Commit 71b2650

Browse files
MeetBagdaMeetBagda
committed
add: signin page added with responsiveness
1 parent f41b7a1 commit 71b2650

File tree

5 files changed

+166
-6
lines changed

5 files changed

+166
-6
lines changed

‎src/App.jsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import "./App.css";
22
import ContentContainer from "./components/ContentContainer";
3+
import Signin from "./components/Signin";
34
import Layout from "./Layout";
45

56
function App() {
67
return (
78
<div>
8-
<Layout>
9+
<Signin/>
10+
{/* <Layout>
911
<ContentContainer/>
10-
</Layout>
12+
</Layout> */}
1113

1214
</div>
1315
);

‎src/Layout.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import Sidebar from './components/Sidebar';
33

44
const Layout = ({ children }) => {
55
return (
6-
<div className="flex h-screen">
6+
<div className="flex xl:h-screen">
77
<Sidebar />
8-
<div className="flex-1 p-4 bg-gray-100">
8+
<div className="xl:flex-1 xl:p-4 bg-gray-100">
99
{children}
1010
</div>
1111
</div>

‎src/assets/card.png

59.5 KB
Loading

‎src/components/Button.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React from 'react';
22

3-
const Button = ({ children, onClick, className }) => {
3+
const Button = ({ children, onClick, className, isActive }) => {
44
return (
55
<button
66
onClick={onClick}
7-
className={`flex items-center p-2 rounded-lg focus:bg-blue-600 focus:text-white ${className}`}
7+
className={`flex items-center p-2 rounded-lg focus:bg-blue-600 focus:text-white ${isActive ? 'bg-blue-600 text-white' : 'bg-gray-100 '} ${className}`}
88
>
99
{children}
1010
</button>

‎src/components/Signin.jsx

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
import React, { useState } from "react";
2+
import Button from "./Button";
3+
4+
const Signin = () => {
5+
const [activeButton, setActiveButton] = useState("SAAS");
6+
7+
const handleButtonClick = (buttonName) => {
8+
setActiveButton(buttonName);
9+
};
10+
11+
return (
12+
<div className="bg-gray-100 grid grid-cols-1 md:grid-cols-2 h-screen w-full">
13+
<div className="hidden bg-white md:flex justify-center items-center">
14+
<img
15+
src="./src/assets/card.png"
16+
alt=""
17+
className="w-1/2 h-auto hidden md:block" // `hidden md:block` makes it initially hidden then block on medium screens and up
18+
/>
19+
</div>
20+
<div className=" p-5 m-auto flex flex-col justify-center items-center">
21+
<div className="bg-white w-full border border-slate-300 p-8 rounded-lg">
22+
<div className="p-4 flex text-bold text-2xl uppercase justify-center items-center gap-3">
23+
<img
24+
src="./src/assets/codeant_ai_logo.jpg"
25+
alt="Logo"
26+
className="h-12"
27+
/>
28+
<span>Codeant ai</span>
29+
</div>
30+
<div className="font-bold text-2xl">Welcome to the codeant ai</div>
31+
<div className="w-full flex flex-row justify-center items-center mt-4">
32+
<Button
33+
onClick={() => handleButtonClick("SAAS")}
34+
isActive={activeButton === "SAAS"}
35+
className="w-full font-bold "
36+
>
37+
SAAS
38+
</Button>
39+
<Button
40+
onClick={() => handleButtonClick("Self Hosted")}
41+
isActive={activeButton === "Self Hosted"}
42+
className="w-full font-bold"
43+
>
44+
Self Hosted
45+
</Button>
46+
</div>
47+
<hr />
48+
{activeButton === "SAAS" && (
49+
<div>
50+
<Button className="bg-white text-black font-semibold border border-slate-300 w-full mt-4 flex flex-row justify-center gap-2 items-center">
51+
<svg
52+
xmlns="http://www.w3.org/2000/svg"
53+
x="0px"
54+
y="0px"
55+
width="30"
56+
height="30"
57+
viewBox="0 0 30 30"
58+
>
59+
<path d="M15,3C8.373,3,3,8.373,3,15c0,5.623,3.872,10.328,9.092,11.63C12.036,26.468,12,26.28,12,26.047v-2.051 c-0.487,0-1.303,0-1.508,0c-0.821,0-1.551-0.353-1.905-1.009c-0.393-0.729-0.461-1.844-1.435-2.526 c-0.289-0.227-0.069-0.486,0.264-0.451c0.615,0.174,1.125,0.596,1.605,1.222c0.478,0.627,0.703,0.769,1.596,0.769 c0.433,0,1.081-0.025,1.691-0.121c0.328-0.833,0.895-1.6,1.588-1.962c-3.996-0.411-5.903-2.399-5.903-5.098 c0-1.162,0.495-2.286,1.336-3.233C9.053,10.647,8.706,8.73,9.435,8c1.798,0,2.885,1.166,3.146,1.481C13.477,9.174,14.461,9,15.495,9 c1.036,0,2.024,0.174,2.922,0.483C18.675,9.17,19.763,8,21.565,8c0.732,0.731,0.381,2.656,0.102,3.594 c0.836,0.945,1.328,2.066,1.328,3.226c0,2.697-1.904,4.684-5.894,5.097C18.199,20.49,19,22.1,19,23.313v2.734 c0,0.104-0.023,0.179-0.035,0.268C23.641,24.676,27,20.236,27,15C27,8.373,21.627,3,15,3z"></path>
60+
</svg>
61+
Sign in with Github
62+
</Button>
63+
<Button className="bg-white text-black font-semibold border border-slate-300 w-full mt-4 flex flex-row justify-center gap-2 items-center">
64+
<svg
65+
xmlns="http://www.w3.org/2000/svg"
66+
x="0px"
67+
y="0px"
68+
width="30"
69+
height="30"
70+
viewBox="0 0 48 48"
71+
>
72+
<path
73+
fill="#2196F3"
74+
d="M36,32.7L35,39c0,2.2-5.1,4-11,4s-11-1.8-11-4l-1-6.3c-0.1-0.4,0.3-0.8,0.8-0.6C15.8,33.4,20,34,24,34s8.2-0.6,11.2-1.9C35.6,31.9,36.1,32.3,36,32.7z M41,10c0,0.2,0,0.3-0.1,0.5L38,27c0,2.8-6.2,5-13.9,5C16.4,32,10,29.8,10,27L7.1,10.5C7,10.3,7,10.2,7,10c0-2.8,7.6-5,17-5S41,7.2,41,10z M29,23c0-2.8-2.2-5-5-5s-5,2.2-5,5s2.2,5,5,5S29,25.8,29,23z M35.8,10c0-1.7-5.3-3-11.8-3s-11.8,1.3-11.8,3s5.3,3,11.8,3S35.8,11.7,35.8,10z M24,25c1.1,0,2-0.9,2-2s-0.9-2-2-2s-2,0.9-2,2S22.9,25,24,25z"
75+
></path>
76+
</svg>
77+
Sign in with Bitbucket
78+
</Button>
79+
<Button className="bg-white text-black font-semibold border border-slate-300 w-full mt-4 flex flex-row justify-center gap-2 items-center">
80+
<svg
81+
xmlns="http://www.w3.org/2000/svg"
82+
x="0px"
83+
y="0px"
84+
width="30"
85+
height="30"
86+
viewBox="0 0 48 48"
87+
>
88+
<path
89+
fill="#035bda"
90+
d="M46 40L29.317 10.852 22.808 23.96 34.267 37.24 13 39.655zM13.092 18.182L2 36.896 11.442 35.947 28.033 5.678z"
91+
></path>
92+
</svg>
93+
Sign in with Azure Devops
94+
</Button>
95+
<Button className="bg-white text-black font-semibold border border-slate-300 w-full mt-4 flex flex-row justify-center gap-2 items-center">
96+
<svg
97+
xmlns="http://www.w3.org/2000/svg"
98+
x="0px"
99+
y="0px"
100+
width="30"
101+
height="30"
102+
viewBox="0 0 48 48"
103+
>
104+
<path fill="#e53935" d="M24 43L16 20 32 20z"></path>
105+
<path fill="#ff7043" d="M24 43L42 20 32 20z"></path>
106+
<path fill="#e53935" d="M37 5L42 20 32 20z"></path>
107+
<path fill="#ffa726" d="M24 43L42 20 45 28z"></path>
108+
<path fill="#ff7043" d="M24 43L6 20 16 20z"></path>
109+
<path fill="#e53935" d="M11 5L6 20 16 20z"></path>
110+
<path fill="#ffa726" d="M24 43L6 20 3 28z"></path>
111+
</svg>
112+
Sign in with Gitlab
113+
</Button>
114+
</div>
115+
)}
116+
{activeButton === "Self Hosted" && (
117+
<div>
118+
<Button className="bg-white text-black font-semibold border border-slate-300 w-full mt-4 flex flex-row justify-center gap-2 items-center">
119+
<svg
120+
xmlns="http://www.w3.org/2000/svg"
121+
x="0px"
122+
y="0px"
123+
width="30"
124+
height="30"
125+
viewBox="0 0 48 48"
126+
>
127+
<path fill="#e53935" d="M24 43L16 20 32 20z"></path>
128+
<path fill="#ff7043" d="M24 43L42 20 32 20z"></path>
129+
<path fill="#e53935" d="M37 5L42 20 32 20z"></path>
130+
<path fill="#ffa726" d="M24 43L42 20 45 28z"></path>
131+
<path fill="#ff7043" d="M24 43L6 20 16 20z"></path>
132+
<path fill="#e53935" d="M11 5L6 20 16 20z"></path>
133+
<path fill="#ffa726" d="M24 43L6 20 3 28z"></path>
134+
</svg>
135+
Sign in with Gitlab
136+
</Button>
137+
<Button className="bg-white text-black font-semibold border border-slate-300 w-full mt-4 flex flex-row justify-center gap-2 items-center">
138+
<svg
139+
xmlns="http://www.w3.org/2000/svg"
140+
x="0px"
141+
y="0px"
142+
width="30"
143+
height="30"
144+
viewBox="0 0 48 48"
145+
>
146+
<path d="M 30 5 C 22.838262 5 17 10.838262 17 18 C 17 18.882345 17.182742 19.703331 17.351562 20.527344 L 5.4394531 32.439453 A 1.50015 1.50015 0 0 0 5 33.5 L 5 41.5 A 1.50015 1.50015 0 0 0 6.5 43 L 14.5 43 A 1.50015 1.50015 0 0 0 16 41.5 L 16 39 L 19.5 39 A 1.50015 1.50015 0 0 0 21 37.5 L 21 34 L 24.5 34 A 1.50015 1.50015 0 0 0 26 32.5 L 26 30.294922 C 27.271145 30.709396 28.595703 31 30 31 C 37.161738 31 43 25.161738 43 18 C 43 10.838262 37.161738 5 30 5 z M 30 8 C 35.540262 8 40 12.459738 40 18 C 40 23.540262 35.540262 28 30 28 C 28.262518 28 26.639202 27.56058 25.21875 26.785156 A 1.50015 1.50015 0 0 0 23 28.101562 L 23 31 L 19.5 31 A 1.50015 1.50015 0 0 0 18 32.5 L 18 36 L 14.5 36 A 1.50015 1.50015 0 0 0 13 37.5 L 13 40 L 8 40 L 8 34.121094 L 19.988281 22.132812 A 1.50015 1.50015 0 0 0 20.373047 20.669922 C 20.133878 19.809089 20 18.919659 20 18 C 20 12.459738 24.459738 8 30 8 z M 32 13 A 3 3 0 0 0 32 19 A 3 3 0 0 0 32 13 z"></path>
147+
</svg>
148+
Sign in with SSO
149+
</Button>
150+
</div>
151+
)}
152+
</div>
153+
</div>
154+
</div>
155+
);
156+
};
157+
158+
export default Signin;

0 commit comments

Comments
 (0)