Skip to content

Commit f701d37

Browse files
QuocAnh189QuocAnh189
committed
update responsive
1 parent dcedc38 commit f701d37

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+5105
-205
lines changed

‎src/assets/images/landing/screens/coupon.png

315 KB
Loading

‎src/assets/images/landing/screens/customer.png

385 KB
Loading

‎src/assets/images/landing/screens/detail.png

1.57 MB
Loading

‎src/assets/images/landing/screens/home.png

2.4 MB
Loading

‎src/assets/images/landing/screens/landing.png

1.1 MB
Loading

‎src/assets/images/landing/screens/list_event.png

2.16 MB
Loading

‎src/assets/images/landing/screens/overview.png

586 KB
Loading

‎src/assets/images/landing/screens/signin.png

941 KB
Loading

‎src/assets/images/landing/screens/ticket.png

1.06 MB
Loading

‎src/assets/images/landing/screens/transaction.png

316 KB
Loading

‎src/components/CouponApplyItem.tsx

+20-6
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,20 @@ import { TruncatedText } from '@layouts/components/navbar/TruncatedText'
88
//interface
99
import { ICoupon } from '@interfaces/contents/coupon.interface'
1010

11-
interface Props {
11+
//util
12+
import formatDate from '@utils/dayjs'
13+
import isExpired from '@utils/compare_date'
14+
15+
interface IProps {
16+
isExpire: boolean
1217
coupon: ICoupon
1318
index: number
1419
checked: boolean
1520
onSelect: (id: string) => void
1621
}
1722

18-
const CouponApplyItem = (props: Props) => {
19-
const { coupon, index, checked, onSelect } = props
23+
const CouponApplyItem = (props: IProps) => {
24+
const { isExpire, coupon, index, checked, onSelect } = props
2025

2126
const [titleRef, { width: titleWidth }] = useMeasure()
2227
const [descriptionRef, { width: descriptionWidth }] = useMeasure()
@@ -32,9 +37,17 @@ const CouponApplyItem = (props: Props) => {
3237
>
3338
<img className='h-9 w-auto' src={coupon.coverImageUrl} alt={coupon.name} />
3439
</div>
35-
<h6 className='h6 max-w-[165px] w-full leading-[1.4]' ref={titleRef}>
36-
<TruncatedText text={coupon.name} width={titleWidth} lines={2} />
37-
</h6>
40+
<div>
41+
<h6 className='h6 max-w-[165px] w-full leading-[1.4]' ref={titleRef}>
42+
<TruncatedText text={coupon.name} width={titleWidth} lines={2} />
43+
</h6>
44+
<p>
45+
Expire:{' '}
46+
<span className={`px-1 rounded-lg text-white ${isExpired(coupon.expireDate) ? 'bg-red' : 'bg-green'}`}>
47+
{formatDate(coupon.expireDate, 'DD/MM/YYYY')}
48+
</span>
49+
</p>
50+
</div>
3851
</div>
3952
</div>
4053
<p className='text-sm flex-1 max-w-[300px]' ref={descriptionRef}>
@@ -45,6 +58,7 @@ const CouponApplyItem = (props: Props) => {
4558
<p className='text-white font-bold'>{coupon.percentageValue}%</p>
4659
</div>
4760
<input
61+
disabled={isExpire}
4862
onChange={() => {
4963
onSelect(coupon.id)
5064
}}

‎src/components/SideBarExploreResponsive.tsx

+13-5
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,29 @@
1+
//hooks
2+
import { Dispatch, SetStateAction } from 'react'
3+
14
//components
25
import Select from '@ui/Select'
36

47
//constants
5-
import { EVENT_CATEGORIES, EVENT_RATE_OPTIONS, EVENT_STATUS_OPTIONS } from '@constants/options.constant'
8+
import { EVENT_RATE_OPTIONS, EVENT_STATUS_OPTIONS } from '@constants/options.constant'
69

710
//i18
811
import { withTranslation } from 'react-i18next'
12+
import { useAppSelector } from '@hooks/useRedux'
913

10-
interface Props {
14+
interface IProps {
1115
t: any
16+
params: any
17+
setParams: Dispatch<SetStateAction<any>>
1218
}
1319

14-
const SidebarExploreResponsive = (props: Props) => {
20+
const SidebarExploreResponsive = (props: IProps) => {
1521
const { t } = props
1622

23+
const categories = useAppSelector((state) => state.persistedReducer.category.categories)
24+
1725
return (
18-
<div className='w-full flex items-center gap-4 pb-4 px-4 mdl:hidden'>
26+
<div className='w-full flex flex-col gap-4 pb-4 px-4 mdl:hidden'>
1927
<div className='flex items-center gap-2'>
2028
<p className='text-gray500 inline-block text-header'>{t('sidebar.rate.label')}: </p>
2129
<Select
@@ -43,7 +51,7 @@ const SidebarExploreResponsive = (props: Props) => {
4351
<p className='text-gray500 inline-block text-header'>{t('sidebar.category.label')}: </p>
4452
<Select
4553
placeholder={t('asc')}
46-
options={EVENT_CATEGORIES || []}
54+
options={categories || []}
4755
onChange={(value: any) => {
4856
console.log(value)
4957
}}

‎src/components/events/CardMyEvent.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ const CardMyEvent = (props: Props) => {
6868
return (
6969
<Spring type='slideUp' index={index}>
7070
<div className='card flex flex-row w-full h-[200px] rounded-lg shadow-2xl transition-transform hover:scale-[1.005] dark:bg-gray-800'>
71-
<div className='relative flex w-[400px] h-full items-center justify-between max-md:hidden'>
71+
<div className='relative flex w-[400px] h-full items-center justify-between'>
7272
<img
7373
loading='lazy'
7474
className='w-full h-full rounded-l-lg object-cover transition duration-700 hover:skew-x-2 hover:scale-110'

‎src/components/events/EventCard.tsx

+7-15
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
//hooks
22
import { useNavigate } from 'react-router-dom'
33

4+
//components
5+
import RatingStars from '@ui/RatingStars'
6+
47
//constant
58
import { EEventPaymentTicket } from '@constants/enum.constant'
69

@@ -10,17 +13,15 @@ import { IoLocationSharp } from 'react-icons/io5'
1013

1114
//utils
1215
import formatDate from '@utils/dayjs'
13-
import { getStatusEventColor } from '@utils/helpers'
1416

1517
//interface
1618
import { ICardEvent } from '@interfaces/contents'
17-
import RatingStars from '@ui/RatingStars'
1819

19-
interface Props {
20+
interface IProps {
2021
event: ICardEvent
2122
}
2223

23-
const EventCard = (props: Props) => {
24+
const EventCard = (props: IProps) => {
2425
const { event } = props
2526

2627
const navigate = useNavigate()
@@ -77,22 +78,13 @@ const EventCard = (props: Props) => {
7778
<p className='line-clamp-2 pt-2'>{event.description}</p>
7879
</div>
7980
<div className='flex items-center justify-between border-t-2 py-3 !mt-3'>
80-
<div className='opacity-70'>
81-
<span
82-
className='badge-status badge-status--lg'
83-
style={{ backgroundColor: `var(--${getStatusEventColor('Upcoming')})` }}
84-
>
85-
{/* {event.status} */}
86-
Upcoming
87-
</span>
88-
</div>
81+
<RatingStars rating={event.averageRate} />
8982
<div className='text-primary text-right'>
9083
{event.eventPaymentType === EEventPaymentTicket.Paid ? (
91-
<p className='text-2xl font-bold'>100.000 VND</p>
84+
<p className='text-2xl font-bold'>{event.ticketTypes[0].price}$</p>
9285
) : (
9386
<p className='text-2xl font-bold'>{event.eventPaymentType}</p>
9487
)}
95-
<RatingStars rating={event.averageRate} />
9688
</div>
9789
</div>
9890
</div>

‎src/components/events/EventFavouriteItem.tsx

+17-4
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,24 @@ const EventFavouriteItem = (props: IProps) => {
3737
</h6>
3838
<RatingStars rating={event.averageRate} />
3939
<div className='flex flex-col flex-1 gap-1 mt-1.5'>
40-
<p className='font-heading font-bold text-sm leading-[1.4] text-green'>
41-
{t('item.category')}: {t(`category.${event.categories[0].name}`)}
42-
</p>
40+
<div
41+
className='flex items-center gap-2 rounded-lg px-2'
42+
style={{ backgroundColor: event.categories[0].color }}
43+
>
44+
<img
45+
loading='lazy'
46+
src={
47+
event.categories[0].iconImageUrl
48+
? event.categories[0].iconImageUrl
49+
: 'https://res.cloudinary.com/dadvtny30/image/upload/v1712409123/eventhub/event/w3xvrrue35iu1gncudsa.jpg'
50+
}
51+
alt='No image'
52+
className='w-[20px] h-[20px] object-cover rounded-full'
53+
/>
54+
<h6 className='my-2 text-white truncate'>{event.categories[0].name}</h6>
55+
</div>
4356
<p className='font-heading font-bold text-sm leading-[1.4] text-accent'>
44-
{t('item.date')}: {formatDate(event.startTime)}
57+
{t('item.date')}: {formatDate(event.startTime, 'DD/MM/YYYY')}
4558
</p>
4659
</div>
4760
<div className='grid grid-cols-2 gap-1.5 mt-4'>

‎src/components/events/create/InformationEventCreate.tsx

+8-5
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ const InformationEvent = (props: Props) => {
143143
{t('information.datetime.session.title')} <span className='text-red'>*</span>
144144
</p>
145145
</div>
146-
<div className='w-4/5 mdl:w-[600px] flex items-center text-header space-y-2 mdl:space-y-0 mdl:space-x-8'>
146+
<div className='w-4/5 mdl:w-[600px] flex flex-col md:flex-row items-center text-header space-y-2 mdl:space-y-0 mdl:space-x-8'>
147147
<div className='flex mdl:w-[300px] flex-col'>
148148
<label className='field-label' htmlFor='startTime'>
149149
{t('information.datetime.session.start_time')}
@@ -174,7 +174,7 @@ const InformationEvent = (props: Props) => {
174174
<div className='w-4/5 mdl:pl-20'>
175175
<p className='h5 mb-4 text-header'>{t('information.location.title')}</p>
176176
</div>
177-
<div className='w-full flex flex-col mdl:flex-row gap-2'>
177+
<div className='w-full flex flex-col mdl:flex-row items-center gap-2'>
178178
<div className='w-4/5 mdl:w-[200px] flex mdl:justify-end gap-2'>
179179
<p className='h6 text-right text-header'>{t('information.location.label')}</p>
180180
<span className='text-red'>*</span>
@@ -194,7 +194,7 @@ const InformationEvent = (props: Props) => {
194194
<div className='w-4/5 mdl:pl-20'>
195195
<p className='h5 mb-4 text-header'>{t('information.description.title')}</p>
196196
</div>
197-
<div className='w-full flex flex-col mdl:flex-row gap-2'>
197+
<div className='w-full flex flex-col mdl:flex-row items-center gap-2'>
198198
<div className='w-4/5 mdl:w-[200px] flex mdl:justify-end gap-2'>
199199
<p className='h6 text-header'>
200200
{t('information.description.label')} <span className='text-red'>*</span>
@@ -226,14 +226,17 @@ const InformationEvent = (props: Props) => {
226226
<IoMdAddCircleOutline color='var(--header)' size={30} />
227227
</button>
228228
</div>
229-
<div className='w-full flex flex-col mdl:flex-row gap-2'>
229+
<div className='w-full flex flex-col mdl:flex-row items-center gap-2'>
230230
<div className='w-4/5 mdl:w-[200px] flex mdl:justify-end gap-2'>
231231
<p className='h6 text-header'>{t('information.reason.label')}</p>
232232
</div>
233233

234234
<div className='space-y-3'>
235235
{reasonItems?.map((field: any, index: number) => (
236-
<div key={field.id} className='w-4/5 mdl:w-[600px] text-header flex flex-row items-center gap-2'>
236+
<div
237+
key={field.id}
238+
className='w-full md:w-4/5 mdl:w-[600px] text-header flex flex-row md:items-center gap-2'
239+
>
237240
<input
238241
className={classNames('field-input', { 'field-input--error': false })}
239242
id={`reasonItems.${index}`}

‎src/components/events/create/ReviewEventCreate.tsx

+6-4
Original file line numberDiff line numberDiff line change
@@ -78,14 +78,16 @@ const ReviewEventCreate = (props: Props) => {
7878
<div className='flex items-center gap-1'>
7979
<FaRegCalendarAlt color='gray' size='24px' />
8080

81-
<p className='text-header'>{formatDate(watch().startTime)}</p>
81+
{watch().startTime && <p className='text-header'>{formatDate(watch().startTime)}</p>}
8282
</div>
8383
<div className='flex items-center gap-1'>
8484
<IoMdTime color='gray' size='24px' />
8585

86-
<p className='text-header'>
87-
{formatDate(watch().startTime)} - {formatDate(watch().endTime)}
88-
</p>
86+
{watch().startTime && watch().endTime && (
87+
<p className='text-header'>
88+
{formatDate(watch().startTime)} - {formatDate(watch().endTime)}
89+
</p>
90+
)}
8991
</div>
9092
</div>
9193
<div className='flex flex-col gap-2 items-end'>

‎src/components/events/create/TicketEventCreate.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -54,17 +54,17 @@ const TicketEventCreate = (props: IProps) => {
5454
}
5555

5656
ticketTypes.forEach((ticket) => {
57-
if (ticket.name === '') {
57+
if (eventTicketType === EEventPaymentTicket.Paid && ticket.name === '') {
5858
isContinue = false
5959
toast.error('Please enter ticket name')
6060
return
6161
}
62-
if (ticket.quantity <= 0) {
62+
if (eventTicketType === EEventPaymentTicket.Paid && ticket.quantity <= 0) {
6363
isContinue = false
6464
toast.error('Please enter ticket quantity again, at least 1')
6565
return
6666
}
67-
if (ticket.price <= 0) {
67+
if (eventTicketType === EEventPaymentTicket.Paid && ticket.price <= 0) {
6868
isContinue = false
6969
toast.error('Please enter ticket price again, at least 1')
7070
return

‎src/interfaces/contents/event.interface.ts

+1
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ export interface ICardEvent {
5353
eventPaymentType: string
5454
averageRate: number
5555
endTime: string
56+
ticketTypes: ITicketType[]
5657
}
5758

5859
export interface ICardSearchHome {

‎src/layouts/components/PageHeader.tsx

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
//hooks
22
import { useState, useEffect } from 'react'
3+
import { useWindowSize } from 'react-use'
34

45
//components
56
import DocumentTitle from '@components/DocumentTitle'
67

78
//utils
8-
import formatDate from '@utils/dayjs'
9+
import dayjs from 'dayjs'
910

1011
interface IProps {
1112
title: string
@@ -14,6 +15,8 @@ interface IProps {
1415
const PageHeader = (props: IProps) => {
1516
const { title } = props
1617
const [currentTime, setCurrentTime] = useState(new Date())
18+
const { width } = useWindowSize()
19+
const dateFormat = width < 768 ? 'MM.DD.YYYY' : 'MMMM DD, YYYY'
1720

1821
useEffect(() => {
1922
const interval = setInterval(() => {
@@ -34,9 +37,9 @@ const PageHeader = (props: IProps) => {
3437
className='h-11 bg-body flex items-center justify-center rounded-md px-9 font-heading font-bold
3538
text-header text-sm border border-input-border lg:w-[310px]'
3639
>
37-
{formatDate(currentTime.toString())}
40+
{dayjs(currentTime).format(`${dateFormat} HH`)}
3841
<span className='animate-pulse-fast'>:</span>
39-
{formatDate(currentTime.toString())}
42+
{dayjs(currentTime).format('mm A')}
4043
</div>
4144
</div>
4245
</>

‎src/pages/common/Modify-Create-Event.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -43,14 +43,14 @@ import createdSampleData from '@data/created_sample'
4343
//interface
4444
import { IUser } from '@interfaces/systems'
4545

46-
interface Props {
46+
interface IProps {
4747
t: any
4848
title: string
4949
create?: boolean
5050
event?: IEvent
5151
}
5252

53-
const ModifyEvent = (props: Props) => {
53+
const ModifyEvent = (props: IProps) => {
5454
const { t, title, create, event } = props
5555

5656
const CREATE_STEP = [t('step.information'), t('step.banner'), t('step.ticket'), t('step.review')]
@@ -173,14 +173,14 @@ const ModifyEvent = (props: Props) => {
173173
return (
174174
<div className='min-h-screen'>
175175
<PageHeader title={title} />
176-
<div className='w-full flex mt-40 justify-center gap-12'>
176+
<div className='w-full flex flex-col md:flex-row md:mt-40 justify-center gap-12 px-4 md:px-0'>
177177
<div className='card'>
178178
<button
179179
onClick={() => {
180180
setActive(0)
181181
reset()
182182
}}
183-
className='w-[300px] h-[200px] rounded-lg flex flex-col items-center justify-center gap-2 hover:cursor-pointer'
183+
className='w-full h-[200px] max-w-[300px] rounded-lg flex flex-col items-center justify-center gap-2 hover:cursor-pointer'
184184
>
185185
<IoCreate size={42} color='var(--header)' />
186186
<p className='h4 font-bold text-header'>{t('option_one.title')}</p>
@@ -189,7 +189,7 @@ const ModifyEvent = (props: Props) => {
189189
</div>
190190
<div className='card flex items-center justify-center'>
191191
<input
192-
className='h-full w-full opacity-0 z-[1] hover:cursor-pointer'
192+
className='w-full h-[200px] opacity-0 z-[1] hover:cursor-pointer'
193193
type='file'
194194
accept='.xlsx, .xls'
195195
onChange={(e) => handleFileImport(e)}

‎src/pages/coupon/components/ModalUpdate.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -65,12 +65,12 @@ const ModalUpdateCoupon = (props: IProps) => {
6565
const result = await UpdateCoupon(formData).unwrap()
6666
if (result) {
6767
console.log(result)
68-
toast.success('Coupon updated successfully')
68+
toast.success('updated successfully')
6969
setModalOpen(false)
7070
}
7171
} catch (error) {
7272
console.error(error)
73-
toast.error('Something went wrong')
73+
toast.error('something went wrong')
7474
}
7575
}
7676

‎src/pages/events/components/EventRelate.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,12 @@ const EventsRelate = (props: IProps) => {
1919
const { data: events, isFetching } = useGetEventsQuery({ pageSize: 3, categoryId: categoryId })
2020

2121
return (
22-
<div className='flex flex-col items-center px-[150px] py-8 gap-6'>
22+
<div className='flex flex-col items-center px-10 md:px-[150px] py-8 gap-6'>
2323
<h1 className='text-header font-bold text-3xl'>{title}</h1>
2424
{isFetching ? (
2525
<Loader />
2626
) : (
27-
<div className='grid grid-flow-col auto-cols-fr gap-4'>
27+
<div className='grid md:grid-flow-col gap-4'>
2828
{events?.items.map((event: ICardEvent, index: number) => (
2929
<EventCard key={`event-${index}`} event={event} />
3030
))}

0 commit comments

Comments
 (0)