Skip to content

S
seat-booking
Commit b695a147 by Syed Abdul Rahman
Options

login screen design completed

parent f86b4fe6
Showing with 348 additions and 126 deletions
.storybook/preview.js
/** @type { import('@storybook/react-vite').Preview } */ /** @type { import('@storybook/react-vite').Preview } */
import '../src/assets/fonts.css' import '../src/assets/fonts.css'
const preview = { const preview = {
parameters: { parameters: {
backgrounds: { backgrounds: {
...@@ -10,8 +11,8 @@ const preview = { ...@@ -10,8 +11,8 @@ const preview = {
}, },
controls: { controls: {
matchers: { matchers: {
color: /(background|color)$/i, color: /(background|color)$/i,
date: /Date$/i, date: /Date$/i,
}, },
}, },
......
package-lock.json
...@@ -9,7 +9,8 @@ ...@@ -9,7 +9,8 @@
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"react": "^19.1.0", "react": "^19.1.0",
"react-dom": "^19.1.0" "react-dom": "^19.1.0",
"react-router-dom": "^7.6.2"
}, },
"devDependencies": { "devDependencies": {
"@chromatic-com/storybook": "^4.0.0", "@chromatic-com/storybook": "^4.0.0",
...@@ -2792,6 +2793,15 @@ ...@@ -2792,6 +2793,15 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/cookie": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
"integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
"license": "MIT",
"engines": {
"node": ">=18"
}
},
"node_modules/cross-spawn": { "node_modules/cross-spawn": {
"version": "7.0.6", "version": "7.0.6",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
...@@ -4551,6 +4561,44 @@ ...@@ -4551,6 +4561,44 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/react-router": {
"version": "7.6.2",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.2.tgz",
"integrity": "sha512-U7Nv3y+bMimgWjhlT5CRdzHPu2/KVmqPwKUCChW8en5P3znxUqwlYFlbmyj8Rgp1SF6zs5X4+77kBVknkg6a0w==",
"license": "MIT",
"dependencies": {
"cookie": "^1.0.1",
"set-cookie-parser": "^2.6.0"
},
"engines": {
"node": ">=20.0.0"
},
"peerDependencies": {
"react": ">=18",
"react-dom": ">=18"
},
"peerDependenciesMeta": {
"react-dom": {
"optional": true
}
}
},
"node_modules/react-router-dom": {
"version": "7.6.2",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.6.2.tgz",
"integrity": "sha512-Q8zb6VlTbdYKK5JJBLQEN06oTUa/RAbG/oQS1auK1I0TbJOXktqm+QENEVJU6QvWynlXPRBXI3fiOQcSEA78rA==",
"license": "MIT",
"dependencies": {
"react-router": "7.6.2"
},
"engines": {
"node": ">=20.0.0"
},
"peerDependencies": {
"react": ">=18",
"react-dom": ">=18"
}
},
"node_modules/recast": { "node_modules/recast": {
"version": "0.23.11", "version": "0.23.11",
"resolved": "https://registry.npmjs.org/recast/-/recast-0.23.11.tgz", "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.11.tgz",
...@@ -4717,6 +4765,12 @@ ...@@ -4717,6 +4765,12 @@
"semver": "bin/semver.js" "semver": "bin/semver.js"
} }
}, },
"node_modules/set-cookie-parser": {
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
"integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
"license": "MIT"
},
"node_modules/shebang-command": { "node_modules/shebang-command": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
......
package.json
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"version": "0.0.0", "version": "0.0.0",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite --host",
"build": "vite build", "build": "vite build",
"lint": "eslint .", "lint": "eslint .",
"preview": "vite preview", "preview": "vite preview",
...@@ -13,7 +13,8 @@ ...@@ -13,7 +13,8 @@
}, },
"dependencies": { "dependencies": {
"react": "^19.1.0", "react": "^19.1.0",
"react-dom": "^19.1.0" "react-dom": "^19.1.0",
"react-router-dom": "^7.6.2"
}, },
"devDependencies": { "devDependencies": {
"@chromatic-com/storybook": "^4.0.0", "@chromatic-com/storybook": "^4.0.0",
......
src/App.jsx
import './App.css' import './App.css'
import Button from './components/Base/Button/Index'; import Navigates from './Navigates'
import Login from './components/TopLevel/Login/Index'
function App() { function App() {
return ( return (
<> <div style={{ height: "100%" }}>
<h3> Booking APP</h3> <Navigates />
<Button>Confirm</Button> </div>
<Login />
</>
) )
} }
......
src/Navigates.jsx 0 → 100644
import { Routes, Route } from "react-router-dom";
import Login from "./components/TopLevel/Login/Index";
import SeatBooking from "./components/TopLevel/SeatBooking/Index";
const Navigates = () => {
return (
<Routes>
<Route path="" element={<Login />} />
<Route path="/seat-booking" element={<SeatBooking />} />
</Routes>
)
}
export default Navigates
\ No newline at end of file
src/assets/fonts.css
...@@ -10,4 +10,9 @@ ...@@ -10,4 +10,9 @@
@font-face { @font-face {
font-family: 'Pacifico'; font-family: 'Pacifico';
src: url('../assets/fonts/Pacifico-Regular.ttf'); src: url('../assets/fonts/Pacifico-Regular.ttf');
}
@font-face {
font-family: 'Inter-Medium';
src: url('../assets/fonts/Inter_28pt-MediumItalic.ttf');
} }
\ No newline at end of file
src/components/Base/Button/styles.module.css
...@@ -3,29 +3,36 @@ ...@@ -3,29 +3,36 @@
outline: none; outline: none;
background-color: white; background-color: white;
color: black; color: black;
border-radius: 5px; border-radius: 10px;
font-family: 'Poppins-Bold'; font-family: 'Poppins-Bold';
cursor: pointer; cursor: pointer;
text-overflow: ellipsis;
white-space: wrap;
display: flex; display: flex;
gap: 1rem; gap: 1rem;
align-items: center; align-items: center;
justify-content: center;
font-size: clamp(1rem, 2vw, 1.5rem);
} }
.sm { .sm {
padding: 0.5rem 1.5rem; padding: 0.5rem 1.5rem;
font-size: 12px; font-size: 12px;
font-size: clamp(0.5rem, 2vw, 1rem);
} }
.md { .md {
padding: 0.5rem 2rem; padding: 0.7rem 3rem;
font-size: 16px; font-size: 16px;
font-size: clamp(1rem, 2vw, 1.5rem);
} }
.lg { .lg {
padding: 0.9rem 2.5rem; padding: 0.9rem 2.5rem;
font-size: 20px; font-size: 20px;
font-size: clamp(1.5rem, 2vw, 2rem);
} }
......
src/components/Base/Input/Index.jsx
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styles from './styles.module.css'; import styles from './styles.module.css';
const Input = ({ ...inputPprops }) => {
const Input = ({
type = 'text',
name,
value,
onChange,
label,
placeholder = '',
disabled = false,
error = '',
...inputPprops
}) => {
return ( return (
<input className={styles.input} {...inputPprops} /> <div className={styles.inputWrapper}>
{label && <label htmlFor={name} className={styles.label}>{label}</label>}
<input
type={type}
name={name}
id={name}
value={value}
placeholder={placeholder}
onChange={onChange}
disabled={disabled}
className={`${styles.input} ${error ? styles.errorInput : ''}`}
{...inputPprops}
/>
{error && <p className={styles.errorText}>{error}</p>}
</div>
// <input className={styles.input} {...inputPprops} />
) )
} }
export default Input;
Input.propTypes = { Input.propTypes = {
onChange: PropTypes.func.isRequired, onChange: PropTypes.func.isRequired,
type: PropTypes.string, type: PropTypes.string,
value: PropTypes.string, value: PropTypes.string,
placeholder: PropTypes.string placeholder: PropTypes.string
} }
\ No newline at end of file
export default Input;
src/components/Base/Input/styles.module.css
.input{ .inputWrapper {
border-color: aqua; display: flex;
outline: none; flex-direction: column;
padding: 0.5rem 1rem; gap: 1rem;
border-radius: 10px; }
.label {
font-family: 'Inter-Medium';
font-size: clamp(1rem, 2vw, 1.5rem);
}
.input {
outline: none;
padding: 3% 5%;
border-radius: 5px;
width: 90%;
font-family: 'Inter-Medium';
color: #000000db;
font-size: clamp(1rem, 2vw, 1.5rem);
} }
\ No newline at end of file
src/components/Layout/BookingWrapper/Index.jsx
import styles from './styles.module.css'; import styles from './styles.module.css';
import Seat from './Seat'; import Seat from './Seat';
const BookingWrapper = ({onSeatClick}) => { const BookingWrapper = ({ onSeatClick }) => {
const aisleIndex = 5; const aisleIndex = 5;
const seatData = [ const seatData = [
{ id: 1, status: 'available' }, { id: 0, status: 'aisle' },
{ id: 2, status: 'reserved' }, { id: 1, status: 'reserved' },
{ id: 3, status: 'available' }, { id: 2, status: 'available' },
{ id: 4, status: 'reserved' }, { id: 3, status: 'reserved' },
{ id: 5, status: 'available' }, { id: 4, status: 'available' },
{ id: 6, status: 'selected' }, { id: 0, status: 'aisle' },
{ id: 7, status: 'available' }, { id: 5, status: 'available' },
{ id: 8, status: 'reserved' }, { id: 6, status: 'reserved' },
{ id: 9, status: 'available' }, { id: 7, status: 'available' },
{ id: 10, status: 'reserved' }, { id: 8, status: 'reserved' },
{ id: 11, status: 'available' } { id: 9, status: 'available' },
]; ];
const isLeftBlock = (col) => col < aisleIndex; const isLeftBlock = (col) => col < aisleIndex;
const isRightBlock = (col) => col > aisleIndex; const isRightBlock = (col) => col > aisleIndex;
// const onSeatClick = (id) => {
// console.log(id, "<<<<=============")
// }
return (
<div>
<div className={styles['theatre']}>
{Array.from({ length: 6 }, (_, row_index) => (
<div className={styles['seat-row']}>
{seatData.map((ele, column_index) => {
const isFirstRow = row_index === 0;
const isLastRow = row_index === 6 - 1;
if (isLeftBlock(column_index) && column_index === 0 && (isFirstRow || isLastRow)) {
return <div key={`gap-left-${row_index}-${column_index}`} className={styles["seat-gap"]} />;
}
if ( return (
isRightBlock(column_index) && <div>
column_index === seatData.length - 1 && <div className={styles['theatre']}>
(isFirstRow || isLastRow) {Array.from({ length: 2 }, (_, row_index) => (
) { <div className={styles['seat-row']}>
return <div key={`gap-right-${row_index}-${row_index}`} className={styles["seat-gap"]} />; {seatData.map((ele, column_index) => {
} const isFirstRow = row_index === 0;
const isLastRow = row_index === 2 - 1;
if (column_index == aisleIndex) { if (isLeftBlock(column_index) && column_index === 0 && (isFirstRow || isLastRow)) {
return ( // return <div key={`gap-left-${row_index}-${column_index}`} className={styles["seat-gap"]} />;
<div className={styles['aisle']}></div> return <div className={styles['aisle']}></div>;
) }
}
if (
isRightBlock(column_index) &&
column_index === seatData.length - 1 &&
(isFirstRow || isLastRow)
) {
// return <div key={`gap-right-${row_index}-${row_index}`} className={styles["seat-gap"]} />;
return <div className={styles['aisle']}></div>;
}
if (column_index == aisleIndex) {
return ( return (
// <div className={`${styles.seat} ${styles[ele.status]}`}></div> <div className={styles['aisle']}></div>
<Seat status={ele.status} onClick={()=>onSeatClick(ele.id)} />
) )
})} }
</div> return (
))} <Seat status={ele.status} id={ele.id} onClick={() => onSeatClick(ele.id)} />
</div> )
})}
</div>
))}
</div> </div>
) </div>
} )
}
export default BookingWrapper; export default BookingWrapper;
src/components/Layout/BookingWrapper/Seat.jsx
...@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; ...@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
const Seat = ({ id,status, ...rest }) => { const Seat = ({ id,status, ...rest }) => {
return ( return (
<div {...rest} className={` ${styles[status]} ${styles.seat} `}></div> <div {...rest} className={` ${styles[status]} ${styles.seat} `}>{id}</div>
) )
} }
......
src/components/Layout/BookingWrapper/styles.module.css
...@@ -54,8 +54,8 @@ ...@@ -54,8 +54,8 @@
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.seat { .seat {
width: 30px; width: 40px;
height: 30px; height: 40px;
} }
.aisle { .aisle {
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
.seat-gap { .seat-gap {
width: 40px; width: 40px;
height: 30px; height: 40px;
} }
......
src/components/Layout/Header/Index.jsx
...@@ -8,16 +8,14 @@ const Header = ({ children }) => { ...@@ -8,16 +8,14 @@ const Header = ({ children }) => {
<div className={styles.title}> <div className={styles.title}>
{children} {children}
</div> </div>
<div style={{width: '60%'}}> <div className={styles.screenWrapper}>
<svg viewBox="0 0 480 260" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="0 0 480 260" xmlns="http://www.w3.org/2000/svg">
<path d="M 30 70 Q 240 20 450 70" stroke="white" stroke-width="5" fill="none" /> <path d="M 30 70 Q 240 20 450 70" stroke="white" stroke-width="5" fill="none" />
<defs> <defs>
<linearGradient id="glowGradient" x1="0" y1="70" x2="0" y2="180" gradientUnits="userSpaceOnUse"> <linearGradient id="glowGradient" x1="0" y1="70" x2="0" y2="180" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#addfff" stop-opacity="0.15" /> <stop offset="0%" stop-color="#addfff" stop-opacity="0.15" />
<stop offset="100%" stop-color="#addfff" stop-opacity="0" /> <stop offset="100%" stop-color="#addfff" stop-opacity="0" />
</linearGradient> </linearGradient>
<clipPath id="glowClip"> <clipPath id="glowClip">
<path d=" <path d="
M 30 70 M 30 70
...@@ -27,7 +25,6 @@ const Header = ({ children }) => { ...@@ -27,7 +25,6 @@ const Header = ({ children }) => {
Z" /> Z" />
</clipPath> </clipPath>
</defs> </defs>
<rect x="0" y="0" width="480" height="260" <rect x="0" y="0" width="480" height="260"
fill="url(#glowGradient)" fill="url(#glowGradient)"
clip-path="url(#glowClip)" /> clip-path="url(#glowClip)" />
......
src/components/Layout/Header/styles.module.css
.title{ .header-wrapper {
display: flex;
flex-direction: column;
align-items: center;
/* justify-content: center; */
width: 100%;
/* outline: 2px solid red; */
}
.title {
font-family: 'Poppins-Bold'; font-family: 'Poppins-Bold';
color: white; color: white;
font-size: 24px; font-size: 24px;
} }
.header-wrapper{ .screenWrapper {
display: flex; width: 50%;
flex-direction: column;
align-items: center;
justify-content: center;
/* gap: 0.5rem; */
} }
\ No newline at end of file
src/components/TopLevel/Login/Index.jsx
import styles from './styles.module.css' import styles from './styles.module.css';
import img from '../../../assets/images/background.png' import Input from '../../Base/Input/Index'
import Button from '../../Base/Button/Index';
import { useNavigate } from 'react-router-dom';
const Login = () => { const Login = () => {
const navigate = useNavigate();
const handleSubmit = (e) => {
e.preventDefault();
navigate("/seat-booking")
}
return ( return (
<div className={styles.bg}> <div className={styles.bg}>
<section className={styles.container}> <section className={styles.container}>
<form action="/login" method="POST"> <div className={styles.contentWrapper}>
<div className={styles.title}>Login</div> <div className={styles.title}>Welcome Back!</div>
<label for="username">Username:</label><br /> <div className={styles.desc}>Login with email and passoword to book seats.</div>
<input type="text" id="username" name="username" /><br /><br /> </div>
<form className={styles.formWrapper} onSubmit={handleSubmit}>
<label for="password">Password:</label><br /> <Input
<input type="password" id="password" name="password" /><br /><br /> label="Email"
name="email"
<button type="submit">Confirm</button> type="email"
/>
{/* <br /> */}
<Input
label="Password"
name="email"
type="password"
/>
<Button size={"md"}>Confirm</Button>
</form> </form>
</section> </section>
</div> </div>
......
src/components/TopLevel/Login/Login.stories.jsx
import Login from './Index'; import Login from './Index';
import { MemoryRouter } from 'react-router-dom';
export default { export default {
title: "component/TopLevel/login", title: "component/TopLevel/login",
tags: ["autodocs"], tags: ["autodocs"],
decorators: [
(Story) => (
<MemoryRouter>
<Story />
</MemoryRouter>
),
],
component: Login component: Login
} }
export const Screen = { export const Screen = {
} }
\ No newline at end of file
src/components/TopLevel/Login/styles.module.css
.bg { .bg {
position: relative; position: relative;
width: 100%; width: 100%;
height: 95vh; height: 100%;
overflow: hidden; overflow-y: auto;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-family: 'Segoe UI', sans-serif; font-family: 'Segoe UI', sans-serif;
height: 100vh;
background-color: #3444c5;
} }
.bg::before { /* .bg::before {
content: ""; content: "";
position: absolute; position: absolute;
inset: 0; inset: 0;
background-image: url('/src/assets/images/background.png'); /* Make sure path is correct */ background-image: url('/src/assets/images/background.png');
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
filter: blur(3px); filter: blur(3px);
z-index: -1; z-index: -1;
} height: 100%;
height: 100vh;
width: 100%;
} */
.container { .container {
position: relative; position: relative;
background-color: rgb(4, 3, 57); background-color: rgba(0, 0, 0, 0.6);
border-radius: 10px; border-radius: 10px;
height: 70vh; padding: 3% 5% ;
padding: 1rem 3rem; max-height: 70%;
max-width: 70%;
min-height: max(550px, 30vh);
box-sizing: border-box; box-sizing: border-box;
width: 30vw;
z-index: 1; z-index: 1;
color: white; color: white;
backdrop-filter: blur(10px);
border: 1px solid #3444c5;
box-shadow: 0 0 12px 10px rgba(52, 68, 197, 0.4);
box-sizing: border-box;
}
.contentWrapper{
padding-bottom: 2rem;
}
.formWrapper{
display: flex;
flex-direction: column;
gap: 2rem;
}
.title {
font-family: 'Inter-Medium';
font-size: clamp(1rem,2vw,3rem);
color: #f1f1f1c4;
padding: 1% 0;
}
.desc {
font-family: 'Inter-Medium';
font-size: 16px;
color: #bdbcbc97;
font-size: clamp(0.5rem,3vw,1.5rem);
padding: 1% 0;
} }
.title{ .inputStyle {
font-family: 'Pacifico'; width: 90%;
font-size: 26px;
} }
\ No newline at end of file
src/components/TopLevel/SeatBooking/Index.jsx 0 → 100644
import BookingWrapper from '../../Layout/BookingWrapper/Index';
import Header from '../../Layout/Header/Index'
import styles from './styles.module.css';
import Button from '../../Base/Button/Index'
const SeatBooking = () => {
return (
<div className={styles['seat-booking-wrapper']}>
<Header>Choose Seats</Header>
<BookingWrapper />
<div className={styles['btn-wrapper']}>
<Button size={"md"}>Confirm</Button>
</div>
</div>
)
}
export default SeatBooking
\ No newline at end of file
src/components/TopLevel/SeatBooking/styles.module.css 0 → 100644
.seat-booking-wrapper{
background-color: #3444c5;
height: 100%;
width: 100%;
padding: 2rem;
box-sizing: border-box;
/* display: flex; */
flex-direction: column;
align-items: center;
gap: 2rem;
/* overflow-y: auto; */
}
.btn-wrapper{
display: flex;
justify-content: center;
align-items: center;
}
\ No newline at end of file
src/main.jsx
...@@ -2,9 +2,11 @@ import { StrictMode } from 'react' ...@@ -2,9 +2,11 @@ import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client' import { createRoot } from 'react-dom/client'
import './index.css' import './index.css'
import App from './App.jsx' import App from './App.jsx'
import { BrowserRouter } from 'react-router-dom'
createRoot(document.getElementById('root')).render( createRoot(document.getElementById('root')).render(
<StrictMode> <StrictMode>
<App /> <BrowserRouter>
<App />
</BrowserRouter>
</StrictMode>, </StrictMode>,
) )
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment