Skip to content

S
seat-booking
Commit 7517ff32 by Syed Abdul Rahman
Options

code refactor done

parent aa5dddd5
Showing with 242 additions and 173 deletions
db.json
......@@ -15,6 +15,14 @@
{
"id": "e770",
"email": "new@gmail.com"
},
{
"id": "5f85",
"email": "test@krds.fr"
},
{
"id": "5647",
"email": "anas@krds.fr"
}
],
"selectedSeats": [
......@@ -75,6 +83,42 @@
"seat": 4
}
]
},
{
"id": "5f85",
"userid": "5f85",
"selected": [
{
"row": 4,
"seat": 7
},
{
"row": 4,
"seat": 8
},
{
"row": 4,
"seat": 5
},
{
"row": 4,
"seat": 6
}
]
},
{
"id": "5647",
"userid": "5647",
"selected": [
{
"row": 7,
"seat": 8
},
{
"row": 7,
"seat": 6
}
]
}
]
}
\ No newline at end of file
src/components/Base/Button/styles.module.css
......@@ -11,7 +11,6 @@
justify-content: center;
font-size: 1rem;
box-sizing: border-box;
/* flex: 1; */
}
.primary {
......
src/components/Base/Input/Index.jsx
import PropTypes from 'prop-types';
import styles from './styles.module.css';
const Input = ({
type = 'text',
name,
value,
onChange,
label,
placeholder = '',
disabled = false,
error = '',
...inputPprops
}) => {
return (
<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} />
)
}
const Input = ({ name, label, error = '', ...inputPprops }) => {
return (
<div className={styles.inputWrapper}>
{label && (
<label htmlFor={name} className={styles.label}>
{label}
</label>
)}
<input
name={name}
id={name}
className={`${styles.input} ${error ? styles.errorInput : ''}`}
{...inputPprops}
/>
{error && <p className={styles.errorText}>{error}</p>}
</div>
);
};
Input.propTypes = {
onChange: PropTypes.func.isRequired,
type: PropTypes.string,
value: PropTypes.string,
placeholder: PropTypes.string
}
onChange: PropTypes.func.isRequired,
type: PropTypes.string,
value: PropTypes.string,
placeholder: PropTypes.string
};
export default Input;
src/components/Base/Legend/Index.jsx
import styles from './styles.module.css';
import PropTypes from 'prop-types';
const Legend = ({ children, type="available" }) => {
const Legend = ({ children, type = 'available' }) => {
return (
<div className={styles['legend-wrapper']}>
<div className={styles[type]}></div>
<div className={styles.title}>{children}</div>
</div>
)
}
);
};
Legend.propTypes = {
// children: PropTypes.node,
type: PropTypes.oneOf(["selected", "reserved", "available"])
}
children: PropTypes.node.isRequired,
type: PropTypes.oneOf(['selected', 'reserved', 'available'])
};
export default Legend;
src/components/Base/Legend/Legend.stories.jsx
import Legend from "./Index"
import Legend from './Index';
export default {
title: "Component/Base/Legend",
tags: ["autodocs"],
component: Legend,
argTypes: {
type: {
control: { type: 'select' },
options: ['available', 'reserved', 'selected'],
description: "Seat's status",
},
},
}
const getStoryTitle = (type) => {
switch (type) {
case 'selected':
return "Selected";
case 'reserved':
return 'Reserved';
case 'available':
return 'Available';
default:
return "Available"
}
}
export const Default = {
args:{
type: "available"
title: 'Component/Base/Legend',
tags: ['autodocs'],
component: Legend,
argTypes: {
type: {
control: { type: 'select' },
options: ['available', 'reserved', 'selected'],
description: "Seat's status"
},
render: (args) => {
return <Legend type={args.type}>{getStoryTitle(args.type)}</Legend>
children: {
control: 'text',
description: 'Content inside the Legent (usually a title)'
}
}
};
const Template = (args) => <Legend {...args} />;
export const Default = Template.bind({});
Default.args = {
type: 'available',
children: 'Available'
};
src/components/Base/Typography/Index.jsx deleted 100644 → 0
import styles from './styles.module.css';
const Typography = ({ children }) => {
return (
<div>{children}</div>
)
}
export default Typography;
\ No newline at end of file
src/components/Base/Typography/Typography.stories.jsx
import Typography from "./Index"
export default {
title: "component/Base/Typography",
tags: ["autodocs"],
component: Typography
}
title: 'component/Base/Typography',
tags: ['autodocs']
};
export const Default = {
render: () => {
return (
<div style={{color: 'white', fontFamily:'Poppins-Medium', fontWeight: "400"}}>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, velit!</p>
</div>
)
}
}
\ No newline at end of file
render: () => {
return (
<div
style={{
color: 'white',
fontFamily: 'Poppins-Medium',
fontWeight: '400'
}}>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate,
velit!
</p>
</div>
);
}
};
src/components/Layout/Header/Index.jsx
......@@ -6,7 +6,7 @@ const Header = ({ children }) => {
<section className={styles['header-wrapper']}>
<div className={styles.title}>{children}</div>
<div className={styles.screenWrapper}>
<svg viewBox="0 20 480 130" xmlns="http://www.w3.org/2000/svg">
{/* <svg viewBox="0 20 480 130" xmlns="http://www.w3.org/2000/svg">
<path
d="M 30 70 Q 240 20 450 70"
stroke="white"
......@@ -60,6 +60,58 @@ const Header = ({ children }) => {
fill="url(#glowColor)"
mask="url(#glowMask)"
/>
</svg> */}
<svg viewBox="0 20 480 130" xmlns="http://www.w3.org/2000/svg">
<path
d="M 30 70 Q 240 20 450 70"
stroke="white"
stroke-width="3"
fill="none"
/>
<defs>
<mask id="glowMask">
<linearGradient
id="fadeGradient"
x1="0"
y1="70"
x2="0"
y2="150"
gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#9c6ad5" stop-opacity="1" />
<stop offset="60%" stop-color="#9c6ad5" stop-opacity="1" />
<stop offset="100%" stop-color="#9c6ad5" stop-opacity="1" />
</linearGradient>
<path
d="
M 30 70
Q 240 20 450 70
L 480 150
L 0 150
Z"
fill="url(#fadeGradient)"
/>
</mask>
<linearGradient
id="glowColor"
x1="0"
y1="100"
x2="0"
y2="150"
gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#9c6ad5" stop-opacity="0.4" />
<stop offset="50%" stop-color="#9c6ad5" stop-opacity="0.2" />
<stop offset="100%" stop-color="#9c6ad5" stop-opacity="0" />
</linearGradient>
</defs>
<path
d="M 30 70 Q 240 20 450 70 L 480 150 L 0 150 Z"
fill="url(#glowColor)"
mask="url(#glowMask)"
/>
</svg>
</div>
</section>
......
src/components/Layout/Header/styles.module.css
......@@ -16,6 +16,20 @@
width: 50%;
min-width: 300px;
}
.clipped-glow {
width: 500px;
height: 150px;
background: linear-gradient(
to bottom,
#9c6ad5 40%,
#9c6ad5aa 20%,
transparent 100%
);
clip-path: path('M 30 70 Q 240 20 450 70 L 500 150 L -20 150 Z');
-webkit-clip-path: path('M 30 70 Q 240 20 450 70 L 500 150 L -20 150 Z');
position: relative;
z-index: 0;
}
@media screen and (min-width: 768px) {
.title {
......@@ -26,7 +40,7 @@
.screenWrapper {
width: 30% !important;
max-width: 30%;
max-width: 20%;
min-width: 400px;
}
......
src/components/Shared/LogoutButton/LogoutButton.stories.jsx 0 → 100644
import img from '../../../assets/images/power-button_12080802.png';
export default {
title: 'component/Shared/LogoutButton'
// tags: ['autodocs']
};
export const Default = {
args: {},
render: () => (
<>
<img src={img} title="logout" width={50} />
</>
)
};
src/components/TopLevel/ConfirmSeatContent/styles.module.css
.btn-wrapper {
display: flex;
gap: 1rem;
/* margin: 1rem 0; */
justify-content: end;
}
......
src/components/TopLevel/LegendWrapper/Index.jsx
import styles from './styles.module.css';
import Legend from '../../Base/Legend/Index'
import Legend from '../../Base/Legend/Index';
const LegendWrapper = (props) => {
const legendData = [
{
id: 1,
label: "Selected",
status: 'selected'
},
{
id: 2,
label: "Reserved",
status: "reserved"
},
{
id: 3,
label: "Available",
status: "available"
}
]
return (
<div className={styles.LegendWrapper}>
{legendData.map((ele) => (
<Legend type={ele.status}>{ele.label}</Legend>
))}
</div>
)
}
return (
<div className={styles.LegendWrapper}>
<Legend type="selected">Selected</Legend>
<Legend type="reserved">Reserved</Legend>
<Legend type="available">Available</Legend>
</div>
);
};
export default LegendWrapper;
src/components/TopLevel/LegendWrapper/styles.module.css
.LegendWrapper {
display: flex;
background-color: #3444c5;
/* height: 70px; */
/* position: fixed; */
right: 0;
left: 0;
bottom: 0;
gap: 1rem;
justify-content: center;
padding: 1em 0;
/* border: 2px solid red */
}
@media screen and (min-width: 768px) {
......
src/components/TopLevel/Login/Index.jsx
......@@ -20,7 +20,7 @@ const Login = ({ onSubmit }) => {
Login with email and passoword to book seats.
</div>
</div>
<form className={styles.formWrapper} onSubmit={(e) => handleSubmit(e)}>
<form className={styles.formWrapper} onSubmit={handleSubmit}>
<Input
label="Email"
name="email"
......
src/components/TopLevel/Login/styles.module.css
......@@ -11,21 +11,6 @@
background-color: #3444c5;
}
/* .bg::before {
content: "";
position: absolute;
inset: 0;
background-image: url('/src/assets/images/background.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: blur(3px);
z-index: -1;
height: 100%;
height: 100vh;
width: 100%;
} */
.container {
box-sizing: border-box;
position: relative;
......
src/components/TopLevel/SeatSelectionContent/Index.jsx
......@@ -3,8 +3,20 @@ import Button from '../../Base/Button/Index';
import Modal from '../../Shared/Modal/Index';
import styles from './styles.module.css';
import PropTypes from 'prop-types';
import { useState } from 'react';
const Index = ({ onChange, onConfirm, disabled }) => {
const [isDisabled, setIsDisabled] = useState(true);
const handleInputChange = (e) => {
onChange(e.target.value);
if (e.target.value) {
setIsDisabled(false);
} else {
setIsDisabled(true);
}
};
return (
<Modal>
<h2 className={styles['modal-title']}>Select Your Seats</h2>
......@@ -17,10 +29,10 @@ const Index = ({ onChange, onConfirm, disabled }) => {
type="number"
max="10"
min="1"
onChange={(e) => onChange(e.target.value)}
onChange={handleInputChange}
/>
<div className={`${styles['btn-wrapper']} ${styles['flex-direction']}`}>
<Button size={'md'} onClick={onConfirm} disabled={disabled}>
<Button size={'md'} onClick={onConfirm} disabled={isDisabled}>
Confirm
</Button>
</div>
......
src/components/TopLevel/SeatSelectionContent/styles.module.css
.btn-wrapper {
display: flex;
/* justify-content: flex-end; */
flex-direction: column;
gap: 1rem;
margin: 1rem 0;
......
src/components/TopLevel/SuccessModal/Index.jsx
......@@ -19,7 +19,7 @@ const SuccessModal = ({ onConfirm }) => {
<Modal>
<div className={styles['content-wrapper']}>
<div className={styles['btn-wrapper']}>
{showMessage && <p>Booked Successfully</p>}
{showMessage && <h3>Booked Successfully</h3>}
</div>
<Lottie
className={styles.lottieSvg}
......@@ -27,11 +27,13 @@ const SuccessModal = ({ onConfirm }) => {
loop={false}
autoplay={true}
/>
<div className={styles['btn-wrapper']}>
<Button size={'md'} onClick={onConfirm}>
Go Back
</Button>
</div>
{showMessage && (
<div className={styles['btn-wrapper']}>
<Button size={'md'} onClick={onConfirm}>
Edit Seats
</Button>
</div>
)}
</div>
</Modal>
);
......
src/components/TopLevel/SuccessModal/styles.module.css
.content-wrapper {
height: 300px;
max-height: 300px;
box-sizing: border-box;
padding: 1rem;
}
.btn-wrapper {
display: flex;
......@@ -7,5 +9,10 @@
}
.lottieSvg {
width: 100%;
height: 60%;
height: 200px;
}
.btn-wrapper h3 {
margin: 0;
font-family: 'Poppins-Medium';
}
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