Skip to content

S
seat-booking
Commit 7a726c25 by Syed Abdul Rahman
Options

Implemented components in storybook

parent 58c584aa
Showing with 600 additions and 70 deletions
src/components/Base/Button/styles.module.css
......@@ -4,14 +4,15 @@
background-color: white;
color: black;
border-radius: 10px;
font-family: 'Poppins-Bold';
font-family: 'Poppins-Medium';
font-weight: 500;
cursor: pointer;
display: flex;
gap: 1rem;
align-items: center;
justify-content: center;
font-size: clamp(1rem, 2vw, 1.5rem);
font-size: 1rem;
box-sizing: border-box;
}
.button:hover{
......@@ -21,22 +22,19 @@
.sm {
padding: 0.5rem 1.5rem;
font-size: 12px;
font-size: clamp(0.5rem, 2vw, 1rem);
font-size: 15px;
}
.md {
padding: 0.7rem 1.5rem;
font-size: 16px;
font-size: clamp(1rem, 2vw, 1.5rem);
font-size: 18px;
}
.lg {
padding: 0.9rem 2.5rem;
font-size: 20px;
font-size: clamp(1.5rem, 2vw, 2rem);
font-size: 22px;
}
......
src/components/Base/Input/styles.module.css
.inputWrapper {
display: flex;
flex-direction: column;
gap: 1rem;
gap: .5rem;
}
.label {
font-family: 'Inter-Medium';
font-size: clamp(0.8rem, 2vw, 1rem);
font-size: 1rem;
}
.input {
outline: none;
padding: 2% 2%;
padding: 0.8em;
border-radius: 5px;
width: 95%;
width: 93%;
font-family: 'Inter-Medium';
color: #000000db;
font-size: clamp(0.8rem, 2vw, 1rem);
font-size: 16px;
border: none;
outline: none;
}
\ No newline at end of file
src/components/Base/Typography/Index.jsx 0 → 100644
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 0 → 100644
import Typography from "./Index"
export default {
title: "component/Base/Typography",
tags: ["autodocs"],
component: Typography
}
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
src/components/Base/Typography/styles.module.css 0 → 100644
h1,h2,h3,h4,h5,h6,p{
font-weight: 400;
}
\ No newline at end of file
src/components/Layout/BookingWrapper/styles.module.css
.seat {
width: 1.2em;
height: 1.2em;
width: 1.5em;
height: 1.7em;
border: .5px solid rgba(255, 255, 255, 0.603);
border-radius: 5px;
cursor: pointer;
}
.seat:hover {
......@@ -39,12 +39,12 @@
.aisle {
width: 30px;
width: 1em;
}
.seat-gap {
width: 30px;
height: 20px;
width: 1em;
height: 1em;
margin: 0;
visibility: hidden;
}
......@@ -68,12 +68,12 @@
}
.aisle {
width: 40px;
width: 2em;
}
.seat-gap {
width: 30px;
height: 30px;
width: 2em;
height: 2em;
}
......
src/components/Layout/Header/Index.jsx
......@@ -29,8 +29,8 @@ const Header = ({ children }) => {
fill="url(#glowGradient)"
clip-path="url(#glowClip)" />
</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" />
<svg viewBox="0 20 480 100" xmlns="http://www.w3.org/2000/svg">
<path d="M 30 70 Q 240 20 450 70" stroke="white" stroke-width="2" fill="none" />
<defs>
<linearGradient id="glowGradient" x1="0" y1="70" x2="0" y2="130" gradientUnits="userSpaceOnUse">
......@@ -48,7 +48,7 @@ const Header = ({ children }) => {
</clipPath>
</defs>
<rect x="0" y="0" width="480" height="260"
<rect x="0" y="0" width="480" height="150"
fill="url(#glowGradient)"
clip-path="url(#glowClip)" />
</svg>
......
src/components/Layout/Header/styles.module.css
......@@ -3,14 +3,25 @@
flex-direction: column;
align-items: center;
width: 100%;
}
.title {
font-family: 'Poppins-Bold';
color: white;
font-size: 24px;
font-size: 1rem;
padding-top: 1rem;
}
.screenWrapper {
width: 50%;
}
@media screen and (min-width: 768px) {
.title {
font-family: 'Poppins-Bold';
color: white;
font-size: 2rem;
}
}
\ No newline at end of file
src/components/Shared/Modal/Index.jsx 0 → 100644
import Input from '../../Base/Input/Index';
import Button from '../../Base/Button/Index'
import styles from './styles.module.css';
const Modal = ({onConfirm, onChange}) => {
return (
<div className={styles["overlay-container"]}>
<div className={styles['modal-dialog']} role="dialog" aria-modal="true" >
<h2 className={styles['modal-title']}>Select Your Seats</h2>
<p>Please choose how many seats you'd like to book.</p>
<Input
label={"Number of Seats"}
placeholder='Enter number of seats'
type='number'
max='10'
min='1'
onChange={(e) => onChange(e.target.value)}
/>
<div className={styles['btn-wrapper']}>
<Button size={'sm'} onClick={onConfirm}>Confirm</Button>
</div>
</div>
</div>
)
}
export default Modal;
\ No newline at end of file
src/components/Shared/Modal/Modal.stories.jsx 0 → 100644
import Modal from './Index';
export default {
tags: ["autodocs"],
title: "component/Shared/Modal",
component: Modal,
argTypes: {
onConfirm: {action: "On Modal confirm"},
onChange: {action: "On No of seats value change"}
}
}
export const Default = {
}
\ No newline at end of file
src/components/Shared/Modal/styles.module.css 0 → 100644
.overlay-container {
background-color: rgba(54, 54, 54, 0.788);
backdrop-filter: blur(2px);
position: fixed;
top: 0;
left: 0;
bottom: 0;
height: 100%;
color: rgb(234, 227, 227);
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.modal-dialog {
background-color: rgba(1, 1, 6, 0.801);
border-radius: 10px;
padding: 1rem 1.5rem;
box-sizing: border-box;
}
.btn-wrapper {
display: flex;
/* justify-content: flex-end; */
flex-direction: column;
margin: 1rem 0;
}
.modal-title {
font-family: 'Poppins-Medium';
font-weight: 500;
}
p {
font-family: 'Poppins-Medium';
font-weight: 200;
}
\ No newline at end of file
src/components/TopLevel/LegendWrapper/styles.module.css
.LegendWrapper {
display: flex;
background-color: #3444c5;
height: 60px;
right: 0;
left: 0;
gap: 1rem;
position: fixed;
bottom: 0;
justify-content: center;
}
\ No newline at end of file
src/components/TopLevel/Login/Index.jsx
......@@ -21,13 +21,9 @@ const Login = () => {
label="Email"
name="email"
type="email"
placeholder='Enter email'
/>
{/* <Input
label="Password"
name="email"
type="password"
/> */}
<Button size={"sm"}>Confirm</Button>
<Button size={"md"}>Confirm</Button>
</form>
</section>
</div>
......
src/components/TopLevel/Login/styles.module.css
......@@ -27,41 +27,40 @@
} */
.container {
box-sizing: border-box;
position: relative;
background-color: rgba(0, 0, 0, 0.6);
background-color: rgb(37 51 167);
padding: 2rem;
border-radius: 10px;
padding: 3% 5% ;
box-sizing: border-box;
z-index: 1;
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;
border: 1px solid #5968e7;
box-shadow: 4px 6px 8px 2px rgb(0 0 0 / 9%);
}
.contentWrapper{
padding-bottom: 2rem;
.contentWrapper {
padding-bottom: 1.5rem;
}
.formWrapper{
.formWrapper {
display: flex;
flex-direction: column;
gap: 2rem;
gap: 1rem;
}
.title {
font-family: 'Inter-Medium';
font-size: clamp(1rem,2vw,2rem);
color: #f1f1f1c4;
font-size: 1.5rem;
color: #f1f1f1e4;
padding: 1% 0;
}
.desc {
font-family: 'Inter-Medium';
font-size: 16px;
color: #bdbcbc97;
font-size: clamp(0.5rem,3vw,1rem);
color: #ece8e8f1;
font-size: 1rem;
padding: 1% 0;
}
......
src/components/TopLevel/SeatBooking/Index.jsx
import BookingWrapper from '../../Layout/BookingWrapper/Index';
import Header from '../../Layout/Header/Index'
import Modal from '../../Shared/Modal/Index'
import Button from '../../Base/Button/Index';
import LegendWrapper from '../LegendWrapper/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>
const data = [
{
"row_id": 1,
"columnData": [
{
"id": 0,
"status": "aisle"
},
{
"id": 1,
"status": "reserved"
},
{
"id": 2,
"status": "available"
},
{
"id": 3,
"status": "reserved"
},
{
"id": 4,
"status": "available"
},
{
"id": 0,
"status": "aisle"
},
{
"id": 5,
"status": "available"
},
{
"id": 6,
"status": "reserved"
},
{
"id": 7,
"status": "available"
},
{
"id": 8,
"status": "reserved"
},
{
"id": 0,
"status": "aisle"
}
]
},
{
"row_id": 2,
"columnData": [
{
"id": 1,
"status": "available"
},
{
"id": 2,
"status": "available"
},
{
"id": 3,
"status": "available"
},
{
"id": 4,
"status": "available"
},
{
"id": 5,
"status": "available"
},
{
"id": 0,
"status": "aisle"
},
{
"id": 6,
"status": "available"
},
{
"id": 7,
"status": "available"
},
{
"id": 8,
"status": "available"
},
{
"id": 9,
"status": "available"
},
{
"id": 10,
"status": "available"
}
]
},
{
"row_id": 3,
"columnData": [
{
"id": 1,
"status": "available"
},
{
"id": 2,
"status": "available"
},
{
"id": 3,
"status": "available"
},
{
"id": 4,
"status": "available"
},
{
"id": 5,
"status": "available"
},
{
"id": 0,
"status": "aisle"
},
{
"id": 6,
"status": "available"
},
{
"id": 7,
"status": "available"
},
{
"id": 8,
"status": "available"
},
{
"id": 9,
"status": "available"
},
{
"id": 10,
"status": "available"
}
]
},
{
"row_id": 4,
"columnData": [
{
"id": 1,
"status": "available"
},
{
"id": 2,
"status": "available"
},
{
"id": 3,
"status": "available"
},
{
"id": 4,
"status": "available"
},
{
"id": 5,
"status": "available"
},
{
"id": 0,
"status": "aisle"
},
{
"id": 6,
"status": "available"
},
{
"id": 7,
"status": "available"
},
{
"id": 8,
"status": "available"
},
{
"id": 9,
"status": "available"
},
{
"id": 10,
"status": "available"
}
]
},
{
"row_id": 5,
"columnData": [
{
"id": 1,
"status": "available"
},
{
"id": 2,
"status": "available"
},
{
"id": 3,
"status": "available"
},
{
"id": 4,
"status": "available"
},
{
"id": 5,
"status": "available"
},
{
"id": 0,
"status": "aisle"
},
{
"id": 6,
"status": "available"
},
{
"id": 7,
"status": "available"
},
{
"id": 8,
"status": "available"
},
{
"id": 9,
"status": "available"
},
{
"id": 10,
"status": "available"
}
]
},
{
"row_id": 6,
"columnData": [
{
"id": 1,
"status": "available"
},
{
"id": 2,
"status": "available"
},
{
"id": 3,
"status": "available"
},
{
"id": 4,
"status": "available"
},
{
"id": 5,
"status": "available"
},
{
"id": 0,
"status": "aisle"
},
{
"id": 6,
"status": "available"
},
{
"id": 7,
"status": "available"
},
{
"id": 8,
"status": "available"
},
{
"id": 9,
"status": "available"
},
{
"id": 10,
"status": "available"
}
]
},
{
"row_id": 7,
"columnData": [
{
"id": 1,
"status": "available"
},
{
"id": 2,
"status": "available"
},
{
"id": 3,
"status": "available"
},
{
"id": 4,
"status": "available"
},
{
"id": 5,
"status": "available"
},
{
"id": 0,
"status": "aisle"
},
{
"id": 6,
"status": "available"
},
{
"id": 7,
"status": "available"
},
{
"id": 8,
"status": "available"
},
{
"id": 9,
"status": "available"
},
{
"id": 10,
"status": "available"
}
]
},
{
"row_id": 8,
"columnData": [
{
"id": 0,
"status": "aisle"
},
{
"id": 1,
"status": "reserved"
},
{
"id": 2,
"status": "available"
},
{
"id": 3,
"status": "reserved"
},
{
"id": 4,
"status": "available"
},
{
"id": 0,
"status": "aisle"
},
{
"id": 5,
"status": "available"
},
{
"id": 6,
"status": "reserved"
},
{
"id": 7,
"status": "available"
},
{
"id": 8,
"status": "reserved"
},
{
"id": 9,
"status": "available"
}
]
}
]
return (
<div className={styles['seat-booking-wrapper']}>
<Header>Choose Seats</Header>
<BookingWrapper seatData={data} />
<div className={styles['btn-wrapper']}>
<Button size={"md"}>Confirm</Button>
</div>
)
<LegendWrapper />
</div>
)
}
export default SeatBooking
\ No newline at end of file
export default SeatBooking;
\ No newline at end of file
src/components/TopLevel/SeatBooking/styles.module.css
......@@ -2,17 +2,17 @@
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; */
overflow-y: auto;
padding-bottom: 65px;
}
.btn-wrapper{
display: flex;
justify-content: center;
align-items: center;
}
\ No newline at end of file
align-items: center;
margin-top: 1rem;
}
src/index.css
@import '../src//assets//fonts.css';
@import '../src/assets/fonts.css';
*{
padding: 0;
body{
margin: 0;
}
......
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