upgraded tailwind to latest version
This commit is contained in:
Deltora72
parent
3c6da2e8d6
commit
472f468829
722
package-lock.json
generated
722
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -77,6 +77,7 @@
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.17.5",
|
||||
"@react-email/preview-server": "^5.0.1",
|
||||
"@tailwindcss/postcss": "^4.2.4",
|
||||
"@testing-library/jest-dom": "^5.16.2",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@types/bcrypt": "^5.0.2",
|
||||
@ -87,14 +88,13 @@
|
||||
"@types/mustache": "^4.2.5",
|
||||
"@types/node": "^20.12.7",
|
||||
"@types/react": "^18.2.79",
|
||||
"autoprefixer": "^10.4.17",
|
||||
"babel-loader": "^8.2.3",
|
||||
"eslint": "8.8.0",
|
||||
"eslint-config-next": "^14.2.2",
|
||||
"jest": "^27.5.1",
|
||||
"postcss": "^8.4.35",
|
||||
"react-email": "^5.0.1",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"tailwindcss": "^4.2.4",
|
||||
"typescript": "^5.4.5"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
'@tailwindcss/postcss': {},
|
||||
},
|
||||
}
|
||||
|
||||
@ -57,7 +57,7 @@ const Item: React.FunctionComponent<ItemProps> = ({ data, locale, className }) =
|
||||
const body = data.translations.filter(x => x.languages_code.code.slice(0, 2) === locale)[0].body.toLowerCase();
|
||||
|
||||
return (
|
||||
<a href={data.link} target="_blank" className={`flex rounded px-2 sm:px-8 sm:py-4 lg:px-4 pt-0 pb-0 lg:pt-6 lg:pb-6 select-none ${className}`}>
|
||||
<a href={data.link} target="_blank" className={`flex rounded-sm px-2 sm:px-8 sm:py-4 lg:px-4 pt-0 pb-0 lg:pt-6 lg:pb-6 select-none ${className}`}>
|
||||
<div className="hidden lg:inline-block shrink-0">
|
||||
{data.company_pic ?
|
||||
<Image
|
||||
@ -72,13 +72,13 @@ const Item: React.FunctionComponent<ItemProps> = ({ data, locale, className }) =
|
||||
priority={false}
|
||||
noPreload={true}
|
||||
className="inline-block rounded-full bg-market-border/50 p-[6px]"
|
||||
figureClass="inline-block rounded-full !size-14 shrink-0"
|
||||
figureClass="inline-block rounded-full size-14! shrink-0"
|
||||
/>
|
||||
:
|
||||
<img src="/pics/banner-def-profile.jpg" alt={translate("pic-of") + title} className="inline-block rounded-full !size-14 shrink-0 bg-market-border/50 p-[6px]" />
|
||||
<img src="/pics/banner-def-profile.jpg" alt={translate("pic-of") + title} className="inline-block rounded-full size-14! shrink-0 bg-market-border/50 p-[6px]" />
|
||||
}
|
||||
</div>
|
||||
<div className="block w-full rtl:lg:pr-4 rtl:lg:pl-16 ltr:lg:pl-4 ltr:lg:pr-16">
|
||||
<div className="block w-full lg:rtl:pr-4 lg:rtl:pl-16 lg:ltr:pl-4 lg:ltr:pr-16">
|
||||
<div className="flex flex-col lg:items-center lg:hidden">
|
||||
<div className="flex items-center border-b border-market-input py-3">
|
||||
{data.company_pic ?
|
||||
@ -94,10 +94,10 @@ const Item: React.FunctionComponent<ItemProps> = ({ data, locale, className }) =
|
||||
priority={true}
|
||||
noPreload={true}
|
||||
className="inline-block rounded-full bg-market-border/50 p-1"
|
||||
figureClass="inline-block rounded-full !size-12 shrink-0"
|
||||
figureClass="inline-block rounded-full size-12! shrink-0"
|
||||
/>
|
||||
:
|
||||
<img src="/pics/banner-def-profile.jpg" alt={translate("pic-of") + title} className="inline-block rounded-full !size-12 shrink-0 bg-market-border/50 p-1" />
|
||||
<img src="/pics/banner-def-profile.jpg" alt={translate("pic-of") + title} className="inline-block rounded-full size-12! shrink-0 bg-market-border/50 p-1" />
|
||||
}
|
||||
<span className="block w-full text-base/6 font-semibold mr-4 capitalize">{title}</span>
|
||||
</div>
|
||||
@ -105,8 +105,8 @@ const Item: React.FunctionComponent<ItemProps> = ({ data, locale, className }) =
|
||||
<p className="block text-[0.825rem]/6 lg:text-sm/6 xl:text-sm/6 w-full mb-2 pt-3 pb-2 first-letter:capitalize">{stripHtml(body.slice(0, 250))}</p>
|
||||
</div>
|
||||
</div>
|
||||
<span className="hidden lg:block w-full text-base font-semibold capitalize rtl:lg:pr-2 ltr:lg:pl-2">{title}</span>
|
||||
<p className="hidden lg:block text-[0.825rem]/6 lg:text-sm/6 xl:text-sm/6 w-full mb-4 pt-3 pb-2 first-letter:capitalize rtl:lg:pr-2 ltr:lg:pl-2">{stripHtml(body.slice(0, 250))}</p>
|
||||
<span className="hidden lg:block w-full text-base font-semibold capitalize lg:rtl:pr-2 lg:ltr:pl-2">{title}</span>
|
||||
<p className="hidden lg:block text-[0.825rem]/6 lg:text-sm/6 xl:text-sm/6 w-full mb-4 pt-3 pb-2 first-letter:capitalize lg:rtl:pr-2 lg:ltr:pl-2">{stripHtml(body.slice(0, 250))}</p>
|
||||
<div className="flex flex-col items-center justify-center rounded-2xl w-4/5 sm:w-full mx-auto p-0 lg:p-1 bg-white ring-1 ring-market-input my-2">
|
||||
<Image
|
||||
src={`${data.media[0].directus_files_id.id}/${data.media[0].directus_files_id.filename_download}`}
|
||||
@ -157,8 +157,8 @@ const Banner: React.FunctionComponent<BannerProps> = ({ data, currentCat, classN
|
||||
|
||||
return (
|
||||
<div className={`${bannersToShow().length > 0 ? "flex" : "hidden"} flex-col w-full mb-4 ${className}`}>
|
||||
<div className="block w-full bg-market-input xl:bg-white border-b border-market-input px-2 xl:px-4 py-2 rounded xl:rounded-b-none">
|
||||
<span className="inline-block bg-white xl:bg-market-input py-1 px-2 rounded text-market-title-light text-sm capitalize">{translate("banner-title")}</span>
|
||||
<div className="block w-full bg-market-input xl:bg-white border-b border-market-input px-2 xl:px-4 py-2 rounded-sm xl:rounded-b-none">
|
||||
<span className="inline-block bg-white xl:bg-market-input py-1 px-2 rounded-sm text-market-title-light text-sm capitalize">{translate("banner-title")}</span>
|
||||
</div>
|
||||
<Slider
|
||||
space={4}
|
||||
@ -172,11 +172,11 @@ const Banner: React.FunctionComponent<BannerProps> = ({ data, currentCat, classN
|
||||
loop={true}
|
||||
autoplayDelay={12000}
|
||||
childComponent={(x: BannerData) => <Item key={x.id} data={x} locale={locale} />}
|
||||
sliderClass={`block sm:bg-[#fcfcfd] max-sm:w-[calc(100vw_-_2rem)] max-lg:max-w-md lg:max-w-lg w-full [rtl:direction:rtl] mx-auto bg-white`}
|
||||
viewPortClass="!p-0"
|
||||
sliderClass={`block sm:bg-[#fcfcfd] max-sm:w-[calc(100vw-2rem)] max-lg:max-w-md lg:max-w-lg w-full [rtl:direction:rtl] mx-auto bg-white`}
|
||||
viewPortClass="p-0!"
|
||||
containerClass=""
|
||||
controlsContainerClass="block bg-white px-4 pt-8 pb-4 lg:py-6 !mt-0 lg:border-t border-market-input"
|
||||
dotsWrapperClass="!z-0"
|
||||
controlsContainerClass="block bg-white px-4 pt-8 pb-4 lg:py-6 mt-0! lg:border-t border-market-input"
|
||||
dotsWrapperClass="z-0!"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -28,7 +28,7 @@ const Button: React.FunctionComponent<Button> = ({ text, type = "button", simple
|
||||
form={formId}
|
||||
name={name}
|
||||
value={value}
|
||||
className={`inline-block min-h-8 text-center rounded select-none active:scale-[0.98] transition-transform cursor-none lg:cursor-pointer duration-[75ms] shadow ${loading ? "pointer-events-none" : ""} ${disabled ? "pointer-events-none !bg-gray-300" + " " + disabledClass : ""} ${className}`}
|
||||
className={`inline-block min-h-8 text-center rounded-sm select-none active:scale-[0.98] transition-transform cursor-none lg:cursor-pointer duration-75 shadow-sm ${loading ? "pointer-events-none" : ""} ${disabled ? "pointer-events-none bg-gray-300!" + " " + disabledClass : ""} ${className}`}
|
||||
onClick={onClick}
|
||||
>
|
||||
{loading ?
|
||||
|
||||
@ -28,7 +28,7 @@ const ToggleButton: React.FunctionComponent<ToggleButton> = ({ className, value
|
||||
type="button"
|
||||
data-value={value}
|
||||
data-type={typeof(value) === 'number' ? 'number' : 'string'}
|
||||
className={`flex justify-center items-center outline-none focus:outline-none h-10 ${isActive ? activeClass : ''} ${className}`}
|
||||
className={`flex justify-center items-center outline-hidden focus:outline-hidden h-10 ${isActive ? activeClass : ''} ${className}`}
|
||||
onClick={handleToggle}
|
||||
>
|
||||
{children}
|
||||
|
||||
@ -153,15 +153,15 @@ const DayPickerCalendar = ({
|
||||
animate,
|
||||
onSelect: handleDateSelection,
|
||||
classNames: {
|
||||
day: `${defaultClassNames.day} select-none rounded-full hover:lg:bg-neutral-100 ${dayClass}`,
|
||||
day: `${defaultClassNames.day} select-none rounded-full lg:hover:bg-neutral-100 ${dayClass}`,
|
||||
today: `text-market-title ${todayClass}`,
|
||||
selected: `${selectedClass}`,
|
||||
root: `${defaultClassNames.root} ${rootClass}`,
|
||||
chevron: `${defaultClassNames.chevron} ${chevronClass}`,
|
||||
disabled: `${defaultClassNames.disabled} ${disabledClass}`,
|
||||
range_start: `bg-market-title-light !text-white hover:[background-color:#516ec2] ${rangeStartClass}`,
|
||||
range_start: `bg-market-title-light text-white! hover:bg-market-title-light ${rangeStartClass}`,
|
||||
range_middle: `bg-market-input text-market-title-light ${rangeMiddleClass}`,
|
||||
range_end: `bg-market-title-light !text-white hover:[background-color:#516ec2] ${rangeEndClass}`,
|
||||
range_end: `bg-market-title-light text-white! hover:bg-market-title-light ${rangeEndClass}`,
|
||||
week: `${defaultClassNames.week} ${weekClass}`,
|
||||
weeks: `${defaultClassNames.weeks} ${weeksClass}`,
|
||||
},
|
||||
@ -194,11 +194,11 @@ const DayPickerCalendar = ({
|
||||
onClose={() => setIsOpen(false)}
|
||||
title={translate("dpc-title")}
|
||||
style={themeStyles ?? null}
|
||||
className="flex flex-col bg-white w-[90vw] h-auto max-h-[80vh] lg:w-auto lg:h-auto lg:min-w-fit lg:max-w-[90vw] lg:max-h-[90vh] rounded"
|
||||
className="flex flex-col bg-white w-[90vw] h-auto max-h-[80vh] lg:w-auto lg:h-auto lg:min-w-fit lg:max-w-[90vw] lg:max-h-[90vh] rounded-sm"
|
||||
childrenClass="lg:flierland-scrollbar overflow-visible flex items-center justify-center"
|
||||
headerClass="!h-12"
|
||||
titleClass="!text-sm"
|
||||
closeClass="!size-6"
|
||||
headerClass="h-12!"
|
||||
titleClass="text-sm!"
|
||||
closeClass="size-6!"
|
||||
>
|
||||
<div className={`bg-white p-3 lg:p-4`}>
|
||||
{isFa ?
|
||||
|
||||
@ -114,10 +114,10 @@ const EventsCalendar: React.FunctionComponent<EventsCalendarProps> = ({ id, star
|
||||
childComponent={(x: Date) => <DateItem key={x.getTime()} date={x} active={isMonths ? (x.getMonth() === activeDate.getMonth() && x.getFullYear() === activeDate.getFullYear()) : getDate(x) === getDate(activeDate)} onDatePick={handleDatePick} isMonths={isMonths} />}
|
||||
sliderClass="pt-8"
|
||||
viewPortClass="z-1 mx-10 md:mx-20 relative"
|
||||
controlsContainerClass="!mt-0"
|
||||
controlsContainerClass="mt-0!"
|
||||
buttonsWrapperClass={"top-1/2 -translate-y-1/2 z-10 pointer-events-none"}
|
||||
prevClass="inline-block p-0 sm:p-4 backdrop-blur-sm pointer-events-auto rounded-lg top-6"
|
||||
nextClass="inline-block p-0 sm:p-4 backdrop-blur-sm pointer-events-auto rounded-lg top-6"
|
||||
prevClass="inline-block p-0 sm:p-4 backdrop-blur-xs pointer-events-auto rounded-lg top-6"
|
||||
nextClass="inline-block p-0 sm:p-4 backdrop-blur-xs pointer-events-auto rounded-lg top-6"
|
||||
/> */}
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -44,7 +44,7 @@ const CheckBox: React.FunctionComponent<CheckBox> = ({ children, title, forId, v
|
||||
id={forId}
|
||||
name={name}
|
||||
value={value}
|
||||
className={`absolute w-0 h-0 opacity-0 lg:cursor-pointer [&~span.checkmark]:checked:after:block`}
|
||||
className={`absolute w-0 h-0 opacity-0 lg:cursor-pointer checked:[&~span.checkmark]:after:block`}
|
||||
onChange={toggleCheckbox}
|
||||
disabled={disabled}
|
||||
></input>
|
||||
|
||||
@ -53,7 +53,7 @@ const Gallery: React.FunctionComponent<GalleryProps> = ({
|
||||
startTime: 0, didZoom: false // Added to track zoom sessions
|
||||
});
|
||||
|
||||
const railSwapClass = "transition-transform duration-[400ms] ease-[cubic-bezier(0.6,1,0.89,1)] lg:duration-[550ms] lg:ease-[cubic-bezier(0.22,0.25,0,1)]";
|
||||
const railSwapClass = "transition-transform duration-400 ease-[cubic-bezier(0.6,1,0.89,1)] lg:duration-550 lg:ease-[cubic-bezier(0.22,0.25,0,1)]";
|
||||
|
||||
const getActiveImage = () => imageRefs.current[picIndex];
|
||||
|
||||
@ -326,18 +326,18 @@ const Gallery: React.FunctionComponent<GalleryProps> = ({
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[999] bg-black flex flex-col gap-4 justify-between overflow-hidden select-none touch-none" dir={isRTL ? 'rtl' : 'ltr'}>
|
||||
<div className="fixed inset-0 z-999 bg-black flex flex-col gap-4 justify-between overflow-hidden select-none touch-none" dir={isRTL ? 'rtl' : 'ltr'}>
|
||||
{/* header */}
|
||||
<div className={`absolute top-0 w-full z-[130] flex items-center justify-between gap-12 px-6 lg:px-8 py-3 lg:py-4 bg-black/30 transition-all duration-300 ${headerVisible ? 'translate-y-0' : '-translate-y-full'}`}>
|
||||
<div className={`absolute top-0 w-full z-130 flex items-center justify-between gap-12 px-6 lg:px-8 py-3 lg:py-4 bg-black/30 transition-all duration-300 ${headerVisible ? 'translate-y-0' : '-translate-y-full'}`}>
|
||||
<div className="flex flex-col items-start">
|
||||
<span className="text-white text-xs/6 uppercase tracking-widest max-lg:line-clamp-1">{title}</span>
|
||||
<span className="text-white text-xs mt-3 lg:mt-4 tracking-tighter" dir="ltr">{picIndex + 1} / {items.length}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-6">
|
||||
<button onClick={handleDownload} className="text-white outline-none">
|
||||
<button onClick={handleDownload} className="text-white outline-hidden">
|
||||
<DownloadSolid className="size-4 fill-current -mt-1 text-white hover:text-red-500" />
|
||||
</button>
|
||||
<button onClick={handleClose} className="text-white text-3xl font-thin hover:text-red-500 transition-colors pointer-events-auto outline-none">×</button>
|
||||
<button onClick={handleClose} className="text-white text-3xl font-thin hover:text-red-500 transition-colors pointer-events-auto outline-hidden">×</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -350,7 +350,7 @@ const Gallery: React.FunctionComponent<GalleryProps> = ({
|
||||
ref={(el) => { imageRefs.current[i] = el; }}
|
||||
src={`${serverAddress()}/${item.directus_files_id.id}`}
|
||||
className={`max-w-full max-h-[90vh] w-auto h-auto lg:h-full object-contain pointer-events-none will-change-transform
|
||||
${!isDragging ? 'transition-transform duration-[350ms] ease-out' : 'transition-none'}
|
||||
${!isDragging ? 'transition-transform duration-350 ease-out' : 'transition-none'}
|
||||
`}
|
||||
style={{
|
||||
transformOrigin: 'center center',
|
||||
@ -364,7 +364,7 @@ const Gallery: React.FunctionComponent<GalleryProps> = ({
|
||||
|
||||
{/* navigation arrows */}
|
||||
{!isZoomed && (
|
||||
<div className="hidden lg:flex absolute inset-0 items-center justify-between px-10 pointer-events-none z-[120]">
|
||||
<div className="hidden lg:flex absolute inset-0 items-center justify-between px-10 pointer-events-none z-120">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handlePrev}
|
||||
@ -386,7 +386,7 @@ const Gallery: React.FunctionComponent<GalleryProps> = ({
|
||||
|
||||
{/* thumbnails */}
|
||||
<div className={`block w-full px-4 py-4 lg:py-6 overflow-x-auto hide-scrollbar shrink-0`}>
|
||||
<div className="flex items-center justify-center gap-3 w-max rtl:[direction:rtl] mx-auto">
|
||||
<div className="flex items-center justify-center gap-3 w-max rtl:rtl mx-auto">
|
||||
{items.map((item, i) => (
|
||||
<Image
|
||||
key={item.directus_files_id.id}
|
||||
@ -399,7 +399,7 @@ const Gallery: React.FunctionComponent<GalleryProps> = ({
|
||||
imageSizes={[128, 128, 128, 128]}
|
||||
priority={false}
|
||||
className={`block shrink-0 object-cover`}
|
||||
figureClass={`w-24 lg:w-32 aspect-3/2 rounded-md lg:cursor-pointer transition-all hover:lg:opacity-100 ${i === picIndex ? "active-thumb" : ""} ${i === picIndex ? 'ring-2 ring-white scale-105 opacity-100' : 'opacity-85'}`}
|
||||
figureClass={`w-24 lg:w-32 aspect-3/2 rounded-md lg:cursor-pointer transition-all lg:hover:opacity-100 ${i === picIndex ? "active-thumb" : ""} ${i === picIndex ? 'ring-2 ring-white scale-105 opacity-100' : 'opacity-85'}`}
|
||||
onClick={() => setPicIndex(i)}
|
||||
/>
|
||||
))}
|
||||
|
||||
@ -53,7 +53,7 @@ const Gallery: React.FunctionComponent<GalleryProps> = ({
|
||||
startTime: 0, didZoom: false // Added to track zoom sessions
|
||||
});
|
||||
|
||||
const railSwapClass = "transition-transform duration-[400ms] ease-[cubic-bezier(0.6,1,0.89,1)] lg:duration-[550ms] lg:ease-[cubic-bezier(0.22,0.25,0,1)]";
|
||||
const railSwapClass = "transition-transform duration-400 ease-[cubic-bezier(0.6,1,0.89,1)] lg:duration-550 lg:ease-[cubic-bezier(0.22,0.25,0,1)]";
|
||||
|
||||
const getActiveImage = () => imageRefs.current[picIndex];
|
||||
|
||||
@ -326,18 +326,18 @@ const Gallery: React.FunctionComponent<GalleryProps> = ({
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[999] bg-black flex flex-col gap-4 justify-between overflow-hidden select-none touch-none" dir={isRTL ? 'rtl' : 'ltr'}>
|
||||
<div className="fixed inset-0 z-999 bg-black flex flex-col gap-4 justify-between overflow-hidden select-none touch-none" dir={isRTL ? 'rtl' : 'ltr'}>
|
||||
{/* header */}
|
||||
<div className={`absolute top-0 w-full z-[130] flex items-center justify-between gap-12 px-6 lg:px-8 py-3 lg:py-4 bg-black/30 transition-all duration-300 ${headerVisible ? 'translate-y-0' : '-translate-y-full'}`}>
|
||||
<div className={`absolute top-0 w-full z-130 flex items-center justify-between gap-12 px-6 lg:px-8 py-3 lg:py-4 bg-black/30 transition-all duration-300 ${headerVisible ? 'translate-y-0' : '-translate-y-full'}`}>
|
||||
<div className="flex flex-col items-start">
|
||||
<span className="text-white text-xs/6 uppercase tracking-widest max-lg:line-clamp-1">{title}</span>
|
||||
<span className="text-white text-xs mt-3 lg:mt-4 tracking-tighter" dir="ltr">{picIndex + 1} / {items.length}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-6">
|
||||
<button onClick={handleDownload} className="text-white outline-none">
|
||||
<button onClick={handleDownload} className="text-white outline-hidden">
|
||||
<DownloadSolid className="size-4 fill-current -mt-1 text-white hover:text-red-500" />
|
||||
</button>
|
||||
<button onClick={handleClose} className="text-white text-3xl font-thin hover:text-red-500 transition-colors pointer-events-auto outline-none">×</button>
|
||||
<button onClick={handleClose} className="text-white text-3xl font-thin hover:text-red-500 transition-colors pointer-events-auto outline-hidden">×</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -350,7 +350,7 @@ const Gallery: React.FunctionComponent<GalleryProps> = ({
|
||||
ref={(el) => { imageRefs.current[i] = el; }}
|
||||
src={`${serverAddress()}/${item.directus_files_id.id}`}
|
||||
className={`max-w-full max-h-[90vh] w-auto h-auto lg:h-full object-contain pointer-events-none will-change-transform
|
||||
${!isDragging ? 'transition-transform duration-[350ms] ease-out' : 'transition-none'}
|
||||
${!isDragging ? 'transition-transform duration-350 ease-out' : 'transition-none'}
|
||||
`}
|
||||
style={{
|
||||
transformOrigin: 'center center',
|
||||
@ -364,7 +364,7 @@ const Gallery: React.FunctionComponent<GalleryProps> = ({
|
||||
|
||||
{/* navigation arrows */}
|
||||
{!isZoomed && (
|
||||
<div className="hidden lg:flex absolute inset-0 items-center justify-between px-10 pointer-events-none z-[120]">
|
||||
<div className="hidden lg:flex absolute inset-0 items-center justify-between px-10 pointer-events-none z-120">
|
||||
<button
|
||||
type="button"
|
||||
onClick={isRTL ? handlePrev : handleNext}
|
||||
@ -386,7 +386,7 @@ const Gallery: React.FunctionComponent<GalleryProps> = ({
|
||||
|
||||
{/* thumbnails */}
|
||||
<div className={`block w-full px-4 py-4 lg:py-6 overflow-x-auto hide-scrollbar shrink-0`}>
|
||||
<div className="flex items-center justify-center gap-3 w-max rtl:[direction:rtl] mx-auto">
|
||||
<div className="flex items-center justify-center gap-3 w-max rtl:rtl mx-auto">
|
||||
{items.map((item, i) => (
|
||||
<Image
|
||||
key={item.directus_files_id.id}
|
||||
@ -399,7 +399,7 @@ const Gallery: React.FunctionComponent<GalleryProps> = ({
|
||||
imageSizes={[128, 128, 128, 128]}
|
||||
priority={false}
|
||||
className={`block shrink-0 object-cover`}
|
||||
figureClass={`w-24 lg:w-32 aspect-3/2 rounded-md lg:cursor-pointer transition-all hover:lg:opacity-100 ${i === picIndex ? "active-thumb" : ""} ${i === picIndex ? 'ring-2 ring-white scale-105 opacity-100' : 'opacity-85'}`}
|
||||
figureClass={`w-24 lg:w-32 aspect-3/2 rounded-md lg:cursor-pointer transition-all lg:hover:opacity-100 ${i === picIndex ? "active-thumb" : ""} ${i === picIndex ? 'ring-2 ring-white scale-105 opacity-100' : 'opacity-85'}`}
|
||||
onClick={() => setPicIndex(i)}
|
||||
/>
|
||||
))}
|
||||
|
||||
@ -430,10 +430,10 @@ const Gallery: React.FunctionComponent<Gallery> = ({ className, onClose, id, ite
|
||||
const Controls = () => {
|
||||
return (
|
||||
<div className="hidden lg:flex items-center justify-between w-full h-full absolute top-0 p-0 z-10 pointer-events-none">
|
||||
<span onClick={prevSlide} className={`pointer-events-auto [&>svg]:hover:fill-light-red flex items-center pl-2 pr-14 lg:pl-12 lg:pr-20 float-right h-full lg:cursor-pointer bg-transparent active:scale-95 select-none`}>
|
||||
<span onClick={prevSlide} className={`pointer-events-auto hover:[&>svg]:fill-light-red flex items-center pl-2 pr-14 lg:pl-12 lg:pr-20 float-right h-full lg:cursor-pointer bg-transparent active:scale-95 select-none`}>
|
||||
<ArrowLeft className={`block ${showControls ? "visible" : "invisible"} ${0 < picIndex ? "" : "invisible"} w-9 h-9 p-0 rtl:rotate-180 rounded-full fill-white select-none lg:w-10 lg:h-10`} />
|
||||
</span>
|
||||
<span onClick={nextSlide} className={`pointer-events-auto [&>svg]:hover:fill-light-red flex items-center pl-14 pr-2 lg:pr-12 lg:pl-20 float-left h-full lg:cursor-pointer bg-transparent active:scale-95 select-none`}>
|
||||
<span onClick={nextSlide} className={`pointer-events-auto hover:[&>svg]:fill-light-red flex items-center pl-14 pr-2 lg:pr-12 lg:pl-20 float-left h-full lg:cursor-pointer bg-transparent active:scale-95 select-none`}>
|
||||
<ArrowRight className={`block ${showControls ? "visible" : "invisible"} ${items.length - 1 > picIndex ? "" : "invisible"} w-9 h-9 p-0 rtl:rotate-180 rounded-full fill-white select-none lg:w-10 lg:h-10`} />
|
||||
</span>
|
||||
</div>
|
||||
@ -469,21 +469,21 @@ const Gallery: React.FunctionComponent<Gallery> = ({ className, onClose, id, ite
|
||||
onClose={closeGallery}
|
||||
style={{ "--theme": "#2A2E3C", "--m-theme": "#272d42", "--mobile-max-h-margin": `${mobileMaxHeightMargin}px`, "--desktop-max-h-margin": `${desktopMaxHeightMargin}px` } as React.CSSProperties}
|
||||
title={`${translate("gallery-pic")} ${picIndex + 1} ${translate("gallery-of")} ${items.length}`}
|
||||
className={`block bg-[var(--theme)] w-screen h-screen lg:rounded-2xl lg:w-[70%] lg:h-[80vh] overflow-hidden`}
|
||||
childrenClass={`!h-full`}
|
||||
headerClass={`bg-[#272d42]/80 lg:bg-secondary/90 shadow transition-transform duration-[200ms] [transition-timing-function:cubic-bezier(0.15,_0.98,0.98,_1)] absolute top-0 z-50 border-none ${headerVisible ? "translate-y-0" : "-translate-y-full"}`}
|
||||
titleClass={`text-white !lowercase`}
|
||||
className={`block bg-(--theme) w-screen h-screen lg:rounded-2xl lg:w-[70%] lg:h-[80vh] overflow-hidden`}
|
||||
childrenClass={`h-full!`}
|
||||
headerClass={`bg-footer/80 lg:bg-secondary/90 shadow-sm transition-transform duration-200 ease-[cubic-bezier(0.15,0.98,0.98,1)] absolute top-0 z-50 border-none ${headerVisible ? "translate-y-0" : "-translate-y-full"}`}
|
||||
titleClass={`text-white lowercase!`}
|
||||
closeClass={`fill-white`}
|
||||
>
|
||||
<div className="w-full h-full relative overflow-hidden lg:w-full lg:h-[100%] bg-[var(--m-theme)] lg:bg-[var(--theme)] rounded">
|
||||
<div className="block overflow-hidden rounded relative w-full h-[calc(100%_-_182px)] max-h-full lg:h-[calc(100%_-_134px)]">
|
||||
<div className="w-full h-full relative overflow-hidden lg:w-full lg:h-[100%] bg-(--m-theme) lg:bg-(--theme) rounded-sm">
|
||||
<div className="block overflow-hidden rounded-sm relative w-full h-[calc(100%-182px)] max-h-full lg:h-[calc(100%-134px)]">
|
||||
<div style={{ "--transform-mobile": `${picIndex * 100}vw`, "--transform-desktop": `${picIndex * 70}vw` } as React.CSSProperties} className="block w-full h-full relative overflow-x-hidden hide-scrollbar z-10">
|
||||
<div ref={imageRef} id="parent-container" className={`flex items-start justify-start duration-[375ms] [transition-timing-function:cubic-bezier(0.5,1,0.89,1)] w-max h-full mx-auto relative ltr:-translate-x-[var(--transform-mobile)] rtl:translate-x-[var(--transform-mobile)] ltr:lg:-translate-x-[var(--transform-desktop)] rtl:lg:translate-x-[var(--transform-desktop)] transition-transform lg:duration-[450ms] lg:[transition-timing-function:cubic-bezier(0.4,_1,0.8,_1)]`}>
|
||||
<div ref={imageRef} id="parent-container" className={`flex items-start justify-start duration-375 ease-[cubic-bezier(0.5,1,0.89,1)] w-max h-full mx-auto relative ltr:-translate-x-(--transform-mobile) rtl:translate-x-(--transform-mobile) lg:ltr:-translate-x-(--transform-desktop) lg:rtl:translate-x-(--transform-desktop) transition-transform lg:duration-450 lg:ease-[cubic-bezier(0.4,1,0.8,1)]`}>
|
||||
{items.map((item, i) => (
|
||||
<div
|
||||
id={`${i}`}
|
||||
key={item.directus_files_id.id + i}
|
||||
className={`flex items-center w-[calc(100vw_-_0rem)] touch-none h-full pt-4 pb-4 px-0 lg:w-[70vw] relative select-none lg:pt-14 lg:pb-4 lg:px-5 bg-[var(--m-theme)] lg:bg-[var(--theme)]`}
|
||||
className={`flex items-center w-[calc(100vw-0)] touch-none h-full pt-4 pb-4 px-0 lg:w-[70vw] relative select-none lg:pt-14 lg:pb-4 lg:px-5 bg-(--m-theme) lg:bg-(--theme)`}
|
||||
onPointerDown={touchStartHandler}
|
||||
style={{
|
||||
"--image-bg": `url("${serverAddress() + item.directus_files_id.id}")`,
|
||||
@ -508,15 +508,15 @@ const Gallery: React.FunctionComponent<Gallery> = ({ className, onClose, id, ite
|
||||
width={item.directus_files_id.width}
|
||||
height={item.directus_files_id.height}
|
||||
className={`
|
||||
[background-image:var(--image-bg)] [background-size:var(--mbg-size)] [background-position:var(--mbg-position)]
|
||||
lg:[background-size:var(--bg-size)] lg:[background-position:var(--bg-position)] bg-no-repeat
|
||||
transition-all duration-[75ms] ease-linear lg:duration-[300ms] lg:[transition-timing-function:cubic-bezier(0.5,1,0.89,1)]
|
||||
block relative overflow-hidden mx-auto w-[var(--mobile-width)] max-w-full h-[calc(var(--mobile-height)_-_0rem)] max-h-full
|
||||
lg:w-[var(--desktop-width)] lg:h-[calc(var(--desktop-height)_-_0rem)] lg:max-w-full lg:max-h-full
|
||||
[background-image:var(--image-bg)] bg-size-(--mbg-size) bg-position-(--mbg-position)
|
||||
lg:bg-size-(--bg-size) lg:bg-position-(--bg-position) bg-no-repeat
|
||||
transition-all duration-75 ease-linear lg:duration-300 lg:ease-[cubic-bezier(0.5,1,0.89,1)]
|
||||
block relative overflow-hidden mx-auto w-(--mobile-width) max-w-full h-[calc(var(--mobile-height)-0)] max-h-full
|
||||
lg:w-(--desktop-width) lg:h-[calc(var(--desktop-height)-0)] lg:max-w-full lg:max-h-full
|
||||
${i === picIndex ? `currentPic` : ""} rounded z-0
|
||||
`}
|
||||
/>
|
||||
{caption && zoom.current.zoomLevel === 1 && <span className={`block text-[0.8rem] w-full bg-[#000]/50 text-white px-3 py-[10px] lg:w-[calc(100%_+_0rem)] absolute rounded-b ${showCaption ? "translate-y-0" : "translate-y-full"} transition-transform duration-[200ms] [transition-timing-function:cubic-bezier(0.15,_0.98,0.98,_1)] bottom-0 left-0 text-center lg:py-3 lg:px-3 [text-shadow:0px_0px_1px_#444] lg:[text-shadow:none] lg:text-lg lg:bg-secondary/60 lg:text-white capitalize`}>{captionTitle ? captionTitle : item.directus_files_id.description}</span>}
|
||||
{caption && zoom.current.zoomLevel === 1 && <span className={`block text-[0.8rem] w-full bg-black/50 text-white px-3 py-[10px] lg:w-[calc(100%+0)] absolute rounded-b ${showCaption ? "translate-y-0" : "translate-y-full"} transition-transform duration-200 ease-[cubic-bezier(0.15,0.98,0.98,1)] bottom-0 left-0 text-center lg:py-3 lg:px-3 [text-shadow:0px_0px_1px_#444] lg:text-shadow-none lg:text-lg lg:bg-secondary/60 lg:text-white capitalize`}>{captionTitle ? captionTitle : item.directus_files_id.description}</span>}
|
||||
</div>
|
||||
{/* <div className="block w-full top-16 absolute text-white lg:hidden z-0">
|
||||
<button id="log" onClick={enableLog}>Start/Stop event logging</button>
|
||||
@ -539,7 +539,7 @@ const Gallery: React.FunctionComponent<Gallery> = ({ className, onClose, id, ite
|
||||
items={items}
|
||||
onChange={(i) => setPicIndex(i)}
|
||||
activeThumb={picIndex}
|
||||
className="absolute bottom-16 lg:bottom-0 bg-[var(--m-theme)] lg:bg-secondary"
|
||||
className="absolute bottom-16 lg:bottom-0 bg-(--m-theme) lg:bg-secondary"
|
||||
isGalleryOpen={isOpen}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -37,7 +37,7 @@ const Thumbs: React.FunctionComponent<Thumbs> = ({ items, className, onChange, i
|
||||
const imagesWrapper = useMemo(() =>
|
||||
<>
|
||||
{items.map((item, i) => (
|
||||
<div onClick={() => changePic(i)} className={`block w-32 shrink-0 grow-0 mr-2 ltr:last:mr-0 rtl:first:mr-0 lg:select-none rounded-md lg:hover:brightness-90 ${i === activeThumb ? `${id}-active-thumb` + " ring-[3px] ring-light-red" : ""}`} key={item.directus_files_id.id + i}>
|
||||
<div onClick={() => changePic(i)} className={`block w-32 shrink-0 grow-0 mr-2 last:ltr:mr-0 first:rtl:mr-0 lg:select-none rounded-md lg:hover:brightness-90 ${i === activeThumb ? `${id}-active-thumb` + " ring-[3px] ring-light-red" : ""}`} key={item.directus_files_id.id + i}>
|
||||
<Image
|
||||
src={item.directus_files_id.id}
|
||||
alt={item.directus_files_id.description}
|
||||
@ -47,7 +47,7 @@ const Thumbs: React.FunctionComponent<Thumbs> = ({ items, className, onChange, i
|
||||
ar={[3/2, 3/2, 3/2, 3/2]}
|
||||
imageSizes={[128, 128, 128, 128]}
|
||||
priority={false}
|
||||
className="rounded md:cursor-pointer pointer-events-none"
|
||||
className="rounded-sm md:cursor-pointer pointer-events-none"
|
||||
figureClass="md:cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
@ -57,7 +57,7 @@ const Thumbs: React.FunctionComponent<Thumbs> = ({ items, className, onChange, i
|
||||
|
||||
|
||||
return (
|
||||
<div className={`block w-full hide-scrollbar overflow-x-auto px-2 py-4 lg:w-full rounded-b rtl:[direction:rtl] ${className}`}>
|
||||
<div className={`block w-full hide-scrollbar overflow-x-auto px-2 py-4 lg:w-full rounded-b rtl:rtl ${className}`}>
|
||||
<div className="flex flex-row items-center justify-center w-max mx-auto">
|
||||
{imagesWrapper}
|
||||
</div>
|
||||
|
||||
@ -9,7 +9,7 @@ interface TranslatableFieldsInfoProps {
|
||||
textClass?: string;
|
||||
}
|
||||
|
||||
export const formInputClass = "block w-full py-3 px-4 rounded-xl bg-billboard-input text-xs/5 md:text-sm/6 placeholder:text-xs/5 text-secondary-light outline-none ring-1 ring-billboard-input-ring focus:ring-2 focus:ring-[var(--brand-color)]";
|
||||
export const formInputClass = "block w-full py-3 px-4 rounded-xl bg-billboard-input text-xs/5 md:text-sm/6 placeholder:text-xs/5 text-secondary-light outline-hidden ring-1 ring-billboard-input-ring focus:ring-2 focus:ring-(--brand-color)";
|
||||
|
||||
export const formErrors = (translate: (token: string) => string) => ({
|
||||
necessaryFields: translate("all-fields-necessary-error"),
|
||||
@ -48,9 +48,9 @@ export const TranslatableFieldsInfo = ({ onLangSwitch, wrapperClass, textClass }
|
||||
options={[{ label: translate("persian"), value: "fa", disabled: false }, { label: translate("english"), value: "en", disabled: false }]}
|
||||
onChange={handleLangSelect}
|
||||
optionsWrapper="inline-block w-full px-2 rounded-lg bg-white capitalize text-sm py-2 lg:cursor-pointer"
|
||||
optionClass="!text-xs"
|
||||
buttonWrapper="!ring-0 bg-white"
|
||||
buttonText="!text-sm"
|
||||
optionClass="text-xs!"
|
||||
buttonWrapper="ring-0! bg-white"
|
||||
buttonText="text-sm!"
|
||||
wrapperClass="block w-36 bg-market-input rounded-xl py-1 px-1 mt-4"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -58,11 +58,11 @@ const Photo: React.FunctionComponent<Photo> = ({ item, id, onRemove, isDraggable
|
||||
ref={setNodeRef}
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
className={`flex items-center flex-col text-xs md:text-[13px] text-primary select-none cursor-none lg:cursor-auto bg-white p-1 lg:p-2 rounded lg:rounded-lg ring-1 ring-neutral-100 ${wrapperClass}`}
|
||||
className={`flex items-center flex-col text-xs md:text-[13px] text-primary select-none cursor-none lg:cursor-auto bg-white p-1 lg:p-2 rounded-sm lg:rounded-lg ring-1 ring-neutral-100 ${wrapperClass}`}
|
||||
style={inlineStyles}
|
||||
>
|
||||
<div className={`relative ${!draggable ? "[&>img]:hover:opacity-50 [&>svg]:hover:visible" : ""} cursor-none lg:cursor-pointer`} onClick={handleRemove}>
|
||||
<XmarkSolid className={`${!draggable ? "inline-block lg:invisible" : "hidden"} absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 z-10 w-8 h-8 lg:w-8 lg:h-8 bg-market-title-light fill-white rounded-full p-2 shadow`} />
|
||||
<div className={`relative ${!draggable ? "hover:[&>img]:opacity-50 hover:[&>svg]:visible" : ""} cursor-none lg:cursor-pointer`} onClick={handleRemove}>
|
||||
<XmarkSolid className={`${!draggable ? "inline-block lg:invisible" : "hidden"} absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 z-10 w-8 h-8 lg:w-8 lg:h-8 bg-market-title-light fill-white rounded-full p-2 shadow-sm`} />
|
||||
<img src={item.src} className={`block mx-auto w-full object-contain rounded-t-sm rounded-b-sm lg:rounded-t lg:rounded-b-sm aspect-3/2 ${draggable ? "" : "ring-4 scale-95 ring-market-border max-lg:opacity-50"} ${imageClass}`} />
|
||||
</div>
|
||||
<span className="block text-center text-[10px]/4 sm:text-sm font-semibold [direction:ltr] mt-2">{item.name.slice(0, 20)}</span>
|
||||
|
||||
@ -38,8 +38,8 @@ const LoginNeeded = ({ wrapperClass, itemClass, handleClass, isVisible = false,
|
||||
|
||||
|
||||
return (
|
||||
<ClickOutside handleClass={`login-needed-handle-${handleClass}`} className={`!p-0 !shadow-none ${itemClass}`} onClickOutside={handleClickOutside}>
|
||||
<div className={`${show ? "visible -translate-y-4" : "invisible"} select-none block p-2 transition-transform duration-500 [transition-timing-function:cubic-bezier(0.2,1,0.3,1)] bottom-12 bg-market-input w-80 sm:w-96 absolute shadow-lg left-1/2 -translate-x-1/2 rounded-xl z-20`}>
|
||||
<ClickOutside handleClass={`login-needed-handle-${handleClass}`} className={`p-0! shadow-none! ${itemClass}`} onClickOutside={handleClickOutside}>
|
||||
<div className={`${show ? "visible -translate-y-4" : "invisible"} select-none block p-2 transition-transform duration-500 ease-[cubic-bezier(0.2,1,0.3,1)] bottom-12 bg-market-input w-80 sm:w-96 absolute shadow-lg left-1/2 -translate-x-1/2 rounded-xl z-20`}>
|
||||
<div className="flex flex-col space-y-4 sm:space-y-6 items-center justify-center p-4 bg-white rounded-lg">
|
||||
<span className="block text-xs/6 sm:text-sm/7 text-center">{translate("login-needed-text")}</span>
|
||||
<Button
|
||||
|
||||
@ -47,13 +47,13 @@ const Pagination: React.FunctionComponent<PaginationProps> = ({ itemsCount, acti
|
||||
|
||||
return (
|
||||
<div className={`flex items-center mx-auto space-x-2 [direction:ltr] select-none ${wrapperClass}`}>
|
||||
<ChevronLeftSolid className={`reactive-button inline-block shadow size-10 lg:size-10 fill-current lg:cursor-pointer rtl:ml-2 ltr:mr-2 lg:rtl:ml-2 lg:ltr:mr-2 p-3 bg-white text-secondary-light hover:text-[var(--brand-color)] rounded-lg ${prevClass}`} onClick={handlePrev} />
|
||||
<div className={`flex items-center justify-center w-16 space-x-1 py-2 px-2 rounded-lg bg-white shadow ${counterClass}`}>
|
||||
<span className="inline-block text-base font-semibold text-[var(--brand-color)]">{`${active}`}</span>
|
||||
<ChevronLeftSolid className={`reactive-button inline-block shadow-sm size-10 lg:size-10 fill-current lg:cursor-pointer rtl:ml-2 ltr:mr-2 lg:rtl:ml-2 lg:ltr:mr-2 p-3 bg-white text-secondary-light hover:text-(--brand-color) rounded-lg ${prevClass}`} onClick={handlePrev} />
|
||||
<div className={`flex items-center justify-center w-16 space-x-1 py-2 px-2 rounded-lg bg-white shadow-sm ${counterClass}`}>
|
||||
<span className="inline-block text-base font-semibold text-(--brand-color)">{`${active}`}</span>
|
||||
<span className="inline-block text-base font-semibold text-gray-300">/</span>
|
||||
<span className="inline-block text-base font-semibold text-gray-300">{`${numberOfPages}`}</span>
|
||||
</div>
|
||||
<ChevronRightSolid className={`reactive-button inline-block shadow size-10 lg:size-10 fill-current lg:cursor-pointer rtl:ml-2 ltr:mr-2 lg:rtl:ml-2 lg:ltr:mr-2 p-3 bg-white text-secondary-light hover:text-[var(--brand-color)] rounded-lg ${nextClass}`} onClick={handleNext} />
|
||||
<ChevronRightSolid className={`reactive-button inline-block shadow-sm size-10 lg:size-10 fill-current lg:cursor-pointer rtl:ml-2 ltr:mr-2 lg:rtl:ml-2 lg:ltr:mr-2 p-3 bg-white text-secondary-light hover:text-(--brand-color) rounded-lg ${nextClass}`} onClick={handleNext} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -43,7 +43,7 @@ const ProgressBar: React.FC<ProgressBarProps> = ({
|
||||
<div className={`block w-full h-1 ${bgColor} overflow-hidden ${barClass}`}>
|
||||
<div
|
||||
style={{ width: `${progress}%`, "--duration": `${duration}ms` } as React.CSSProperties}
|
||||
className={`${fillColor} h-full transition-all duration-[var(--duration)] ${easeType} ${fillClass}`}
|
||||
className={`${fillColor} h-full transition-all duration-(--duration) ${easeType} ${fillClass}`}
|
||||
></div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -115,11 +115,11 @@ const Schedule: React.FC<ScheduleProps> = ({
|
||||
open={popupOpen}
|
||||
onClose={handleCloseModal}
|
||||
title={translate("dashboard-billboard-edit-hours-add-day")}
|
||||
className={`flex flex-col bg-white w-[90vw] h-auto max-h-[80vh] lg:w-auto lg:h-auto lg:min-w-[500px] lg:max-w-[90vw] lg:max-h-[90vh] rounded ${wrapperClass}`}
|
||||
className={`flex flex-col bg-white w-[90vw] h-auto max-h-[80vh] lg:w-auto lg:h-auto lg:min-w-[500px] lg:max-w-[90vw] lg:max-h-[90vh] rounded-sm ${wrapperClass}`}
|
||||
childrenClass="lg:flierland-scrollbar overflow-visible"
|
||||
headerClass="!h-12"
|
||||
headerClass="h-12!"
|
||||
titleClass="text-base"
|
||||
closeClass="!size-6"
|
||||
closeClass="size-6!"
|
||||
style={themeStyles}
|
||||
>
|
||||
<div className="block w-full sm:w-[500px] p-gi">
|
||||
@ -134,7 +134,7 @@ const Schedule: React.FC<ScheduleProps> = ({
|
||||
onChange={(data) => handleDaySelection(data.value)}
|
||||
optionsWrapper="inline-block w-full px-2 rounded-lg bg-white capitalize text-sm py-1"
|
||||
wrapperClass="block bg-neutral-50 rounded-xl py-2 px-2"
|
||||
buttonText="!text-sm"
|
||||
buttonText="text-sm!"
|
||||
/>
|
||||
</div>
|
||||
<div className={`block mt-4 ${isClosed ? "opacity-30 pointer-events-none" : ""}`}>
|
||||
@ -162,21 +162,21 @@ const Schedule: React.FC<ScheduleProps> = ({
|
||||
value="closed"
|
||||
checked={isClosed}
|
||||
onChange={handleIsClosed}
|
||||
labelClass="flex items-center w-max mt-8 capitalize [&>span.checkmark]:hover:bg-[var(--light-brand-color)] mb-4 [&.checked_span.checkmark]:!bg-[var(--brand-color)]"
|
||||
labelClass="flex items-center w-max mt-8 capitalize hover:[&>span.checkmark]:bg-(--light-brand-color) mb-4 [&.checked_span.checkmark]:bg-(--brand-color)!"
|
||||
titleClass="rtl:pr-8 ltr:pl-8 text-sm capitalize lg:text-sm text-text-gray font-semibold"
|
||||
inputClass="size-5 bg-[var(--super-light-brand-color)] shadow-inner rounded after:w-[7px] after:h-[13px] after:-mt-[2px] after:border-b-[3px] after:border-r-[3px] after:rounded-[1px] after:border-white"
|
||||
inputClass="size-5 bg-(--super-light-brand-color) shadow-inner rounded-sm after:w-[7px] after:h-[13px] after:mt-[-2px] after:border-b-[3px] after:border-r-[3px] after:rounded-[1px] after:border-white"
|
||||
/>
|
||||
<div className="grid grid-cols-2 gap-4 px-2 pt-8">
|
||||
<Button
|
||||
type="button"
|
||||
text={translate("confirm")}
|
||||
className="bg-[var(--brand-color)] text-white text-sm md:text-base capitalize shadow-none w-full px-[10px] pt-[6px] pb-[6px] md:px-3 md:py-2 inline-flex justify-center items-center rounded-xl rtl:ml-2 ltr:mr-2 rtl:lg:ml-3 ltr:lg:mr-3"
|
||||
className="bg-(--brand-color) text-white text-sm md:text-base capitalize shadow-none w-full px-[10px] pt-[6px] pb-[6px] md:px-3 md:py-2 inline-flex justify-center items-center rounded-xl rtl:ml-2 ltr:mr-2 lg:rtl:ml-3 lg:ltr:mr-3"
|
||||
onClick={handleDaySchedule}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
text={translate("cancel")}
|
||||
className="bg-white text-[var(--brand-color)] ring-1 ring-[var(--brand-color)] text-sm md:text-base capitalize shadow-none w-full px-[10px] pt-[6px] pb-[6px] md:px-3 md:py-2 inline-flex justify-center items-center rounded-xl"
|
||||
className="bg-white text-(--brand-color) ring-1 ring-(--brand-color) text-sm md:text-base capitalize shadow-none w-full px-[10px] pt-[6px] pb-[6px] md:px-3 md:py-2 inline-flex justify-center items-center rounded-xl"
|
||||
onClick={handleCloseModal}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -105,9 +105,9 @@ const Image: React.FunctionComponent<Image> = ({ caption, ar = [1.91 / 1, 1.91 /
|
||||
<div
|
||||
className={`flex items-center justify-center text-gray-500 font-semibold bg-market-input/70 rounded mx-auto
|
||||
${type === "magazine" ?
|
||||
'max-h-[400px] sm:max-h-[500px] max-w-[var(--realWidth)] w-auto aspect-[var(--realAr)]'
|
||||
'max-h-[400px] sm:max-h-[500px] max-w-(--realWidth) w-auto aspect-(--realAr)'
|
||||
:
|
||||
'max-h-[var(--h1)] aspect-[var(--r1)] sm:max-h-[var(--h2)] sm:aspect-[var(--r2)] lg:max-h-[var(--h3)] lg:aspect-[var(--r3)] 2xl:max-h-[var(--h4)] 2xl:aspect-[var(--r4)] w-full h-full'
|
||||
'max-h-(--h1) aspect-(--r1) sm:max-h-(--h2) sm:aspect-(--r2) lg:max-h-(--h3) lg:aspect-(--r3) 2xl:max-h-(--h4) 2xl:aspect-(--r4) w-full h-full'
|
||||
}
|
||||
`}
|
||||
>
|
||||
@ -121,7 +121,7 @@ const Image: React.FunctionComponent<Image> = ({ caption, ar = [1.91 / 1, 1.91 /
|
||||
<img
|
||||
loading={priority ? 'eager' : 'lazy'}
|
||||
fetchpriority={fetchPriority}
|
||||
className={`absolute top-0 bottom-0 left-0 right-0 ${type === "magazine" ? 'w-auto max-w-[var(--realWidth)] h-full max-h-[400px] sm:max-h-[500px] aspect-[var(--realAr)] object-contain mx-auto' : 'w-full h-full object-cover'} ${className}`}
|
||||
className={`absolute top-0 bottom-0 left-0 right-0 ${type === "magazine" ? 'w-auto max-w-(--realWidth) h-full max-h-[400px] sm:max-h-[500px] aspect-(--realAr) object-contain mx-auto' : 'w-full h-full object-cover'} ${className}`}
|
||||
src={flierlandLoader(1024, fit)}
|
||||
alt={alt}
|
||||
title={title}
|
||||
|
||||
@ -110,7 +110,7 @@ const TextArea: React.FunctionComponent<TextArea> = ({
|
||||
disabled={disabled}
|
||||
{...props}
|
||||
/>
|
||||
{maxChar && <span className={`absolute ltr:right-2 rtl:left-2 px-3 pt-[2px] ${maxChar - LetterCounter(inputValue) < 10 ? "bg-rose-200 text-error-text" : "bg-market-input text-market-title-light"} rounded text-sm shrink-0 ${maxCharClass}`}>{charCount}</span>}
|
||||
{maxChar && <span className={`absolute ltr:right-2 rtl:left-2 px-3 pt-[2px] ${maxChar - LetterCounter(inputValue) < 10 ? "bg-rose-200 text-error-text" : "bg-market-input text-market-title-light"} rounded-sm text-sm shrink-0 ${maxCharClass}`}>{charCount}</span>}
|
||||
{(clear && inputValue !== "") && <XMark className={`inline-block absolute lg:cursor-pointer ${clearClass}`} onClick={handleClear} />}
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -124,7 +124,7 @@ const Input: React.FunctionComponent<Input> = ({
|
||||
disabled={disabled}
|
||||
{...props}
|
||||
/>
|
||||
{maxChar && <span className={`absolute ltr:right-2 rtl:left-2 px-3 pt-[2px] ${maxChar - LetterCounter(inputValue) < 10 ? "bg-rose-200 text-error-text" : "bg-market-input text-market-title-light"} rounded text-sm shrink-0 ${maxCharClass}`}>{charCount}</span>}
|
||||
{maxChar && <span className={`absolute ltr:right-2 rtl:left-2 px-3 pt-[2px] ${maxChar - LetterCounter(inputValue) < 10 ? "bg-rose-200 text-error-text" : "bg-market-input text-market-title-light"} rounded-sm text-sm shrink-0 ${maxCharClass}`}>{charCount}</span>}
|
||||
{unit && <span className={`input-unit shrink-0 ${unitClass}`}>{unit}</span>}
|
||||
{(clear && inputValue !== "") && <XMark className={`inline-block absolute lg:cursor-pointer ${clearClass}`} onClick={handleClear} />}
|
||||
{(type === "password" && inputValue !== "") ?
|
||||
|
||||
@ -183,7 +183,7 @@ const TimePicker: React.FunctionComponent<TimePickerProps> = ({
|
||||
maxLength={2}
|
||||
step={HourStep}
|
||||
placeholder="00"
|
||||
className="outline-none bg-market-input rounded-lg text-center py-1 px-2 text-sm [direction:ltr] text-market-title-light font-semibold placeholder:text-market-border"
|
||||
className="outline-hidden bg-market-input rounded-lg text-center py-1 px-2 text-sm [direction:ltr] text-market-title-light font-semibold placeholder:text-market-border"
|
||||
onInput={(value) => handleInput(value, "startHour")}
|
||||
onLoad={(value) => pickerInputRef.current.startHour = value}
|
||||
onBlur={() => handleInputBlur("startHour")}
|
||||
@ -199,7 +199,7 @@ const TimePicker: React.FunctionComponent<TimePickerProps> = ({
|
||||
maxLength={2}
|
||||
step={minuteStep}
|
||||
placeholder="00"
|
||||
className="outline-none bg-market-input rounded-lg text-center py-1 px-2 text-sm [direction:ltr] text-market-title-light font-semibold placeholder:text-market-border"
|
||||
className="outline-hidden bg-market-input rounded-lg text-center py-1 px-2 text-sm [direction:ltr] text-market-title-light font-semibold placeholder:text-market-border"
|
||||
onInput={(value) => handleInput(value, "startMinute")}
|
||||
onLoad={(value) => pickerInputRef.current.startMinute = value}
|
||||
onBlur={() => handleInputBlur("startMinute")}
|
||||
@ -231,7 +231,7 @@ const TimePicker: React.FunctionComponent<TimePickerProps> = ({
|
||||
maxLength={2}
|
||||
step={HourStep}
|
||||
placeholder="00"
|
||||
className="outline-none bg-market-input rounded-lg text-center py-1 px-2 text-sm [direction:ltr] text-market-title-light font-semibold placeholder:text-market-border"
|
||||
className="outline-hidden bg-market-input rounded-lg text-center py-1 px-2 text-sm [direction:ltr] text-market-title-light font-semibold placeholder:text-market-border"
|
||||
onInput={(value) => handleInput(value, "endHour")}
|
||||
onLoad={(value) => pickerInputRef.current.endHour = value}
|
||||
onBlur={() => handleInputBlur("endHour")}
|
||||
@ -247,7 +247,7 @@ const TimePicker: React.FunctionComponent<TimePickerProps> = ({
|
||||
maxLength={2}
|
||||
step={minuteStep}
|
||||
placeholder="00"
|
||||
className="outline-none bg-market-input rounded-lg text-center py-1 px-2 text-sm [direction:ltr] text-market-title-light font-semibold placeholder:text-market-border"
|
||||
className="outline-hidden bg-market-input rounded-lg text-center py-1 px-2 text-sm [direction:ltr] text-market-title-light font-semibold placeholder:text-market-border"
|
||||
onInput={(value) => handleInput(value, "endMinute")}
|
||||
onLoad={(value) => pickerInputRef.current.endMin = value}
|
||||
onBlur={() => handleInputBlur("endMinute")}
|
||||
|
||||
@ -12,8 +12,8 @@ const InnerLoading: React.FunctionComponent<InnerLoading> = ({ loadingText, widt
|
||||
|
||||
// const [isOpen, setIsOpen] = useState(true);
|
||||
|
||||
return <div style={{ "--width": width, "--height": height, "--color": color } as React.CSSProperties} className={`flex items-center justify-center w-[var(--width)] h-[var(--height)] mx-auto py-5 px-6 lg:py-4 lg:px-8 ${className}`}>
|
||||
<SpinningRing className={`inline-block shrink-0 w-16 h-16 ${color ? "fill-[var(--color)]" : "fill-market-title-light"} lg:cursor-pointer rounded-full bg-transparent p-2`} />
|
||||
return <div style={{ "--width": width, "--height": height, "--color": color } as React.CSSProperties} className={`flex items-center justify-center w-(--width) h-(--height) mx-auto py-5 px-6 lg:py-4 lg:px-8 ${className}`}>
|
||||
<SpinningRing className={`inline-block shrink-0 w-16 h-16 ${color ? "fill-(--color)" : "fill-market-title-light"} lg:cursor-pointer rounded-full bg-transparent p-2`} />
|
||||
</div>
|
||||
}
|
||||
export default InnerLoading
|
||||
|
||||
@ -9,7 +9,7 @@ interface UniversalLoading {
|
||||
const UniversalLoading: React.FunctionComponent<UniversalLoading> = ({ size, className }) => {
|
||||
const { locale } = useGetRouter();
|
||||
|
||||
return <div style={{ "width": size, "height": size } as React.CSSProperties} className={`flex items-center justify-center bg-white z-[1000] size-12 sm:size-16 fixed top-20 left-1/2 -translate-x-1/2 py-1 px-1 lg:py-1 lg:px-1 shadow rounded-full ${className}`}>
|
||||
return <div style={{ "width": size, "height": size } as React.CSSProperties} className={`flex items-center justify-center bg-white z-1000 size-12 sm:size-16 fixed top-20 left-1/2 -translate-x-1/2 py-1 px-1 lg:py-1 lg:px-1 shadow-sm rounded-full ${className}`}>
|
||||
<SpinningRing className={`block size-full fill-light-red rounded-full bg-transparent p-[2px]`} />
|
||||
</div>
|
||||
}
|
||||
|
||||
@ -145,7 +145,7 @@ const Modal: React.FunctionComponent<Modal> = ({
|
||||
<XMark onClick={closeModal} className={`w-8 h-8 lg:cursor-pointer ${closeClass}`} />
|
||||
</header>
|
||||
)}
|
||||
<div className={`block overflow-auto h-[calc(100%_-_3.5rem)] sm:h-[calc(100%_-_4rem)] ${childrenClass}`}>
|
||||
<div className={`block overflow-auto h-[calc(100%-3.5rem)] sm:h-[calc(100%-4rem)] ${childrenClass}`}>
|
||||
{children}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
@ -147,7 +147,7 @@ const EmailParser: React.FunctionComponent<EmailParser> = ({ text, limit, classN
|
||||
return <H6 key={x.props.children + x.type + Math.random()} text={x.props.children} />
|
||||
}
|
||||
if (x.type === 'ul') {
|
||||
return <ul key={x.type + Math.random()} className="pb-2 px-3 rounded">
|
||||
return <ul key={x.type + Math.random()} className="pb-2 px-3 rounded-sm">
|
||||
{x.props.children.map((x: any, i: number) => {
|
||||
if (x.type === 'li') {
|
||||
return <li key={i} className="text-sm/6 lg:text-base/8 mb-2 rtl:text-right ltr:text-left [&>p]:inline"><span className="text-xl/8 rtl:pl-[6px] ltr:pr-[6px] font-bold text-primary">›</span>
|
||||
@ -166,7 +166,7 @@ const EmailParser: React.FunctionComponent<EmailParser> = ({ text, limit, classN
|
||||
</ul>
|
||||
}
|
||||
if (x.type === 'ol') {
|
||||
return <ol key={x.type + Math.random()} className="pb-2 rounded list-decimal list-inside">
|
||||
return <ol key={x.type + Math.random()} className="pb-2 rounded-sm list-decimal list-inside">
|
||||
{x.props.children.map((x: any, i: number) => {
|
||||
if (x.type === 'li') {
|
||||
return <li key={i} className="text-sm lg:text-base/8 mb-3 rtl:text-right ltr:text-left [&>p]:inline">
|
||||
@ -226,7 +226,7 @@ const EmailParser: React.FunctionComponent<EmailParser> = ({ text, limit, classN
|
||||
<div
|
||||
className={`parser block relative min-h-[150px] text-justify ${limit ? "select-none" : "select-auto"} [word-break:break-word] overflow-hidden ${limit && (!show ? `max-h-[400px]`: `max-h-full`)} ${className}`}
|
||||
>
|
||||
{limit && <span id="text-start" className="block absolute -top-[120px]"></span>}
|
||||
{limit && <span id="text-start" className="block absolute top-[-120px]"></span>}
|
||||
{elements}
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -63,7 +63,7 @@ const Parser: React.FunctionComponent<Parser> = ({ text, limit, className, showM
|
||||
return <span className=" leading-8">{text}</span>
|
||||
}
|
||||
const Video = ({ text }: ListItem, ...props: any) => {
|
||||
return <div className="flex items-center justify-center w-[calc(100vw_-_2.5rem)] lg:w-full mx-auto py-4 my-4 sm:py-8 sm:my-8 rounded-lg
|
||||
return <div className="flex items-center justify-center w-[calc(100vw-2.5rem)] lg:w-full mx-auto py-4 my-4 sm:py-8 sm:my-8 rounded-lg
|
||||
[backgroundImage:url('/pics/patterns/tech-pattern.jpg')]
|
||||
bg-no-repeat [backgroundSize:100%_auto] rtl:[backgroundPosition:65%_100%] ltr:[backgroundPosition:40%_100%]">
|
||||
<ReactPlayer controls url={text} />
|
||||
@ -100,7 +100,7 @@ const Parser: React.FunctionComponent<Parser> = ({ text, limit, className, showM
|
||||
ar={[16 / 9, 16 / 9, 16 / 9, 16 / 9]}
|
||||
imageSizes={[600, 700, 800, 930]}
|
||||
priority={false}
|
||||
className="rounded"
|
||||
className="rounded-sm"
|
||||
figureClass="my-4 mx-auto overflow-hidden cursor-pointer rounded-lg"
|
||||
type="magazine"
|
||||
onClick={() => openGallery(imagesArray.indexOf(imagesArray.filter(x => x.index === index)[0]))}
|
||||
@ -206,7 +206,7 @@ const Parser: React.FunctionComponent<Parser> = ({ text, limit, className, showM
|
||||
return <IMG key={x.type + Math.random()} img={img} index={index} />
|
||||
}
|
||||
if (x.type === 'ul') {
|
||||
return <ul key={x.type + Math.random()} className="pb-2 px-3 rounded">
|
||||
return <ul key={x.type + Math.random()} className="pb-2 px-3 rounded-sm">
|
||||
{x.props.children.map((x: any, i: number) => {
|
||||
if (x.type === 'li') {
|
||||
return <li key={i} className="text-sm/6 lg:text-base/8 mb-2 rtl:text-right ltr:text-left [&>p]:inline"><span className="text-xl/8 rtl:pl-[6px] ltr:pr-[6px] font-bold text-primary">›</span>
|
||||
@ -225,7 +225,7 @@ const Parser: React.FunctionComponent<Parser> = ({ text, limit, className, showM
|
||||
</ul>
|
||||
}
|
||||
if (x.type === 'ol') {
|
||||
return <ol key={x.type + Math.random()} className="pb-2 rounded list-decimal list-inside">
|
||||
return <ol key={x.type + Math.random()} className="pb-2 rounded-sm list-decimal list-inside">
|
||||
{x.props.children.map((x: any, i: number) => {
|
||||
if (x.type === 'li') {
|
||||
return <li key={i} className="text-sm lg:text-base/8 mb-3 rtl:text-right ltr:text-left [&>p]:inline">
|
||||
@ -287,9 +287,9 @@ const Parser: React.FunctionComponent<Parser> = ({ text, limit, className, showM
|
||||
"--limit": limitLength ? `${limitLength / 2}px` : "60px",
|
||||
"--limit-mb": limitLength ? `${limitLength / 1.76}px` : "170px",
|
||||
} as React.CSSProperties}
|
||||
className={`parser block relative min-h-[150px] text-justify ${limit ? "select-none" : "select-auto"} [word-break:break-word] overflow-hidden ${limit && (!show ? `max-h-[var(--limit-mb)] lg:max-h-[var(--limit)]` : `max-h-full`)} ${className}`}
|
||||
className={`parser block relative min-h-[150px] text-justify ${limit ? "select-none" : "select-auto"} [word-break:break-word] overflow-hidden ${limit && (!show ? `max-h-(--limit-mb) lg:max-h-(--limit)` : `max-h-full`)} ${className}`}
|
||||
>
|
||||
{limit && <span id="text-start" className="block absolute -top-[120px]"></span>}
|
||||
{limit && <span id="text-start" className="block absolute top-[-120px]"></span>}
|
||||
{elements}
|
||||
<Gallery
|
||||
open={showGallery}
|
||||
@ -299,7 +299,7 @@ const Parser: React.FunctionComponent<Parser> = ({ text, limit, className, showM
|
||||
onClose={(i) => closeGallery(i)}
|
||||
caption
|
||||
/>
|
||||
{limit && text.length > limitLength && <span onClick={toggleShow} className={`flex text-blue-800 items-end justify-center absolute font-semibold right-0 ${!show ? "bottom-0 h-[92px]" : "relative bottom-auto top-0"} text-sm lg:text-base lg:cursor-pointer bg-gradient-to-t from-white via-white w-full p-2 pb-4 ${showMoreClass}`}>
|
||||
{limit && text.length > limitLength && <span onClick={toggleShow} className={`flex text-blue-800 items-end justify-center absolute font-semibold right-0 ${!show ? "bottom-0 h-[92px]" : "relative bottom-auto top-0"} text-sm lg:text-base lg:cursor-pointer bg-linear-to-t from-white via-white w-full p-2 pb-4 ${showMoreClass}`}>
|
||||
{!show ? showMoreText : showLessText}
|
||||
<span className={`inline-block text-2xl text-blue-800 font-semibold ${!show ? "rtl:-rotate-90 ltr:rotate-90" : "rtl:rotate-90 ltr:-rotate-90"} relative -mb-1 rtl:mr-2 ltr:ml-2`}>›</span>
|
||||
</span>}
|
||||
|
||||
@ -56,7 +56,7 @@ const EventAlert: React.FunctionComponent<EventAlertProps> = ({ title, text, pic
|
||||
}, [open])
|
||||
|
||||
return (
|
||||
<div className={`${isOpen ? 'flex' : 'hidden'} justify-center fixed will-change-transform items-center top-0 bottom-0 left-0 right-0 mx-auto z-[1000] w-screen h-screen`}>
|
||||
<div className={`${isOpen ? 'flex' : 'hidden'} justify-center fixed will-change-transform items-center top-0 bottom-0 left-0 right-0 mx-auto z-1000 w-screen h-screen`}>
|
||||
<div
|
||||
className={`${isOpen ? 'bg-black/30 backdrop-blur-[3px]' : ''} block absolute w-full h-full top-0 bottom-0 z-50`}
|
||||
onClick={closeHandler}
|
||||
@ -76,20 +76,20 @@ const EventAlert: React.FunctionComponent<EventAlertProps> = ({ title, text, pic
|
||||
{hasTime ?
|
||||
<ProgressBar
|
||||
active={isOpen}
|
||||
bgColor="bg-[var(--light-color)]"
|
||||
fillColor="bg-[var(--color)]"
|
||||
bgColor="bg-(--light-color)"
|
||||
fillColor="bg-(--color)"
|
||||
duration={timeOut}
|
||||
easeType="ease-linear"
|
||||
barClass="rounded"
|
||||
barClass="rounded-sm"
|
||||
/>
|
||||
:
|
||||
<hr className="block w-full h-[1px] gray-200/75" />
|
||||
<hr className="block w-full h-px gray-200/75" />
|
||||
}
|
||||
</div>
|
||||
{hasCta && <Button
|
||||
type="button"
|
||||
text={ctaText ?? translate("ok")}
|
||||
className="min-w-32 rounded-full bg-[var(--color)] text-white text-sm py-2 px-2 mt-2 shadow-none capitalize"
|
||||
className="min-w-32 rounded-full bg-(--color) text-white text-sm py-2 px-2 mt-2 shadow-none capitalize"
|
||||
onClick={closeHandler}
|
||||
/>}
|
||||
</div>
|
||||
|
||||
@ -30,16 +30,16 @@ const Popover: React.FunctionComponent<Popover> = ({ content, open = false, onCl
|
||||
let location = '';
|
||||
switch (position) {
|
||||
case 'top':
|
||||
location = '-top-[calc(100%_+_0.2rem)] left-1/2 transform -translate-x-1/2';
|
||||
location = '-top-[calc(100%+0.2rem)] left-1/2 transform -translate-x-1/2';
|
||||
break;
|
||||
case 'bottom':
|
||||
location = '-bottom-[calc(100%_+_0.2rem)] left-1/2 transform -translate-x-1/2';
|
||||
location = '-bottom-[calc(100%+0.2rem)] left-1/2 transform -translate-x-1/2';
|
||||
break;
|
||||
case 'left':
|
||||
location = '-left-[calc(100%_+_0.2rem)] top-1/2 transform translate-x-1/2 -translate-y-1/2';
|
||||
location = '-left-[calc(100%+0.2rem)] top-1/2 transform translate-x-1/2 -translate-y-1/2';
|
||||
break;
|
||||
case 'right':
|
||||
location = '-right-[calc(100%_+_0.2rem)] top-1/2 transform -translate-x-1/2 -translate-y-1/2';
|
||||
location = '-right-[calc(100%+0.2rem)] top-1/2 transform -translate-x-1/2 -translate-y-1/2';
|
||||
break;
|
||||
|
||||
default:
|
||||
|
||||
@ -20,7 +20,7 @@ const RadioButton: React.FunctionComponent<RadioButton> = ({ children, title, fo
|
||||
|
||||
return (
|
||||
<label htmlFor={forId} className={`${checked ? "checked" : ""} select-none relative lg:cursor-pointer ${labelClass}`}>
|
||||
<input checked={checked} type="checkbox" autoComplete="off" id={forId} name={name} value={value} className={`absolute w-0 h-0 opacity-0 lg:cursor-pointer [&~span.checkmark]:checked:after:block`} onChange={toggleCheckbox}></input>
|
||||
<input checked={checked} type="checkbox" autoComplete="off" id={forId} name={name} value={value} className={`absolute w-0 h-0 opacity-0 lg:cursor-pointer checked:[&~span.checkmark]:after:block`} onChange={toggleCheckbox}></input>
|
||||
<span className={`checkmark absolute top-1/2 right-0 -translate-y-1/2 after:content-[""] after:absolute after:hidden after:top-1/2 after:left-1/2 after:-translate-x-1/2 after:-translate-y-1/2 after:rotate-45 ${inputClass}`}></span>
|
||||
<span className={`${titleClass}`}>{title}</span>
|
||||
</label>
|
||||
|
||||
@ -28,7 +28,7 @@ const StarRating = ({ rating, starsCount = 5, mode = "multiple", className, star
|
||||
:
|
||||
<div key={i} className="inline-block w-full relative">
|
||||
<StarRegular className={`fill-current ${starClass}`} />
|
||||
<div style={{ "--width": `${percentage > 50 ? 55 : percentage}%` } as React.CSSProperties} className="inline-block w-[var(--width)] absolute top-0 ltr:left-0 rtl:right-0 overflow-hidden">
|
||||
<div style={{ "--width": `${percentage > 50 ? 55 : percentage}%` } as React.CSSProperties} className="inline-block w-(--width) absolute top-0 ltr:left-0 rtl:right-0 overflow-hidden">
|
||||
<StarSolid className={`fill-current ${starClass}`} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -251,7 +251,7 @@ const DataList: React.FunctionComponent<DataList> = ({
|
||||
onClose={handleClose}
|
||||
title={`${label}`}
|
||||
onRendered={handleAutofocus}
|
||||
className={`flex flex-col bg-white w-[90vw] h-auto max-h-[70vh] lg:w-auto lg:h-auto lg:min-w-[500px] lg:max-w-[90vw] lg:max-h-[90vh] rounded -top-[10%] lg:top-0 ${modalWrapperClass}`}
|
||||
className={`flex flex-col bg-white w-[90vw] h-auto max-h-[70vh] lg:w-auto lg:h-auto lg:min-w-[500px] lg:max-w-[90vw] lg:max-h-[90vh] rounded-sm top-[-10%] lg:top-0 ${modalWrapperClass}`}
|
||||
childrenClass="lg:flierland-scrollbar"
|
||||
titleClass="text-lg"
|
||||
style={style}
|
||||
|
||||
@ -77,7 +77,7 @@ const Select: React.FunctionComponent<Select> = ({
|
||||
</div>
|
||||
{/* options */}
|
||||
<ClickOutside className="max-sm:hidden" handleClass={`${id + "handle"}`} onClickOutside={() => setOpen(false)}>
|
||||
<ul className={`flierland-scrollbar ${open ? "flex" : "hidden"} flex-col absolute top-full mt-[6px] right-0 bg-white py-1 z-20 min-w-48 w-full max-h-72 overflow-auto shadow rounded-lg ring-1 ring-gray-200/75 ${optionsWrapper}`}>
|
||||
<ul className={`flierland-scrollbar ${open ? "flex" : "hidden"} flex-col absolute top-full mt-[6px] right-0 bg-white py-1 z-20 min-w-48 w-full max-h-72 overflow-auto shadow-sm rounded-lg ring-1 ring-gray-200/75 ${optionsWrapper}`}>
|
||||
{options.map(x => (
|
||||
<li key={x.value} className={`block w-full py-2 px-4 text-sm lg:cursor-pointer select-none hover:bg-market-title-light hover:text-white rounded-md ${optionClass}`} onClick={() => handleChange(x)}>{x.label}</li>
|
||||
))}
|
||||
@ -85,7 +85,7 @@ const Select: React.FunctionComponent<Select> = ({
|
||||
</ClickOutside>
|
||||
<select
|
||||
id={id}
|
||||
className={`block bg-white sm:hidden w-full py-2 px-4 text-sm sm:text-base rounded-lg ring-1 ring-gray-200/75 lg:cursor-pointer outline-none ${optionsWrapper}`}
|
||||
className={`block bg-white sm:hidden w-full py-2 px-4 text-sm sm:text-base rounded-lg ring-1 ring-gray-200/75 lg:cursor-pointer outline-hidden ${optionsWrapper}`}
|
||||
title={title}
|
||||
name={title}
|
||||
onChange={item => handleNativeChange(item.target.value)}
|
||||
|
||||
@ -152,21 +152,21 @@ const Slider: React.FC<SliderProps> = ({
|
||||
className={`relative ${sliderClass}`}
|
||||
>
|
||||
<div className={`overflow-x-hidden p-2 ${viewPortClass}`} ref={emblaRef}>
|
||||
<div className={`[backface-visibility:hidden] flex touch-pan-y ml-[calc(var(--slide-spacing)*-1)] ${containerClass}`}>
|
||||
<div className={`backface-hidden flex touch-pan-y -ml-(--slide-spacing) ${containerClass}`}>
|
||||
{slideType === "percentage" && slides.map((x: any, index: number) => (
|
||||
<div className={`relative min-w-0 pl-[var(--slide-spacing)]
|
||||
[flex:0_0_var(--slides-number)] sm:[flex:0_0_var(--slides-number-sm)]
|
||||
md:[flex:0_0_var(--slides-number-md)] lg:[flex:0_0_var(--slides-number-lg)]
|
||||
xl:[flex:0_0_var(--slides-number-xl)] 2xl:[flex:0_0_var(--slides-number-2xl)]
|
||||
<div className={`relative min-w-0 pl-(--slide-spacing)
|
||||
flex-[0_0_var(--slides-number)] sm:flex-[0_0_var(--slides-number-sm)]
|
||||
md:flex-[0_0_var(--slides-number-md)] lg:flex-[0_0_var(--slides-number-lg)]
|
||||
xl:flex-[0_0_var(--slides-number-xl)] 2xl:flex-[0_0_var(--slides-number-2xl)]
|
||||
${slideClass}`} key={index}>
|
||||
{childComponent(x, index)}
|
||||
</div>
|
||||
))}
|
||||
{slideType === "size" && slides.map((x: any, index: number) => (
|
||||
<div className={`relative min-w-0 ml-[var(--slide-spacing)]
|
||||
[flex:0_0_var(--slides-size-mobile)] sm:[flex:0_0_var(--slides-size-sm)]
|
||||
md:[flex:0_0_var(--slides-size-md)] lg:[flex:0_0_var(--slides-size-lg)]
|
||||
xl:[flex:0_0_var(--slides-size-xl)] 2xl:[flex:0_0_var(--slides-size-2xl)]
|
||||
<div className={`relative min-w-0 ml-(--slide-spacing)
|
||||
flex-[0_0_var(--slides-size-mobile)] sm:flex-[0_0_var(--slides-size-sm)]
|
||||
md:flex-[0_0_var(--slides-size-md)] lg:flex-[0_0_var(--slides-size-lg)]
|
||||
xl:flex-[0_0_var(--slides-size-xl)] 2xl:flex-[0_0_var(--slides-size-2xl)]
|
||||
${slideClass}`} key={index}>
|
||||
{childComponent(x, index)}
|
||||
</div>
|
||||
@ -177,10 +177,10 @@ const Slider: React.FC<SliderProps> = ({
|
||||
<div className={`flex items-center justify-center mt-6 ${controlsContainerClass}`}>
|
||||
{buttons && <div className={`flex items-center justify-between w-full absolute px-4 py-2 ${buttonsWrapperClass}`}>
|
||||
<div className={`absolute top-1/2 -translate-y-1/2 left-0 ${prevClass}`} onClick={scrollPrev}>
|
||||
{buttonIcons.prev ? buttonIcons.prev : <ChevronLeftSolid className={`reactive-button ${prevBtnDisabled ? "pointer-events-none bg-cta/40" : "bg-cta"} text-primary fill-current w-8 h-8 p-2 rounded-full shadow lg:cursor-pointer`} />}
|
||||
{buttonIcons.prev ? buttonIcons.prev : <ChevronLeftSolid className={`reactive-button ${prevBtnDisabled ? "pointer-events-none bg-cta/40" : "bg-cta"} text-primary fill-current w-8 h-8 p-2 rounded-full shadow-sm lg:cursor-pointer`} />}
|
||||
</div>
|
||||
<div className={`absolute top-1/2 -translate-y-1/2 right-0 ${nextClass}`} onClick={scrollNext}>
|
||||
{buttonIcons.next ? buttonIcons.next : <ChevronRightSolid className={`reactive-button ${nextBtnDisabled ? "pointer-events-none bg-cta/40" : "bg-cta"} text-primary fill-current w-8 h-8 p-2 rounded-full shadow lg:cursor-pointer`} />}
|
||||
{buttonIcons.next ? buttonIcons.next : <ChevronRightSolid className={`reactive-button ${nextBtnDisabled ? "pointer-events-none bg-cta/40" : "bg-cta"} text-primary fill-current w-8 h-8 p-2 rounded-full shadow-sm lg:cursor-pointer`} />}
|
||||
</div>
|
||||
</div>}
|
||||
|
||||
@ -190,7 +190,7 @@ const Slider: React.FC<SliderProps> = ({
|
||||
key={index}
|
||||
onClick={() => scrollTo(index)}
|
||||
aria-label={`slide ${index + 1}`}
|
||||
className={`block h-4 w-4 rounded-full shadow-inner cursor-none lg:cursor-pointer hover:lg:bg-market-border ${index === selectedIndex ? "!bg-market-title-light" : "bg-gray-100"}
|
||||
className={`block h-4 w-4 rounded-full shadow-inner cursor-none lg:cursor-pointer lg:hover:bg-market-border ${index === selectedIndex ? "bg-market-title-light!" : "bg-gray-100"}
|
||||
${'slider__dot'.concat(
|
||||
index === selectedIndex ? ' slider__dot--selected' : ''
|
||||
)} ${dotClass}`}
|
||||
|
||||
@ -51,7 +51,7 @@ const SmartTable: React.FunctionComponent<SmartTableProps> = ({ data, title, lab
|
||||
return (
|
||||
<div className={`flex flex-col overflow-x-scroll hide-scrollbar ${className}`}>
|
||||
<ul style={{ gridTemplateColumns: `repeat(${Object.keys(data[0]).length}, minmax(0, 1fr))` }} className={`min-w-[490px] sm:min-w-[780px] md:min-w-[1000px] lg:min-w-0 grid list-none lg:px-4 ${headRowClass}`}>
|
||||
<TableHead text={title} className={`text-sm sm:text-base sticky ltr:left-0 rtl:right-0 max-lg:shadow max-lg:px-4 ${stickyTableHeadClass}`} />
|
||||
<TableHead text={title} className={`text-sm sm:text-base sticky ltr:left-0 rtl:right-0 max-lg:shadow-sm max-lg:px-4 ${stickyTableHeadClass}`} />
|
||||
{Object.keys(data[0]).filter(y => (y !== "title" && y !== "pic")).map((x, index) => (
|
||||
<TableHead key={index} text={labels[x]} className={`text-xs sm:text-sm justify-center ${tableHeadClass}`} />
|
||||
))}
|
||||
@ -59,7 +59,7 @@ const SmartTable: React.FunctionComponent<SmartTableProps> = ({ data, title, lab
|
||||
<ul className={`block list-none min-w-[490px] sm:min-w-[780px] md:min-w-[1000px] lg:min-w-0 ${cellRowClass}`}>
|
||||
{data.map((x:any, i:any) => (
|
||||
<div key={x.title + i} style={{ gridTemplateColumns: `repeat(${Object.keys(data[0]).length}, minmax(0, 1fr))` }} className={`grid w-full lg:px-4 ${rowClass}`} onClick={() => handleClick(x)}>
|
||||
<TableCell className={`sticky ltr:left-0 rtl:right-0 max-lg:shadow max-lg:px-4 ${stickyTableCellClass}`}>
|
||||
<TableCell className={`sticky ltr:left-0 rtl:right-0 max-lg:shadow-sm max-lg:px-4 ${stickyTableCellClass}`}>
|
||||
<span className="font-semibold">{i + 1}</span>
|
||||
<img src={x.pic} alt={x.title + " logo"} className="inline-block size-8 sm:size-9 mx-4 sm:mx-5 object-contain" />
|
||||
<div className="flex flex-col max-sm:space-y-1 sm:flex-row capitalize">
|
||||
|
||||
@ -1,42 +1,427 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@import 'tailwindcss';
|
||||
|
||||
@font-face {
|
||||
font-family: IRANSans;
|
||||
src: local('IRANSans'), url(/fonts/IRANSansWeb.woff2) format("woff2"),
|
||||
url(/fonts/IRANSansWeb.woff) format("woff"),
|
||||
url(/fonts/IRANSansWeb.ttf) format("truetype"),
|
||||
url(/fonts/IRANSansWeb.eot),
|
||||
url(/fonts/IRANSansWeb.eot?#iefix) format("embedded-opentype");
|
||||
unicode-range: 0020-007F, 00A0-00BB, 0600-067F;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
@plugin '@tailwindcss/container-queries';
|
||||
|
||||
@theme {
|
||||
--font-main: IRANSans, sans-serif;
|
||||
|
||||
--color-primary: #e12828;
|
||||
--color-secondary: #2a2e3c;
|
||||
--color-secondary-light: hsl(227deg 20% 36%);
|
||||
--color-sunny: #fedd7c;
|
||||
--color-dark-sunny: #fed766;
|
||||
--color-sky: #1098f7;
|
||||
--color-logo-orange: #ef780c;
|
||||
--color-logo-green: #13668d;
|
||||
--color-season: #ffb7c5;
|
||||
--color-footer: #272d42;
|
||||
--color-digest: #fefcee;
|
||||
--color-digest-border: #c9ba0d;
|
||||
--color-light-red: #f3605d;
|
||||
--color-sup-light: #f1f1f1;
|
||||
--color-border-gray-bottom: #f0f0f0;
|
||||
--color-light-bg: #f8f8f8;
|
||||
--color-icon-color: #757575;
|
||||
--color-title-color: #2b2b2b;
|
||||
--color-text-color: #464040;
|
||||
--color-light-gray: #f5f7fa;
|
||||
--color-dark-gray: #e6e6ea;
|
||||
--color-cool-gray: #b8b5c3;
|
||||
--color-title-gray: #7e849c;
|
||||
--color-text-gray: #8789a2;
|
||||
--color-wheat: hsl(34deg 78% 91%);
|
||||
--color-billboard-input: #516ec205;
|
||||
--color-billboard-input-ring: #ededed;
|
||||
--color-market-primary: #2a2e3c;
|
||||
--color-market-sup: hsl(0deg 0% 95%);
|
||||
--color-market-sup-light: hsl(0deg 0% 97%);
|
||||
--color-market-title: #1e40af;
|
||||
--color-market-title-light: #516ec2;
|
||||
--color-market-title-super-light: #516ec205;
|
||||
--color-market-input: #f3f5fb;
|
||||
--color-market-border: #d1d9f0;
|
||||
--color-scrollbar-thumb: #c3c3ce;
|
||||
--color-scrollbar-track: #f1f2f4;
|
||||
--color-success-bg: rgb(237, 247, 237);
|
||||
--color-success-text: rgb(30, 70, 32);
|
||||
--color-error-bg: rgb(253, 237, 237);
|
||||
--color-error-text: rgb(95, 33, 32);
|
||||
--color-warning-bg: rgb(255, 244, 229);
|
||||
--color-warning-text: rgb(102, 60, 0);
|
||||
--color-info-bg: rgb(229, 246, 253);
|
||||
--color-info-text: rgb(1, 67, 97);
|
||||
--color-ghost-white: #f8f8ff;
|
||||
|
||||
--shadow-strong: 0 2px 10px -2px #d3d3d3;
|
||||
--shadow-top: 0 -1px 4px -2px #d3d3d3;
|
||||
--shadow-top-strong: 0 -3px 8px -4px #d3d3d3;
|
||||
--shadow-bot: 0 3px 4px -3px #cfcfcf;
|
||||
--shadow-card: 0 3px 7px -3px #cfcfcf;
|
||||
--shadow-border: inset 0 0 0 1px #bac8d3;
|
||||
--shadow-focus: inset 0 0 0 2px #1098f7;
|
||||
--shadow-blue-light: 0 10px 24px 0 hsl(216deg 33% 92%);
|
||||
--shadow-cut: 0px 1px 4px -1px inset #afb6c9;
|
||||
|
||||
--aspect-1_91\/1: 1.91 / 1;
|
||||
--aspect-3\/2: 3 / 2;
|
||||
--aspect-4\/3: 4 / 3;
|
||||
--aspect-16\/9: 16 / 9;
|
||||
|
||||
--spacing-gi: 1rem;
|
||||
--spacing-full: 100%;
|
||||
|
||||
--background-image-market-hero-desktop: url('/pics/market/shopping.png');
|
||||
--background-image-market-hero-mobile: url('/pics/market/shopping.png');
|
||||
--background-image-login-page-desktop: url('/pics/bgs/desktop-login-bg.jpg');
|
||||
--background-image-login-page-mobile: url('/pics/bgs/mobile-login-bg.jpg');
|
||||
--background-image-main-default-pic: url('/pics/main-default-pic.webp');
|
||||
--background-image-default-pic: url('/pics/elements_258.jpg');
|
||||
|
||||
@keyframes progress {
|
||||
0%,
|
||||
100% {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@font-face {
|
||||
font-family: IRANSans;
|
||||
src: local('IRANSans'), url(/fonts/IRANSansWeb_Medium.woff2) format("woff2"),
|
||||
url(/fonts/IRANSansWeb_Medium.woff) format("woff"),
|
||||
url(/fonts/IRANSansWeb_Medium.ttf) format("truetype"),
|
||||
url(/fonts/IRANSansWeb_Medium.eot),
|
||||
url(/fonts/IRANSansWeb_Medium.eot?#iefix) format("embedded-opentype");
|
||||
unicode-range: 0020-007F, 00A0-00BB, 0600-067F;
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
|
||||
/*
|
||||
The default border color has changed to `currentcolor` in Tailwind CSS v4,
|
||||
so we've added these compatibility styles to make sure everything still
|
||||
looks the same as it did with Tailwind CSS v3.
|
||||
|
||||
If we ever want to remove these styles, we need to add an explicit border
|
||||
color utility to any element that depends on these defaults.
|
||||
*/
|
||||
@layer base {
|
||||
*,
|
||||
::after,
|
||||
::before,
|
||||
::backdrop,
|
||||
::file-selector-button {
|
||||
border-color: var(--color-gray-200, currentcolor);
|
||||
}
|
||||
}
|
||||
@font-face {
|
||||
font-family: IRANSans;
|
||||
src: local('IRANSans'), url(/fonts/IRANSansWeb_Bold.woff2) format("woff2"),
|
||||
url(/fonts/IRANSansWeb_Bold.woff) format("woff"),
|
||||
url(/fonts/IRANSansWeb_Bold.ttf) format("truetype"),
|
||||
url(/fonts/IRANSansWeb_Bold.eot),
|
||||
url(/fonts/IRANSansWeb_Bold.eot?#iefix) format("embedded-opentype");
|
||||
unicode-range: 0020-007F, 00A0-00BB, 0600-067F;
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
|
||||
@utility link {
|
||||
@apply text-secondary hover:text-primary cursor-pointer;
|
||||
}
|
||||
|
||||
@utility parser {
|
||||
& p {
|
||||
@apply text-sm leading-7 lg:text-base lg:leading-8 mb-3;
|
||||
}
|
||||
& a {
|
||||
@apply text-primary cursor-pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@utility fullscreen {
|
||||
@apply block w-screen -mx-gi px-gi bg-white;
|
||||
}
|
||||
|
||||
@utility rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
@utility general-input {
|
||||
@apply block outline-hidden shadow-cut bg-white autofill:bg-white focus:shadow-focus py-2 px-2 md:py-3 md:px-3 rounded-sm w-full mb-2;
|
||||
}
|
||||
|
||||
@utility login-input {
|
||||
@apply block outline-hidden shadow-cut bg-[#f9fbff] autofill:bg-white focus:shadow-focus py-2 px-2 md:py-3 md:px-3 rounded-sm w-full mb-2;
|
||||
}
|
||||
|
||||
@utility image-gradiant {
|
||||
--grad-opacity: 1;
|
||||
--grad-color: rgba(0, 0, 0, var(--grad-opacity));
|
||||
opacity: 0.8;
|
||||
background: linear-gradient(transparent 20%, var(--grad-color) 100%);
|
||||
}
|
||||
|
||||
@utility hide-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@utility reactive-button {
|
||||
/* clickable button */
|
||||
@apply cursor-none lg:cursor-pointer active:scale-[0.98] transition-transform duration-75 outline-hidden;
|
||||
}
|
||||
|
||||
@utility search-body {
|
||||
/* background color animation */
|
||||
/* .b-20 {
|
||||
@apply relative overflow-hidden after:content-[""] after:absolute after:z-0 after:right-0 after:w-1/5 after:h-full after:bg-current hover:after:w-full transition-all duration-[280ms] [transition-timing-function:cubic-bezier(0.4,0,0.2,1)];
|
||||
|
||||
& p figure {
|
||||
display: none;
|
||||
}
|
||||
& p img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@utility flierland-scrollbar {
|
||||
/*---------- browser appearance reset ----------*/
|
||||
&::-webkit-scrollbar {
|
||||
@apply w-2 h-1.5 lg:cursor-pointer;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
@apply bg-scrollbar-thumb rounded-2xl w-2 h-1.5 lg:cursor-pointer;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
@apply bg-scrollbar-track lg:cursor-pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@utility flider {
|
||||
/*---------- range slider styles ----------*/
|
||||
&::-moz-range-track {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
position: relative;
|
||||
}
|
||||
&::-moz-range-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
position: relative;
|
||||
}
|
||||
&::-webkit-slider-runnable-track {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
position: relative;
|
||||
}
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
position: relative;
|
||||
}
|
||||
&::-webkit-slider-thumb {
|
||||
@apply appearance-none lg:cursor-pointer w-5 h-5 bg-market-title-light rounded-full -mt-2;
|
||||
}
|
||||
&::-webkit-slider-runnable-track {
|
||||
@apply appearance-none lg:cursor-pointer w-1/2 h-1.25 rounded-sm bg-market-input shadow-inner;
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
@apply lg:cursor-pointer w-full h-1.25 bg-market-input rounded-sm;
|
||||
}
|
||||
&::-moz-range-progress {
|
||||
@apply lg:cursor-pointer h-1.25 bg-market-title-light rounded-full;
|
||||
}
|
||||
&::-moz-range-thumb {
|
||||
@apply lg:cursor-pointer w-5 h-5 bg-market-title-light rounded-full;
|
||||
}
|
||||
}
|
||||
|
||||
@utility market-checkbox-label {
|
||||
/* market checkbox */
|
||||
@apply flex items-center w-auto capitalize hover:[&>span.checkmark]:bg-blue-100 mb-4 hover:[&.checked>span.checkmark]:bg-current text-market-title-light [&.checked>span.market-checkbox-title]:text-current;
|
||||
&.checked span.checkmark {
|
||||
@apply text-inherit border-current bg-current;
|
||||
}
|
||||
}
|
||||
|
||||
@utility market-checkbox-input {
|
||||
@apply w-5 h-5 bg-market-input shadow-inner rounded-sm after:w-1.75 after:h-3.25 after:-mt-0.5 after:border-b-[3px] after:border-r-[3px] after:rounded-[1px] after:border-white;
|
||||
}
|
||||
|
||||
@utility checked {
|
||||
&.market-checkbox-label span.checkmark {
|
||||
@apply text-inherit border-current bg-current;
|
||||
}
|
||||
&.market-radio-label span.checkmark {
|
||||
@apply border-2 text-inherit border-current bg-white;
|
||||
}
|
||||
}
|
||||
|
||||
@utility checkmark {
|
||||
.market-checkbox-label.checked &span {
|
||||
@apply text-inherit border-current bg-current;
|
||||
}
|
||||
.market-radio-label.checked &span {
|
||||
@apply border-2 text-inherit border-current bg-white;
|
||||
}
|
||||
}
|
||||
|
||||
@utility market-checkbox-title {
|
||||
@apply rtl:pr-8 ltr:pl-8 text-sm capitalize lg:text-sm;
|
||||
}
|
||||
|
||||
@utility market-radio-label {
|
||||
/* market radio button */
|
||||
@apply flex items-center w-auto hover:[&>span.checkmark]:bg-blue-100 capitalize hover:[&.checked>span.checkmark]:bg-white text-market-title-light [&.checked>span.market-radio-title]:text-current;
|
||||
&.checked span.checkmark {
|
||||
@apply border-2 text-inherit border-current bg-white;
|
||||
}
|
||||
}
|
||||
|
||||
@utility market-radio-input {
|
||||
@apply w-5 h-5 bg-market-input shadow-inner rounded-full after:w-2.75 after:h-2.75 after:bg-current after:rounded-full;
|
||||
}
|
||||
|
||||
@utility market-radio-title {
|
||||
@apply pr-8 text-sm;
|
||||
}
|
||||
|
||||
@utility qf-datalist-list-multi-labels {
|
||||
/* quick filters */
|
||||
@apply inline-block text-center bg-market-title-light text-[0.7rem]/4 lg:text-xs text-white hover:bg-red-400 hover:text-white mb-1 px-3.5 pt-1 pb-1 rounded-3xl font-normal;
|
||||
}
|
||||
|
||||
@utility qf-datalist-list-button {
|
||||
@apply flex items-center px-1 lg:px-3 space-x-2 rtl:space-x-reverse min-w-0! rounded-3xl;
|
||||
}
|
||||
|
||||
@utility market-datalist-wrapper {
|
||||
/* market datalist */
|
||||
@apply block w-full relative overflow-hidden;
|
||||
}
|
||||
|
||||
@utility market-datalist-button {
|
||||
@apply block! bg-white rounded-sm rtl:pr-3 ltr:pl-3 rtl:pl-8 ltr:pr-8 py-1 text-secondary-light font-semibold leading-7!;
|
||||
}
|
||||
|
||||
@utility market-datalist-list-container {
|
||||
@apply block w-full h-full bg-white;
|
||||
}
|
||||
|
||||
@utility market-datalist-input {
|
||||
@apply sticky top-0 bg-white px-3 py-3 text-secondary-light;
|
||||
& svg {
|
||||
@apply block absolute w-4.5 h-4.5 top-1/2 right-6 -translate-y-1/2 fill-secondary-light;
|
||||
}
|
||||
& input {
|
||||
@apply w-full py-2.5 pl-3 rounded-lg outline-hidden bg-market-input/70 select-none text-sm border border-scrollbar-thumb focus:border-transparent focus:ring-1 lg:focus:ring-2 ring-market-title-light placeholder:text-gray-400 pr-10;
|
||||
}
|
||||
}
|
||||
|
||||
@utility market-datalist-list {
|
||||
@apply block w-full h-full max-h-[calc(100%-116px)] overflow-y-auto px-3 pt-2 pb-3;
|
||||
}
|
||||
|
||||
@utility market-datalist-list-item {
|
||||
@apply block w-full px-3 [&>label]:py-3 text-sm hover:bg-slate-50 rounded-xs border-b border-market-sup-light last:border-none;
|
||||
&.input-selected {
|
||||
@apply text-market-title-light;
|
||||
}
|
||||
}
|
||||
|
||||
@utility input-selected {
|
||||
&.market-datalist-list-item {
|
||||
@apply text-market-title-light;
|
||||
}
|
||||
}
|
||||
|
||||
@utility market-datalist-list-multi-labels {
|
||||
@apply inline-block bg-blue-50 text-center text-xs text-market-title-light hover:bg-red-400 hover:text-white rtl:ml-1 ltr:mr-1 mb-1 px-2 py-1 rounded-sm font-normal;
|
||||
}
|
||||
|
||||
@utility market-filter-item-wrapper {
|
||||
/* market filter item - inline */
|
||||
@apply flex items-center justify-between w-full rounded-r-sm mb-3 bg-market-input rounded-sm py-1 px-1;
|
||||
}
|
||||
|
||||
@utility market-filter-item-title {
|
||||
@apply inline-block shrink-0 mx-3;
|
||||
}
|
||||
|
||||
@utility market-filter-item-body {
|
||||
@apply block w-full;
|
||||
}
|
||||
|
||||
@utility market-filter-item-block-wrapper {
|
||||
/* market filter item - block */
|
||||
@apply block w-full;
|
||||
}
|
||||
|
||||
@utility market-filter-item-block-title {
|
||||
@apply block w-full mb-5;
|
||||
}
|
||||
|
||||
@utility market-filter-item-block-body {
|
||||
@apply block w-full;
|
||||
}
|
||||
|
||||
@utility input-unit {
|
||||
/* input unit : km, mile, etc... */
|
||||
@apply flex items-center w-auto bg-white py-1 px-2 h-full rtl:mr-1 ltr:ml-1 rounded-sm font-semibold text-sm text-secondary-light uppercase;
|
||||
}
|
||||
|
||||
@utility profile-form {
|
||||
/* profile forms */
|
||||
@apply px-3 py-1.5 text-sm text-market-title leading-6 bg-white ring-1 ring-gray-300 placeholder:text-gray-400 rounded-lg outline-hidden focus:ring-2 focus:ring-market-title-light;
|
||||
}
|
||||
|
||||
@utility profile-form-error {
|
||||
@apply ring-light-red/40! ring-[3px] ring-offset-1 ring-offset-light-red;
|
||||
}
|
||||
|
||||
@utility reservation-calendar-grid-parent {
|
||||
/* calendar */
|
||||
@apply grid grid-cols-7 w-full h-full items-center justify-center gap-1;
|
||||
}
|
||||
|
||||
@utility reservation-calendar-day-button {
|
||||
@apply h-full;
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
@font-face {
|
||||
font-family: IRANSans;
|
||||
src:
|
||||
local('IRANSans'),
|
||||
url(/fonts/IRANSansWeb.woff2) format('woff2'),
|
||||
url(/fonts/IRANSansWeb.woff) format('woff'),
|
||||
url(/fonts/IRANSansWeb.ttf) format('truetype'),
|
||||
url(/fonts/IRANSansWeb.eot),
|
||||
url(/fonts/IRANSansWeb.eot?#iefix) format('embedded-opentype');
|
||||
unicode-range:
|
||||
0020-007F,
|
||||
00A0-00BB,
|
||||
0600-067F;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: IRANSans;
|
||||
src:
|
||||
local('IRANSans'),
|
||||
url(/fonts/IRANSansWeb_Medium.woff2) format('woff2'),
|
||||
url(/fonts/IRANSansWeb_Medium.woff) format('woff'),
|
||||
url(/fonts/IRANSansWeb_Medium.ttf) format('truetype'),
|
||||
url(/fonts/IRANSansWeb_Medium.eot),
|
||||
url(/fonts/IRANSansWeb_Medium.eot?#iefix) format('embedded-opentype');
|
||||
unicode-range:
|
||||
0020-007F,
|
||||
00A0-00BB,
|
||||
0600-067F;
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: IRANSans;
|
||||
src:
|
||||
local('IRANSans'),
|
||||
url(/fonts/IRANSansWeb_Bold.woff2) format('woff2'),
|
||||
url(/fonts/IRANSansWeb_Bold.woff) format('woff'),
|
||||
url(/fonts/IRANSansWeb_Bold.ttf) format('truetype'),
|
||||
url(/fonts/IRANSansWeb_Bold.eot),
|
||||
url(/fonts/IRANSansWeb_Bold.eot?#iefix) format('embedded-opentype');
|
||||
unicode-range:
|
||||
0020-007F,
|
||||
00A0-00BB,
|
||||
0600-067F;
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
@ -79,204 +464,6 @@
|
||||
}
|
||||
/* Firefox */
|
||||
input[type=number] {
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.link {
|
||||
@apply text-secondary hover:text-primary cursor-pointer;
|
||||
}
|
||||
.parser p {
|
||||
@apply text-sm leading-7 lg:text-base lg:leading-8 mb-3;
|
||||
}
|
||||
.parser a {
|
||||
@apply text-primary cursor-pointer;
|
||||
}
|
||||
.fullscreen {
|
||||
@apply block w-screen -mx-gi px-gi bg-white;
|
||||
}
|
||||
.rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
.general-input {
|
||||
@apply block outline-none shadow-cut bg-white autofill:bg-white focus:shadow-focus py-2 px-2 md:py-3 md:px-3 rounded w-full mb-2;
|
||||
}
|
||||
.login-input {
|
||||
@apply block outline-none shadow-cut bg-[#f9fbff] autofill:bg-white focus:shadow-focus py-2 px-2 md:py-3 md:px-3 rounded w-full mb-2;
|
||||
}
|
||||
.image-gradiant {
|
||||
--grad-opacity: 1.0;
|
||||
--grad-color: rgba(0, 0, 0, var(--grad-opacity));
|
||||
opacity: .8;
|
||||
background: linear-gradient(transparent 20%, var(--grad-color) 100%);
|
||||
}
|
||||
.hide-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.hide-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
/* clickable button */
|
||||
.reactive-button {
|
||||
@apply cursor-none lg:cursor-pointer active:scale-[0.98] transition-transform duration-[75ms] outline-none;
|
||||
}
|
||||
/* background color animation */
|
||||
/* .b-20 {
|
||||
@apply relative overflow-hidden after:content-[""] after:absolute after:z-0 after:right-0 after:w-1/5 after:h-full after:bg-current hover:after:w-full transition-all duration-[280ms] [transition-timing-function:cubic-bezier(0.4,0,0.2,1)];
|
||||
} */
|
||||
.search-body p figure,
|
||||
.search-body p img {
|
||||
display: none;
|
||||
}
|
||||
/*---------- browser appearance reset ----------*/
|
||||
.flierland-scrollbar::-webkit-scrollbar {
|
||||
@apply w-2 h-[6px] lg:cursor-pointer;
|
||||
}
|
||||
.flierland-scrollbar::-webkit-scrollbar-thumb {
|
||||
@apply bg-scrollbar-thumb rounded-2xl w-2 h-[6px] lg:cursor-pointer;
|
||||
}
|
||||
.flierland-scrollbar::-webkit-scrollbar-track {
|
||||
@apply bg-scrollbar-track lg:cursor-pointer;
|
||||
}
|
||||
/*---------- range slider styles ----------*/
|
||||
.flider::-moz-range-track,
|
||||
.flider::-moz-range-thumb,
|
||||
.flider::-webkit-slider-runnable-track,
|
||||
.flider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
position: relative;
|
||||
}
|
||||
.flider::-webkit-slider-thumb {
|
||||
@apply appearance-none lg:cursor-pointer w-5 h-5 bg-market-title-light rounded-full -mt-2;
|
||||
}
|
||||
.flider::-webkit-slider-runnable-track {
|
||||
@apply appearance-none lg:cursor-pointer w-1/2 h-[5px] rounded bg-market-input shadow-inner;
|
||||
}
|
||||
|
||||
.flider::-moz-range-track {
|
||||
@apply lg:cursor-pointer w-full h-[5px] bg-market-input rounded;
|
||||
}
|
||||
.flider::-moz-range-progress {
|
||||
@apply lg:cursor-pointer h-[5px] bg-market-title-light rounded-full;
|
||||
}
|
||||
.flider::-moz-range-thumb {
|
||||
@apply lg:cursor-pointer w-5 h-5 bg-market-title-light rounded-full;
|
||||
}
|
||||
|
||||
/* market checkbox */
|
||||
.market-checkbox-label {
|
||||
@apply flex items-center w-auto capitalize [&>span.checkmark]:hover:bg-blue-100 mb-4 [&.checked>span.checkmark]:hover:bg-current text-market-title-light [&.checked>span.market-checkbox-title]:text-current;
|
||||
}
|
||||
.market-checkbox-input {
|
||||
@apply w-5 h-5 bg-market-input shadow-inner rounded after:w-[7px] after:h-[13px] after:-mt-[2px] after:border-b-[3px] after:border-r-[3px] after:rounded-[1px] after:border-white;
|
||||
}
|
||||
.market-checkbox-label.checked span.checkmark {
|
||||
@apply text-inherit border-current bg-current;
|
||||
}
|
||||
.market-checkbox-title {
|
||||
@apply rtl:pr-8 ltr:pl-8 text-sm capitalize lg:text-sm;
|
||||
}
|
||||
|
||||
/* market radio button */
|
||||
.market-radio-label {
|
||||
@apply flex items-center w-auto [&>span.checkmark]:hover:bg-blue-100 capitalize [&.checked>span.checkmark]:hover:bg-white text-market-title-light [&.checked>span.market-radio-title]:text-current;
|
||||
}
|
||||
.market-radio-input {
|
||||
@apply w-5 h-5 bg-market-input shadow-inner rounded-full after:w-[11px] after:h-[11px] after:bg-current after:rounded-full;
|
||||
}
|
||||
.market-radio-label.checked span.checkmark {
|
||||
@apply border-2 text-inherit border-current bg-white;
|
||||
}
|
||||
.market-radio-title {
|
||||
@apply pr-8 text-sm;
|
||||
}
|
||||
|
||||
/* quick filters */
|
||||
.qf-datalist-list-multi-labels {
|
||||
@apply inline-block text-center bg-market-title-light text-[0.7rem]/4 lg:text-xs text-white hover:bg-red-400 hover:text-white mb-1 px-[14px] pt-[4px] pb-[4px] rounded-3xl font-normal;
|
||||
}
|
||||
.qf-datalist-list-button {
|
||||
@apply flex items-center px-1 lg:px-3 space-x-2 rtl:space-x-reverse !min-w-0 rounded-3xl;
|
||||
}
|
||||
|
||||
/* market datalist */
|
||||
.market-datalist-wrapper {
|
||||
@apply block w-full relative overflow-hidden;
|
||||
}
|
||||
.market-datalist-button {
|
||||
@apply !block bg-white rounded rtl:pr-3 ltr:pl-3 rtl:pl-8 ltr:pr-8 py-1 text-secondary-light font-semibold !leading-7;
|
||||
}
|
||||
.market-datalist-list-container {
|
||||
@apply block w-full h-full bg-white;
|
||||
}
|
||||
.market-datalist-input {
|
||||
@apply sticky top-0 bg-white px-3 py-3 text-secondary-light;
|
||||
}
|
||||
.market-datalist-input svg {
|
||||
@apply block absolute w-[18px] h-[18px] top-1/2 right-6 -translate-y-1/2 fill-secondary-light;
|
||||
}
|
||||
.market-datalist-input input {
|
||||
@apply w-full py-[10px] pl-3 rounded-lg outline-none bg-market-input/70 select-none text-sm border border-[#c3c3ce] focus:border-transparent focus:ring-1 focus:lg:ring-2 ring-market-title-light placeholder:text-gray-400 pr-10;
|
||||
}
|
||||
.market-datalist-list {
|
||||
@apply block w-full h-full max-h-[calc(100%_-_116px)] overflow-y-auto px-3 pt-2 pb-3;
|
||||
}
|
||||
.market-datalist-list-item {
|
||||
@apply block w-full px-3 [&>label]:py-3 text-sm hover:bg-slate-50 rounded-sm border-b border-market-sup-light last:border-none;
|
||||
}
|
||||
.market-datalist-list-item.input-selected {
|
||||
@apply text-market-title-light;
|
||||
}
|
||||
.market-datalist-list-multi-labels {
|
||||
@apply inline-block bg-blue-50 text-center text-xs text-market-title-light hover:bg-red-400 hover:text-white rtl:ml-1 ltr:mr-1 mb-1 px-2 py-1 rounded font-normal;
|
||||
}
|
||||
|
||||
/* market filter item - inline */
|
||||
.market-filter-item-wrapper {
|
||||
@apply flex items-center justify-between w-full rounded-r mb-3 bg-market-input rounded py-1 px-1;
|
||||
}
|
||||
.market-filter-item-title {
|
||||
@apply inline-block shrink-0 mx-3;
|
||||
}
|
||||
.market-filter-item-body {
|
||||
@apply block w-full;
|
||||
}
|
||||
/* market filter item - block */
|
||||
.market-filter-item-block-wrapper {
|
||||
@apply block w-full;
|
||||
}
|
||||
.market-filter-item-block-title {
|
||||
@apply block w-full mb-5;
|
||||
}
|
||||
.market-filter-item-block-body {
|
||||
@apply block w-full;
|
||||
}
|
||||
|
||||
/* input unit : km, mile, etc... */
|
||||
.input-unit {
|
||||
@apply flex items-center w-auto bg-white py-1 px-2 h-full rtl:mr-1 ltr:ml-1 rounded font-semibold text-sm text-secondary-light uppercase;
|
||||
}
|
||||
|
||||
|
||||
/* profile forms */
|
||||
.profile-form {
|
||||
@apply px-3 py-[0.375rem] text-sm text-market-title leading-6 bg-white ring-1 ring-gray-300 placeholder:text-gray-400 rounded-lg outline-none focus:ring-2 focus:ring-market-title-light;
|
||||
}
|
||||
.profile-form-error {
|
||||
@apply !ring-light-red/40 ring-[3px] ring-offset-1 ring-offset-light-red;
|
||||
}
|
||||
|
||||
/* calendar */
|
||||
.reservation-calendar-grid-parent {
|
||||
@apply grid grid-cols-7 w-full h-full items-center justify-center gap-1;
|
||||
}
|
||||
.reservation-calendar-day-button {
|
||||
@apply h-full;
|
||||
}
|
||||
/* .reservation-calendar-disabled-date {
|
||||
@apply !bg-gray-50 !text-gray-400 pointer-events-none line-through;
|
||||
} */
|
||||
}
|
||||
@ -108,7 +108,7 @@ const VerifyEmail: React.FunctionComponent<VerifyEmail> = ({ onVerify }) => {
|
||||
text={translate('email-verification-cta')}
|
||||
type="button"
|
||||
onClick={handleVerifyEmail}
|
||||
className="block rounded bg-market-title-light hover:bg-light-red focus:bg-light-red outline-none uppercase text-sm md:text-base text-white text-center w-full p-3 mt-6 mb-4"
|
||||
className="block rounded-sm bg-market-title-light hover:bg-light-red focus:bg-light-red outline-hidden uppercase text-sm md:text-base text-white text-center w-full p-3 mt-6 mb-4"
|
||||
loading={updating}
|
||||
disabled={!hasValue(verificationCode)}
|
||||
/>
|
||||
|
||||
@ -142,7 +142,7 @@ export default function Login() {
|
||||
text={translate('login-reset-password-go-back')}
|
||||
type="button"
|
||||
onClick={restartResetForm}
|
||||
className="block rounded bg-market-title-light hover:bg-light-red focus:bg-light-red outline-none uppercase text-sm md:text-base text-white text-center w-full p-3 mt-6 mb-4"
|
||||
className="block rounded-sm bg-market-title-light hover:bg-light-red focus:bg-light-red outline-hidden uppercase text-sm md:text-base text-white text-center w-full p-3 mt-6 mb-4"
|
||||
/>
|
||||
</div>
|
||||
:
|
||||
@ -166,7 +166,7 @@ export default function Login() {
|
||||
text={translate('login-reset-password-cta')}
|
||||
type="button"
|
||||
onClick={handleResetRequest}
|
||||
className="block rounded bg-market-title-light hover:bg-light-red focus:bg-light-red outline-none uppercase text-sm md:text-base text-white text-center w-full p-3 mt-6 mb-4"
|
||||
className="block rounded-sm bg-market-title-light hover:bg-light-red focus:bg-light-red outline-hidden uppercase text-sm md:text-base text-white text-center w-full p-3 mt-6 mb-4"
|
||||
/>
|
||||
<span className="flex items-center text-sm md:text-base pt-2 text-market-title-light hover:text-light-red lg:cursor-pointer" onClick={restartResetForm}>
|
||||
<ArrowTurnDownLeftSolid className="size-4 fill-current rtl:ml-2 ltr:mr-2 shrink-0" />
|
||||
@ -186,7 +186,7 @@ export default function Login() {
|
||||
text={translate('user-login-text')}
|
||||
type="button"
|
||||
onClick={handleSignIn}
|
||||
className="block rounded bg-market-title-light hover:bg-light-red focus:bg-light-red outline-none uppercase text-sm md:text-base text-white text-center w-full p-3 mt-6 mb-4"
|
||||
className="block rounded-sm bg-market-title-light hover:bg-light-red focus:bg-light-red outline-hidden uppercase text-sm md:text-base text-white text-center w-full p-3 mt-6 mb-4"
|
||||
/>
|
||||
<span className="flex items-center text-sm md:text-base pt-2 text-market-title-light hover:text-light-red lg:cursor-pointer" onClick={() => setShowForgotPassword(true)}>
|
||||
<KeySolid className="size-4 fill-current rtl:ml-2 ltr:mr-2 shrink-0" />
|
||||
|
||||
@ -226,7 +226,7 @@ const ResetPassword: React.FunctionComponent<ResetPassword> = ({ onChange }) =>
|
||||
text={translate(showResendLink ? 'password-reset-expired-resend-link-cta' : 'password-reset-new-password-cta')}
|
||||
type="button"
|
||||
onClick={showResendLink ? handleResendLink : handleResetPassword}
|
||||
className="block rounded bg-market-title-light hover:bg-light-red focus:bg-light-red outline-none uppercase text-sm md:text-base text-white text-center w-full p-3 mt-6 mb-4"
|
||||
className="block rounded-sm bg-market-title-light hover:bg-light-red focus:bg-light-red outline-hidden uppercase text-sm md:text-base text-white text-center w-full p-3 mt-6 mb-4"
|
||||
/>
|
||||
{/* <span className="flex items-center text-sm md:text-base pt-2 text-market-title-light hover:text-light-red lg:cursor-pointer" onClick={() => router.push("/sign-in")}>
|
||||
<ArrowTurnDownLeftSolid className="size-4 fill-current rtl:ml-2 ltr:mr-2 shrink-0" />
|
||||
@ -243,7 +243,7 @@ const ResetPassword: React.FunctionComponent<ResetPassword> = ({ onChange }) =>
|
||||
text={translate('password-reset-page-success-cta')}
|
||||
type="button"
|
||||
onClick={() => router.push("/sign-in")}
|
||||
className="block rounded bg-market-title-light hover:bg-light-red focus:bg-light-red outline-none uppercase text-sm md:text-base text-white text-center w-full p-3 mt-6 mb-4"
|
||||
className="block rounded-sm bg-market-title-light hover:bg-light-red focus:bg-light-red outline-hidden uppercase text-sm md:text-base text-white text-center w-full p-3 mt-6 mb-4"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
|
||||
@ -241,7 +241,7 @@ const SignUp: React.FunctionComponent<SignUp> = ({ cities }) => {
|
||||
labelHidden
|
||||
allValue={allOptions}
|
||||
value={city}
|
||||
wrapperClass={`market-datalist-wrapper profile-form outline-none shadow-cut ring-0 bg-[#f9fbff] autofill:bg-white focus:shadow-focus mb-5 rounded p-0`}
|
||||
wrapperClass={`market-datalist-wrapper profile-form outline-hidden shadow-cut ring-0 bg-[#f9fbff] autofill:bg-white focus:shadow-focus mb-5 rounded-sm p-0`}
|
||||
buttonClass="qf-datalist-list-button leading-6 py-2 px-2 md:py-4 md:px-3"
|
||||
inputClass="market-datalist-input"
|
||||
listContainerClass="market-datalist-list-container"
|
||||
@ -258,7 +258,7 @@ const SignUp: React.FunctionComponent<SignUp> = ({ cities }) => {
|
||||
type="button"
|
||||
onClick={validate}
|
||||
loading={signingUp}
|
||||
className="block rounded bg-market-title-light hover:bg-light-red focus:bg-light-red outline-none text-sm md:text-base uppercase text-white text-center w-full p-3 mt-6 mb-4"
|
||||
className="block rounded-sm bg-market-title-light hover:bg-light-red focus:bg-light-red outline-hidden text-sm md:text-base uppercase text-white text-center w-full p-3 mt-6 mb-4"
|
||||
/>
|
||||
<Terms />
|
||||
</form>
|
||||
|
||||
@ -49,10 +49,10 @@ const BillboardMultiFilter: React.FunctionComponent<BillboardMultiFilter> = ({ t
|
||||
}, [active]);
|
||||
|
||||
return (
|
||||
<div className={`flex items-center justify-between rounded-3xl rtl:pr-3 ltr:pl-3 shrink-0 rtl:pl-[10px] ltr:pr-[10px] py-1 lg:py-2 rtl:ml-2 ltr:mr-2 rtl:lg:ml-3 ltr:lg:mr-3 lg:cursor-pointer border shadow-sm ${isActive ? "bg-market-input border-market-title-light" : "bg-white border-white"} ${wrapperClass}`} onClick={onClick}>
|
||||
<div className={`flex items-center justify-between rounded-3xl rtl:pr-3 ltr:pl-3 shrink-0 rtl:pl-[10px] ltr:pr-[10px] py-1 lg:py-2 rtl:ml-2 ltr:mr-2 lg:rtl:ml-3 lg:ltr:mr-3 lg:cursor-pointer border shadow-xs ${isActive ? "bg-market-input border-market-title-light" : "bg-white border-white"} ${wrapperClass}`} onClick={onClick}>
|
||||
<div className="rtl:space-x-reverse space-x-2 lg:space-x-3 [&>svg]:svg">
|
||||
{filterIcon()}
|
||||
<span className={`${isActive ? "text-market-title" : "text-secondary-light"} rtl:ml-1 ltr:mr-1 rtl:lg:ml-0 ltr:lg:mr-0 leading-[26px] text-[13px] lg:text-base select-none capitalize ${titleClass}`}>{title}</span>
|
||||
<span className={`${isActive ? "text-market-title" : "text-secondary-light"} rtl:ml-1 ltr:mr-1 lg:rtl:ml-0 lg:ltr:mr-0 leading-[26px] text-[13px] lg:text-base select-none capitalize ${titleClass}`}>{title}</span>
|
||||
</div>
|
||||
<div className={`inline-block ${bodyClass}`} onClick={handleClick}>{children}</div>
|
||||
</div>
|
||||
|
||||
@ -46,8 +46,8 @@ const CatSelectionButton: React.FunctionComponent<CatSelectionButton> = ({ id, b
|
||||
|
||||
return (
|
||||
<div className={`reactive-button ${wrapperClass}`}>
|
||||
<div className="inline-flex items-center justify-center bg-white rounded-full py-1 lg:py-2 px-4 border border-white lg:cursor-pointer shadow-sm" onClick={handleOpen}>
|
||||
{getBillboardCatData({ catId: Number(currentCat.id), iconClass: "!size-4" }).icon}
|
||||
<div className="inline-flex items-center justify-center bg-white rounded-full py-1 lg:py-2 px-4 border border-white lg:cursor-pointer shadow-xs" onClick={handleOpen}>
|
||||
{getBillboardCatData({ catId: Number(currentCat.id), iconClass: "size-4!" }).icon}
|
||||
<span className={`text-secondary-light ms-2 lg:ms-3 leading-[26px] text-[13px] lg:text-sm/6 select-none capitalize`}>{getLocaleTr(currentCat, locale).name}</span>
|
||||
</div>
|
||||
<Modal
|
||||
@ -56,11 +56,11 @@ const CatSelectionButton: React.FunctionComponent<CatSelectionButton> = ({ id, b
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
title={translate("billboard-cats-page-cat-selection-title")}
|
||||
wrapperClass="!z-30"
|
||||
className={`flex flex-col bg-white w-[90vw] h-auto max-h-[75vh] lg:w-auto lg:h-auto lg:min-w-[500px] lg:max-w-[90vw] lg:max-h-[90vh] rounded -top-[10%] lg:top-0`}
|
||||
wrapperClass="z-30!"
|
||||
className={`flex flex-col bg-white w-[90vw] h-auto max-h-[75vh] lg:w-auto lg:h-auto lg:min-w-[500px] lg:max-w-[90vw] lg:max-h-[90vh] rounded-sm top-[-10%] lg:top-0`}
|
||||
childrenClass="lg:flierland-scrollbar px-4 py-2 sm:py-8"
|
||||
titleClass="text-base !font-normal"
|
||||
closeClass="!size-7 !-me-2"
|
||||
titleClass="text-base font-normal!"
|
||||
closeClass="size-7! -me-2!"
|
||||
>
|
||||
<CatSelector data={billboardCats} cat={currentCat} />
|
||||
</Modal>
|
||||
|
||||
@ -41,14 +41,14 @@ const CatSelector: React.FunctionComponent<CatSelector> = ({ wrapperClass, cat,
|
||||
const getCatTr = (x: any) => x.translations.filter((y: any) => y.languages_code.code.slice(0, 2) === router.locale)[0].name.toLowerCase();
|
||||
|
||||
return <div className={`${wrapperClass}`}>
|
||||
{showAll && <span className="flex items-center select-none text-base lg:text-base lg:cursor-pointer pb-2 capitalize space-x-2 rtl:space-x-reverse text-gray-500 hover:text-secondary [&>svg]:hover:fill-secondary" onClick={handleAll}>
|
||||
<ChevronDownSolid className={`inline-block relative w-[10px] -rotate-90 h-auto fill-gray-500 transition-transform ltr:[transform:rotateZ(90deg)]`} />
|
||||
{showAll && <span className="flex items-center select-none text-base lg:text-base lg:cursor-pointer pb-2 capitalize space-x-2 rtl:space-x-reverse text-gray-500 hover:text-secondary hover:[&>svg]:fill-secondary" onClick={handleAll}>
|
||||
<ChevronDownSolid className={`inline-block relative w-[10px] -rotate-90 h-auto fill-gray-500 transition-transform ltr:transform-[rotateZ(90deg)]`} />
|
||||
<span>{allCatsText}</span>
|
||||
</span>}
|
||||
|
||||
{/* shows correct parent category based on the current locale */}
|
||||
{showAll && <Link href={`/billboard/cats/${url(parentName)}`} className="flex items-center py-3 select-none text-sm sm:text-base capitalize text-market-title-light">
|
||||
{getBillboardCatData({ catId: Number(parentId), iconClass: "inline-block !size-4 sm:!size-5 rtl:ml-3 ltr:mr-3 fill-market-title-light" }).icon}
|
||||
{getBillboardCatData({ catId: Number(parentId), iconClass: "inline-block size-4! sm:size-5! rtl:ml-3 ltr:mr-3 fill-market-title-light" }).icon}
|
||||
{parentName}
|
||||
</Link>}
|
||||
|
||||
@ -58,14 +58,14 @@ const CatSelector: React.FunctionComponent<CatSelector> = ({ wrapperClass, cat,
|
||||
<li
|
||||
className={`flex items-center capitalize lg:cursor-pointer
|
||||
${!showAll ?
|
||||
"text-secondary rounded px-3 py-3 lg:pr-3 lg:py-3 space-x-3 rtl:space-x-reverse hover:bg-market-input hover:text-market-title [&>svg]:hover:fill-market-title-light"
|
||||
"text-secondary rounded-sm px-3 py-3 lg:pr-3 lg:py-3 space-x-3 rtl:space-x-reverse hover:bg-market-input hover:text-market-title hover:[&>svg]:fill-market-title-light"
|
||||
:
|
||||
"rtl:pr-5 ltr:pl-5 rtl:border-r-4 ltr:border-l-4 border-market-input text-sm text-gray-500 py-2 hover:border-market-border hover:text-secondary"
|
||||
}
|
||||
${url(getLocaleTr(x, locale).name) === router.query.category && showAll ? "text-market-title font-semibold !border-market-title-light hover:!text-market-title" : ""}
|
||||
${url(getLocaleTr(x, locale).name) === router.query.category && showAll ? "text-market-title font-semibold border-market-title-light! hover:text-market-title!" : ""}
|
||||
`}
|
||||
>
|
||||
{!showAll && getBillboardCatData({ catId: Number(x.id), iconClass: "inline-block !size-4 sm:!size-5 fill-secondary-light" }).icon}
|
||||
{!showAll && getBillboardCatData({ catId: Number(x.id), iconClass: "inline-block size-4! sm:size-5! fill-secondary-light" }).icon}
|
||||
<span className="text-xs sm:text-sm lg:text-[15px] text-current">{x.translations.filter(y => y.languages_code.code.slice(0, 2) === router.locale)[0].name}</span>
|
||||
</li>
|
||||
</Link>
|
||||
|
||||
@ -277,11 +277,11 @@ const BillboardCatFilters: React.FunctionComponent<BillboardCatFilters> = ({ ini
|
||||
|
||||
return (
|
||||
<div className="block pb-4 sm:pb-12">
|
||||
<div className="flex items-center justify-between w-full h-auto sticky will-change-transform top-[calc(var(--menu-height)_-_1px)] z-20 bg-[#fafafa] py-2 lg:py-3 pb-2 ltr:[direction:ltr] shadow-bot px-[var(--gi)]">
|
||||
<div className="flex items-center justify-between w-full h-auto sticky will-change-transform top-[calc(var(--menu-height)-1px)] z-20 bg-[#fafafa] py-2 lg:py-3 pb-2 ltr:[direction:ltr] shadow-bot px-(--gi)">
|
||||
{/* Filters */}
|
||||
<div className={`${searchOpen ? "hidden" : "flex lg:hidden"} items-center justify-center relative`}>
|
||||
<ArrowDownShortWideSolid className={`inline-block shrink-0 bg-white p-2 rounded-lg w-9 h-9 fill-secondary-light`} onClick={toggleFilters} />
|
||||
{currentCity !== -1 && <NotificationSign wrapperClass="absolute -top-[2px] -right-[2px] lg:top-0 lg:right-0" />}
|
||||
{currentCity !== -1 && <NotificationSign wrapperClass="absolute top-[-2px] right-[-2px] lg:top-0 lg:right-0" />}
|
||||
</div>
|
||||
<div className={`hidden lg:flex items-center`}>
|
||||
{/* {data.cat && data.cats && <MobileCats cat={data.cat} cats={data.cats} onChange={applyFilters} />} */}
|
||||
@ -300,12 +300,12 @@ const BillboardCatFilters: React.FunctionComponent<BillboardCatFilters> = ({ ini
|
||||
onInput={onSearch}
|
||||
inputDelay={500}
|
||||
placeholder={translate("billboard-cats-page-search-placeholder")}
|
||||
className={`outline-none py-0 px-2 lg:py-2 lg:pe-12 rounded-lg w-[calc(100%_-_1.5rem)] lg:w-full text-sm placeholder:text-xs lg:placeholder:text-sm`}
|
||||
className={`outline-hidden py-0 px-2 lg:py-2 lg:pe-12 rounded-lg w-[calc(100%-1.5rem)] lg:w-full text-sm placeholder:text-xs lg:placeholder:text-sm`}
|
||||
wrapperClass={`${searchOpen ? "max-lg:inline-block" : "max-lg:hidden"} w-full`}
|
||||
clearClass="hidden lg:inline-block rtl:left-2 ltr:right-2 top-1/2 -translate-y-1/2 w-6 h-6 lg:w-6 lg:h-6 fill-market-title-light"
|
||||
/>
|
||||
{searchOpen ?
|
||||
<XMark className={`inline-block shrink-0 lg:hidden bg-white p-1 rounded-lg size-8 lg:size-9 fill-secondary-light ltr:[transform:rotateY(180deg)]`} onClick={toggleSearch} />
|
||||
<XMark className={`inline-block shrink-0 lg:hidden bg-white p-1 rounded-lg size-8 lg:size-9 fill-secondary-light ltr:transform-[rotateY(180deg)]`} onClick={toggleSearch} />
|
||||
:
|
||||
<MagnifyingGlass className={`inline-block shrink-0 lg:hidden bg-white p-1 rounded-lg size-8 lg:size-9 fill-secondary-light`} onClick={toggleSearch} />
|
||||
}
|
||||
@ -316,11 +316,11 @@ const BillboardCatFilters: React.FunctionComponent<BillboardCatFilters> = ({ ini
|
||||
open={filtersOpen}
|
||||
onClose={toggleFilters}
|
||||
title={translate("billboard-cats-page-filters-title")}
|
||||
wrapperClass="!z-30"
|
||||
className={`flex flex-col bg-white w-[90vw] h-auto max-h-[70vh] lg:w-auto lg:h-auto lg:min-w-[500px] lg:max-w-[90vw] lg:max-h-[90vh] rounded -top-[10%] lg:top-0`}
|
||||
wrapperClass="z-30!"
|
||||
className={`flex flex-col bg-white w-[90vw] h-auto max-h-[70vh] lg:w-auto lg:h-auto lg:min-w-[500px] lg:max-w-[90vw] lg:max-h-[90vh] rounded-sm top-[-10%] lg:top-0`}
|
||||
childrenClass="lg:flierland-scrollbar px-4 py-6"
|
||||
titleClass="text-base !font-normal"
|
||||
closeClass="!size-7 !-me-2"
|
||||
titleClass="text-base font-normal!"
|
||||
closeClass="size-7! -me-2!"
|
||||
>
|
||||
<div className={`flex flex-col items-center justify-center gap-4`}>
|
||||
{/* {data.cat && data.cats && <MobileCats cat={data.cat} cats={data.cats} onChange={applyFilters} />} */}
|
||||
|
||||
@ -27,7 +27,7 @@ const HeroBanner: React.FunctionComponent<HeroBanner> = ({ cat, className }) =>
|
||||
"--desktop-pic": `url('/pics/billboard/desktop/${data.pic}')`,
|
||||
"--position": `${data.position}`,
|
||||
} as React.CSSProperties}
|
||||
className={`block w-full h-52 sm:h-[350px] aspect-[1.91/1] lg:h-[550px] [background-image:var(--mobile-pic)] sm:[background-image:var(--desktop-pic)] bg-no-repeat bg-cover [background-position:var(--position)] 2xl:rounded-b-lg`}
|
||||
className={`block w-full h-52 sm:h-[350px] aspect-[1.91/1] lg:h-[550px] [background-image:var(--mobile-pic)] sm:[background-image:var(--desktop-pic)] bg-no-repeat bg-cover bg-position-(--position) 2xl:rounded-b-lg`}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@ -39,14 +39,14 @@ const BillboardCatHeader: React.FunctionComponent<BillboardCatHeader> = ({ billb
|
||||
<div className="block pb-2 lg:pb-0">
|
||||
<HeroBanner cat={catId} />
|
||||
<div className="block w-max max-w-full -mt-7 rounded-t-[30px] md:w-max md:min-w-[400px] relative lg:block lg:h-auto bg-[#fafafa] lg:bg-white max-lg:px-2 lg:p-2 lg:-mt-20 lg:mb-4 mx-auto text-center lg:rounded-[50px] ltr:[direction:ltr]">
|
||||
<span className="flex absolute top-0 lg:top-1 left-1/2 -translate-y-1/2 -translate-x-1/2 bg-gradient-to-b from-white to-[#fafafa] p-3 lg:p-4 rounded-full">
|
||||
{getBillboardCatData({ catId: Number(catId), iconClass: "max-lg:!size-5" }).icon}
|
||||
<span className="flex absolute top-0 lg:top-1 left-1/2 -translate-y-1/2 -translate-x-1/2 bg-linear-to-b from-white to-[#fafafa] p-3 lg:p-4 rounded-full">
|
||||
{getBillboardCatData({ catId: Number(catId), iconClass: "max-lg:size-5!" }).icon}
|
||||
</span>
|
||||
<div className="flex flex-col items-center justify-center bg-transparent rounded-t-[10px] lg:rounded-[45px] pt-2 pb-0 lg:pb-6 lg:pt-7 px-4 sm:px-8 lg:bg-[#fbfcfd] lg:shadow-inner">
|
||||
<h1 className="text-[15px]/5 lg:text-2xl mb-0 pb-2 max-lg:pt-3 lg:pb-3 capitalize font-semibold lg:[text-shadow:0px_0px_1px_#49516e] text-secondary-light">{urlDecode(catTitle)}</h1>
|
||||
<Breadcrumb
|
||||
className="hidden lg:flex items-center justify-center mt-1 mb-1 lg:mb-2 whitespace-nowrap"
|
||||
textClass="lg:!text-sm"
|
||||
textClass="lg:text-sm!"
|
||||
data={billboardCategories}
|
||||
urlParam={urlDecode(catTitle)}
|
||||
/>
|
||||
@ -55,7 +55,7 @@ const BillboardCatHeader: React.FunctionComponent<BillboardCatHeader> = ({ billb
|
||||
<Breadcrumb
|
||||
wrapperClass="flex items-center justify-center px-8 mt-1 mb-1"
|
||||
className="hide-scrollbar flex lg:hidden overflow-x-scroll items-center whitespace-nowrap"
|
||||
textClass="lg:!text-sm"
|
||||
textClass="lg:text-sm!"
|
||||
data={billboardCategories}
|
||||
urlParam={urlDecode(catTitle)}
|
||||
/>
|
||||
|
||||
@ -10,22 +10,22 @@ const BillboardCatPlaceHolder: React.FunctionComponent<BillboardCatPlaceHolder>
|
||||
return (
|
||||
<div className="flex flex-col items-center pt-0 pb-4 sm:py-4 px-gi">
|
||||
<div className="flex items-center justify-center sm:justify-start w-full sm:border-b-[3px] border-white mt-5 mb-2 sm:mt-2 sm:mb-4 rounded-br-xl">
|
||||
<span className="flex items-center h-6 sm:h-8 w-24 py-[6px] sm:py-2 px-3 rounded-tl-xl rounded-br-xl rounded ring-2 ring-white bg-gray-200/75 text-xs text-secondary-light font-semibold"></span>
|
||||
<span className="flex items-center h-6 sm:h-8 w-24 py-[6px] sm:py-2 px-3 rounded-tl-xl rounded-br-xl rounded-sm ring-2 ring-white bg-gray-200/75 text-xs text-secondary-light font-semibold"></span>
|
||||
</div>
|
||||
<div className={`grid w-full sm:my-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 sm:gap-8`}>
|
||||
{[...Array(8).keys()].map(x => (
|
||||
<div key={x} className="rounded-md lg:animate-pulse flex justify-between items-start sm:items-center w-full sm:flex-col sm:px-0 sm:rounded-2xl first:border-t-0 last:border-b-0 border-t border-t-white border-b border-b-gray-100 sm:border-none max-sm:pb-3 [&_h2]:hover:!text-market-title-light">
|
||||
<div key={x} className="rounded-md lg:animate-pulse flex justify-between items-start sm:items-center w-full sm:flex-col sm:px-0 sm:rounded-2xl first:border-t-0 last:border-b-0 border-t border-t-white border-b border-b-gray-100 sm:border-none max-sm:pb-3 hover:[&_h2]:text-market-title-light!">
|
||||
<span className="inline-block w-24 max-sm:mt-4 sm:w-full aspect-square sm:aspect-3/2 rounded-2xl bg-gray-200/75"></span>
|
||||
<div className="flex flex-col justify-between w-full pt-3 pb-0 sm:py-4 max-sm:ps-4 max-sm:pe-0 sm:px-3">
|
||||
<span className="inline-block w-3/4 rounded h-5 sm:h-6 bg-gray-200/75 mt-2"></span>
|
||||
<span className="inline-block w-3/4 rounded-sm h-5 sm:h-6 bg-gray-200/75 mt-2"></span>
|
||||
<div className="flex items-center space-x-1 rtl:space-x-reverse mt-2 mb-4">
|
||||
{[...Array(5).keys()].map(y => (
|
||||
<StarSolid key={y} className="inline-block size-4 xl:size-4 fill-gray-200/75" />
|
||||
))}
|
||||
</div>
|
||||
<div className="block w-full rounded h-4 sm:h-5 bg-gray-200/75 mb-2"></div>
|
||||
<div className="block w-full rounded h-4 sm:h-5 bg-gray-200/75 mb-4"></div>
|
||||
<div className="block w-2/5 rounded h-5 sm:h-6 bg-gray-200/75"></div>
|
||||
<div className="block w-full rounded-sm h-4 sm:h-5 bg-gray-200/75 mb-2"></div>
|
||||
<div className="block w-full rounded-sm h-4 sm:h-5 bg-gray-200/75 mb-4"></div>
|
||||
<div className="block w-2/5 rounded-sm h-5 sm:h-6 bg-gray-200/75"></div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
@ -45,7 +45,7 @@ const LatestBillboards: React.FunctionComponent<LatestBillboards> = ({ billboard
|
||||
return (
|
||||
<div className="flex flex-col items-center pt-0 pb-4 sm:py-4 px-gi">
|
||||
<div className="flex items-center justify-center sm:justify-start w-full mt-5 mb-2 sm:mt-2 sm:mb-4 rounded-br-xl">
|
||||
<span className="flex items-center py-[6px] sm:py-2 px-3 rounded-tl-xl rounded-br-xl rounded ring-2 ring-white bg-white text-xs text-secondary-light font-semibold shadow-bot select-none">{`${translate("billboard-cats-page-items-count")} : ${itemsCount}`}</span>
|
||||
<span className="flex items-center py-[6px] sm:py-2 px-3 rounded-tl-xl rounded-br-xl rounded-sm ring-2 ring-white bg-white text-xs text-secondary-light font-semibold shadow-bot select-none">{`${translate("billboard-cats-page-items-count")} : ${itemsCount}`}</span>
|
||||
</div>
|
||||
<ul className="grid sm:my-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 sm:gap-8">
|
||||
{billboards.filter(x => x.translations.some((y: any) => y.languages_code.code.slice(0, 2) === locale)).map((item, i) => (
|
||||
@ -63,19 +63,19 @@ const LatestBillboards: React.FunctionComponent<LatestBillboards> = ({ billboard
|
||||
className="rounded-[14px] sm:rounded-xl"
|
||||
figureClass=""
|
||||
/>
|
||||
<span className="hidden sm:inline-block absolute bottom-2 right-2 text-xs [direction:ltr] bg-white rounded rounded-tl-xl rounded-br-xl py-1 px-2 text-gray-500 font-semibold">
|
||||
<span className="hidden sm:inline-block absolute bottom-2 right-2 text-xs [direction:ltr] bg-white rounded-sm rounded-tl-xl rounded-br-xl py-1 px-2 text-gray-500 font-semibold">
|
||||
{hours(item).hours[hours(item).today].from && `${hours(item).hours[hours(item).today].from.slice(0, 5)} - ${hours(item).hours[hours(item).today].to.slice(0, 5)}`}
|
||||
</span>
|
||||
</Link>
|
||||
<div className="flex flex-col justify-between w-full pt-3 pb-0 sm:py-4 max-sm:ps-4 max-sm:pe-0 sm:px-3">
|
||||
<Link className="flex items-center text-secondary-light hover:text-market-title-light" href={`/billboard/${url(item.id)}/${url(getLocaleTr(item, locale).title)}`}>
|
||||
{/* {getBillboardCatData({ catId: Number(item.billboard_categories[0].billboard_categories_id.id), iconClass: "!size-[14px] sm:!size-4 me-2 !fill-current" }).icon} */}
|
||||
{/* {getBillboardCatData({ catId: Number(item.billboard_categories[0].billboard_categories_id.id), iconClass: "size-[14px]! sm:size-4! me-2 fill-current!" }).icon} */}
|
||||
<h2 className="text-[13px] sm:text-sm text-current leading-6 w-full line-clamp-1">{getLocaleTr(item, locale).title}</h2>
|
||||
</Link>
|
||||
<div className="flex flex-col gap-1 mt-1">
|
||||
{/* rating */}
|
||||
<div className="flex items-center mt-1 mb-1 sm:mt-2 sm:mb-1 space-x-1 rtl:space-x-reverse">
|
||||
<StarRating rating={getRating(item).avgRating} className="text-logo-orange -mt-[2px] gap-[2px]" starClass="size-3 sm:size-[14px] shrink-0" />
|
||||
<StarRating rating={getRating(item).avgRating} className="text-logo-orange mt-[-2px] gap-[2px]" starClass="size-3 sm:size-[14px] shrink-0" />
|
||||
<span className="text-[0.675rem]/4 sm:text-xs font-semibold text-secondary-light">{`(${getRating(item).count} ${translate("vote")})`}</span>
|
||||
</div>
|
||||
<span className="w-full text-[0.675rem]/6 text-gray-500 mb-1 line-clamp-2">{stripHtml(getLocaleTr(item, locale).body)}</span>
|
||||
@ -86,7 +86,7 @@ const LatestBillboards: React.FunctionComponent<LatestBillboards> = ({ billboard
|
||||
{hours(item).hours[hours(item).today].from && `${hours(item).hours[hours(item).today].from.slice(0, 5)} - ${hours(item).hours[hours(item).today].to.slice(0, 5)}`}
|
||||
</span>
|
||||
</div>
|
||||
<span className="inline-flex items-center py-[6px] max-sm:-ms-1 sm:py-2 px-2 rounded-lg bg-[#fff] text-[0.675rem]/4 text-gray-500">
|
||||
<span className="inline-flex items-center py-[6px] max-sm:-ms-1 sm:py-2 px-2 rounded-lg bg-white text-[0.675rem]/4 text-gray-500">
|
||||
<LocationDotSolid className={`inline-block shrink-0 size-[14px] sm:size-4 fill-logo-orange me-2`} />
|
||||
{`${locale === "fa" ? item.city.state.name : item.city.state.English_name} - ${locale === "fa" ? item.city.name : item.city.English_name}`}
|
||||
</span>
|
||||
|
||||
@ -50,7 +50,7 @@ const GalleryItem: React.FunctionComponent<any> = ({ item, index, title, openGal
|
||||
figureClass="md:cursor-pointer w-full transition-all"
|
||||
/>
|
||||
:
|
||||
<span className="block w-full aspect-3/2 md:aspect-3/2 bg-gray-100 lg:bg-gray-50 rounded-lg lg:rounded">
|
||||
<span className="block w-full aspect-3/2 md:aspect-3/2 bg-gray-100 lg:bg-gray-50 rounded-lg lg:rounded-sm">
|
||||
<ImageSharpSolid className="inline-block absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-16 xl:size-24 fill-gray-200" />
|
||||
</span>
|
||||
}
|
||||
@ -86,10 +86,10 @@ const Album: React.FunctionComponent<any> = ({ pics, billboard, openGallery }) =
|
||||
autoplay={false}
|
||||
autoplayDelay={6000}
|
||||
childComponent={(x: any, i: number) => <GalleryItem key={x.id} item={x} index={i} openGallery={openGallery} title={itemTitle} />}
|
||||
sliderClass={`hidden lg:block sm:bg-[#fcfcfd] max-sm:w-[calc(100vw_-_2rem)] w-full [rtl:direction:rtl] mx-auto bg-white`}
|
||||
viewPortClass="!p-0 bg-white"
|
||||
sliderClass={`hidden lg:block sm:bg-[#fcfcfd] max-sm:w-[calc(100vw-2rem)] w-full [rtl:direction:rtl] mx-auto bg-white`}
|
||||
viewPortClass="p-0! bg-white"
|
||||
containerClass="pt-[5px]"
|
||||
controlsContainerClass="!mt-0"
|
||||
controlsContainerClass="mt-0!"
|
||||
buttonsWrapperClass=""
|
||||
/>
|
||||
)
|
||||
@ -134,18 +134,18 @@ const BillboardHeader: React.FunctionComponent<BillboardHeaderProps> = ({ billbo
|
||||
<div
|
||||
className={`block ${!billboard.cover_photo && billboard.gallery.length > 2 ? "lg:hidden" : ""} w-full lg:mt-[5px] h-52 sm:h-80 lg:h-[422px]
|
||||
${(billboard.cover_photo) || billboard.gallery.length > 0 ?
|
||||
"[background-image:var(--image-bg)] [background-size:cover] [background-position:50%_50%] md:[background-position:50%_55%]"
|
||||
"[background-image:var(--image-bg)] bg-cover bg-position-[50%_50%] md:bg-position-[50%_55%]"
|
||||
:
|
||||
"[background-color:var(--brand-color)]"}
|
||||
"bg-(--brand-color)"}
|
||||
`}
|
||||
>
|
||||
</div>
|
||||
|
||||
<div className={`block max-lg:w-[calc(100%_-2rem)] w-full mx-auto bg-white max-sm:px-0 max-2xl:px-gi mb-1 max-lg:border-4 border-gray-50/50 max-lg:-mt-9 max-lg:rounded-[2.5rem] shadow lg:shadow-sm`}>
|
||||
<div className={`block max-lg:w-[calc(100%-2rem)] w-full mx-auto bg-white max-sm:px-0 max-2xl:px-gi mb-1 max-lg:border-4 border-gray-50/50 max-lg:-mt-9 max-lg:rounded-[2.5rem] shadow-sm lg:shadow-xs`}>
|
||||
<div className="flex w-full justify-between 2xl:container mx-auto sm:py-1 xl:py-4">
|
||||
<div className="flex flex-col max-lg:w-full lg:flex-row items-center lg:gap-x-4 2xl:px-gi">
|
||||
{/* logo */}
|
||||
<div className={`block relative size-24 sm:size-32 lg:size-44 bg-white rounded-full mx-auto -mt-12 lg:mt-0 shrink-0 overflow-hidden border-4 border-white shadow-sm ${billboard.temporarily_closed ? "grayscale" : ""}`}>
|
||||
<div className={`block relative size-24 sm:size-32 lg:size-44 bg-white rounded-full mx-auto -mt-12 lg:mt-0 shrink-0 overflow-hidden border-4 border-white shadow-xs ${billboard.temporarily_closed ? "grayscale" : ""}`}>
|
||||
{hasValue(billboard.logo) ?
|
||||
<Image
|
||||
src={`${billboard.logo.id}/${billboard.logo.filename_download}`}
|
||||
@ -162,7 +162,7 @@ const BillboardHeader: React.FunctionComponent<BillboardHeaderProps> = ({ billbo
|
||||
figureClass="rounded-full w-full"
|
||||
/>
|
||||
:
|
||||
<span className="block size-full aspect-1/1 md:aspect-1/1 bg-gray-50 lg:bg-gray-50 rounded-full sm:border-[6px] border-gray-100">
|
||||
<span className="block size-full aspect-square md:aspect-square bg-gray-50 lg:bg-gray-50 rounded-full sm:border-[6px] border-gray-100">
|
||||
{currecntCatIcon}
|
||||
</span>
|
||||
}
|
||||
@ -170,7 +170,7 @@ const BillboardHeader: React.FunctionComponent<BillboardHeaderProps> = ({ billbo
|
||||
{/* highlight */}
|
||||
<div className="block relative w-full p-4 max-lg:pt-2 max-lg:pb-3">
|
||||
{/* times recommneded */}
|
||||
{timesRecommended > 0 && <div className="flex items-center w-max py-1 px-2 mb-3 lg:mb-5 rounded-lg bg-[var(--light-brand-color)] text-[var(--brand-color)] ring-1 ring-[var(--brand-color)] space-x-2 sm:space-x-2 rtl:space-x-reverse">
|
||||
{timesRecommended > 0 && <div className="flex items-center w-max py-1 px-2 mb-3 lg:mb-5 rounded-lg bg-(--light-brand-color) text-(--brand-color) ring-1 ring-(--brand-color) space-x-2 sm:space-x-2 rtl:space-x-reverse">
|
||||
<BadgeCheckSolid className="inline-block size-[14px] sm:size-4 fill-current shrink-0" />
|
||||
<span className="flex items-center shrink-0 text-current text-xs sm:text-sm font-extrabold capitalize"><span className="text-[13px]/6 sm:text-sm text-current rtl:ml-1 ltr:mr-1 rtl:-mb-1">{timesRecommended}</span>{`${translate("billboard-times-recommended")}`}</span>
|
||||
</div>}
|
||||
@ -186,7 +186,7 @@ const BillboardHeader: React.FunctionComponent<BillboardHeaderProps> = ({ billbo
|
||||
</p>
|
||||
{/* rating */}
|
||||
<div className="flex flex-col max-lg:items-center items-start max-lg:justify-center mt-4 sm:mt-4 gap-2">
|
||||
<StarRating rating={getRating.totalRating} className="text-[var(--brand-color)]" starClass="size-4 shrink-0" />
|
||||
<StarRating rating={getRating.totalRating} className="text-(--brand-color)" starClass="size-4 shrink-0" />
|
||||
<div className="flex items-center max-lg:justify-center gap-2 pt-1">
|
||||
<span className="text-sm lg:text-base font-semibold text-secondary-light">{getRating.totalRating === 0 ? 0 : String(getRating.totalRating.toFixed(1))}</span>
|
||||
<span className="text-sm font-semibold text-secondary-light">{`(${getRating.count} ${translate("vote")})`}</span>
|
||||
@ -199,7 +199,7 @@ const BillboardHeader: React.FunctionComponent<BillboardHeaderProps> = ({ billbo
|
||||
</div>
|
||||
{/* working hours */}
|
||||
<div className="flex items-center max-lg:justify-center mt-4 gap-2">
|
||||
<span className={`flex items-center text-sm lg:text-base font-semibold gap-2 ${isOpen ? "bg-success-bg text-success-text" : "bg-error-bg text-error-text"} py-[1px] px-2 rounded-lg`}>
|
||||
<span className={`flex items-center text-sm lg:text-base font-semibold gap-2 ${isOpen ? "bg-success-bg text-success-text" : "bg-error-bg text-error-text"} py-px px-2 rounded-lg`}>
|
||||
<CircleSolid className={`inline-block size-[10px] lg:size-3 fill-current ${isOpen ? "text-success-text" : "text-error-text"} shrink-0`} />
|
||||
<span className="shrink-0 text-current capitalize">{isOpen ? translate("open") : translate("closed")}</span>
|
||||
</span>
|
||||
@ -219,11 +219,11 @@ const BillboardHeader: React.FunctionComponent<BillboardHeaderProps> = ({ billbo
|
||||
</span>
|
||||
}
|
||||
<span className="text-xs lg:text-sm [direction:ltr] text-gray-500 font-semibold">{hours.hours[hours.today].from && `${hours.hours[hours.today].from.slice(0, 5)} - ${hours.hours[hours.today].to.slice(0, 5) }`}</span>
|
||||
<a href="#working-hours" className="hidden lg:flex items-center space-x-2 rtl:space-x-reverse py-1 px-2 rounded-lg bg-[var(--light-brand-color)] text-[var(--brand-color)]">
|
||||
<a href="#working-hours" className="hidden lg:flex items-center space-x-2 rtl:space-x-reverse py-1 px-2 rounded-lg bg-(--light-brand-color) text-(--brand-color)">
|
||||
<ClockSolid className={`inline-block ${hours.isOpen ? "size-3" : "size-4 sm:size-3"} fill-current shrink-0`} />
|
||||
<span className={`${hours.isOpen ? "inline-block" : "hidden sm:inline-block"} text-xs text-current`}>{translate("billboard-see-working-hours")}</span>
|
||||
</a>
|
||||
{/* <a href="#work-hours" className="flex lg:hidden items-center space-x-2 rtl:space-x-reverse py-1 px-1 rounded-lg bg-[var(--light-brand-color)] text-[var(--brand-color)]">
|
||||
{/* <a href="#work-hours" className="flex lg:hidden items-center space-x-2 rtl:space-x-reverse py-1 px-1 rounded-lg bg-(--light-brand-color) text-(--brand-color)">
|
||||
<ClockSolid className={`inline-block ${hours.isOpen ? "size-3" : "size-4 sm:size-3"} fill-current shrink-0`} />
|
||||
<span className={`${hours.isOpen ? "inline-block" : "hidden sm:inline-block"} text-xs text-current`}>{translate("billboard-see-working-hours")}</span>
|
||||
</a> */}
|
||||
@ -238,7 +238,7 @@ const BillboardHeader: React.FunctionComponent<BillboardHeaderProps> = ({ billbo
|
||||
{/* <div className="grid grid-cols-2 md:grid-cols-1 gap-4 relative w-full py-3 mt-3 md:pb-0 md:w-64 xl:w-80 shrink-0">
|
||||
<Link
|
||||
href={`/dashboard/billboards/edit`}
|
||||
className="reactive-button rounded-xl bg-[var(--brand-color)] text-white text-center text-sm py-2 px-2 shadow-none capitalize"
|
||||
className="reactive-button rounded-xl bg-(--brand-color) text-white text-center text-sm py-2 px-2 shadow-none capitalize"
|
||||
>
|
||||
<PenSolid className="inline-block size-4 fill-current rtl:ml-3 ltr:mr-3" />
|
||||
{translate("edit")}
|
||||
@ -246,7 +246,7 @@ const BillboardHeader: React.FunctionComponent<BillboardHeaderProps> = ({ billbo
|
||||
<Button
|
||||
type="button"
|
||||
text={translate("call")}
|
||||
className="rounded-xl bg-white ring-1 ring-[var(--brand-color)] text-[var(--brand-color)] text-sm py-2 px-2 shadow-none capitalize"
|
||||
className="rounded-xl bg-white ring-1 ring-(--brand-color) text-(--brand-color) text-sm py-2 px-2 shadow-none capitalize"
|
||||
leftIcon={<PhoneSolid className="inline-block size-4 fill-current rtl:ml-3 ltr:mr-3" />}
|
||||
onClick={handleCall}
|
||||
/>
|
||||
|
||||
@ -28,7 +28,7 @@ const BillboardAbout: React.FunctionComponent<BillboardAboutProps> = ({ billboar
|
||||
<div className="flex flex-col items-center justify-center w-full px-4 pt-4 pb-2 bg-white rounded-lg">
|
||||
<BillboardGallery billboard={billboard} />
|
||||
<span className="text-xl/9 font-extrabold text-center text-secondary-light pt-2 pb-5">{getLocaleTr(billboard, locale).title}</span>
|
||||
<Parser text={billboardDescription} className="[&_*]:!text-xs/6 !text-center !min-h-0" limit={descriptionLength.length > 150} />
|
||||
<Parser text={billboardDescription} className="**:text-xs/6! text-center! min-h-0!" limit={descriptionLength.length > 150} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -43,9 +43,9 @@ const BillboardLayout: React.FunctionComponent<BillboardLayoutProps> = ({ billbo
|
||||
const billboardCatData: any = useAppSelector(getGlobalMenu).billboard;
|
||||
const category = getLocaleTr(billboard.billboard_categories[0].billboard_categories_id, locale).name;
|
||||
const catId = billboard.billboard_categories[0].billboard_categories_id.id;
|
||||
const sectionIconClass = "inline-block size-4 fill-current text-[var(--brand-color)] me-3";
|
||||
const tabsIconClass = "inline-block size-4 sm:size-5 fill-current me-2 lg:me-3 -mt-[2px]";
|
||||
const catIconClass = "inline-block absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 !size-12 sm:!size-16 xl:!size-24 !fill-gray-200";
|
||||
const sectionIconClass = "inline-block size-4 fill-current text-(--brand-color) me-3";
|
||||
const tabsIconClass = "inline-block size-4 sm:size-5 fill-current me-2 lg:me-3 mt-[-2px]";
|
||||
const catIconClass = "inline-block absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-12! sm:size-16! xl:size-24! fill-gray-200!";
|
||||
const user = useAppSelector(userData);
|
||||
const currecntCatIcon = getBillboardCatData({ catId: Number(catId), iconClass: catIconClass });
|
||||
const productsTabLabel = () => {
|
||||
@ -185,9 +185,9 @@ const BillboardLayout: React.FunctionComponent<BillboardLayoutProps> = ({ billbo
|
||||
<div className="col-span-12 xl:col-span-8 rounded-lg lg:row-span-2">
|
||||
{/* breadcrumb */}
|
||||
<Breadcrumb
|
||||
className="flex items-center justify-center bg-white max-lg:shadow rounded-t-[2.5rem] lg:rounded-t-lg border-t border-gray-100/75 w-full mt-2 px-gi py-2 lg:py-3 lg:mt-0 xl:justify-start"
|
||||
textClass="lg:text-sm lg:px-1 hover:!text-[var(--brand-color)]"
|
||||
arrowClass="!text-[var(--brand-color)]"
|
||||
className="flex items-center justify-center bg-white max-lg:shadow-sm rounded-t-[2.5rem] lg:rounded-t-lg border-t border-gray-100/75 w-full mt-2 px-gi py-2 lg:py-3 lg:mt-0 xl:justify-start"
|
||||
textClass="lg:text-sm lg:px-1 hover:text-(--brand-color)!"
|
||||
arrowClass="text-(--brand-color)!"
|
||||
data={billboardCatData}
|
||||
urlParam={category}
|
||||
/>
|
||||
@ -200,7 +200,7 @@ const BillboardLayout: React.FunctionComponent<BillboardLayoutProps> = ({ billbo
|
||||
key={x.id}
|
||||
id={x.idTag}
|
||||
href={x.url}
|
||||
className={`text-center py-3 md:py-4 px-2 bg-white uppercase text-sm sm:text-base font-semibold border-b-[3px] ${currentTab === x.id ? "!text-[var(--brand-color)] border-[var(--brand-color)]" : "border-white text-secondary-light"} select-none`}
|
||||
className={`text-center py-3 md:py-4 px-2 bg-white uppercase text-sm sm:text-base font-semibold border-b-[3px] ${currentTab === x.id ? "text-(--brand-color)! border-(--brand-color)" : "border-white text-secondary-light"} select-none`}
|
||||
shallow
|
||||
scroll={false}
|
||||
>
|
||||
|
||||
@ -78,18 +78,18 @@ const SocialMedia: React.FunctionComponent<SocialMediaProps> = ({ billboard }) =
|
||||
const translate = useTranslate();
|
||||
const { locale } = useGetRouter();
|
||||
const billboardTitle = getLocaleTr(billboard, locale).title;
|
||||
const socialMediaLinkClass = "inline-block rounded-lg md:rounded-lg bg-market-input hover:bg-[var(--light-brand-color)] p-2";
|
||||
const socialMediaLinkClass = "inline-block rounded-lg md:rounded-lg bg-market-input hover:bg-(--light-brand-color) p-2";
|
||||
const socialMediaClass = "inline-block size-6 sm:size-7 fill-current text-secondary-light";
|
||||
|
||||
return <>
|
||||
<span className="block w-full text-sm sm:text-base text-current font-extrabold mt-2 mb-4 capitalize">{translate("footer-social-media-title")}</span>
|
||||
<div className="flex items-center space-x-3 rtl:space-x-reverse pt-2">
|
||||
{billboard.whatsapp && <a className={`${socialMediaLinkClass} [&>svg]:hover:text-[var(--brand-color)]`} title={`${billboardTitle} WhatsApp`} href={`https://wa.me/${billboard.whatsapp}`}><Whatsapp className={`${socialMediaClass}`} /></a>}
|
||||
{billboard.telegram && <a className={`${socialMediaLinkClass} [&>svg]:hover:text-[var(--brand-color)]`} title={`${billboardTitle} Telegram`} href={`https://t.me/${billboard.telegram}`}><Telegram className={`${socialMediaClass}`} /></a>}
|
||||
{billboard.instagram && <a className={`${socialMediaLinkClass} [&>svg]:hover:text-[var(--brand-color)]`} title={`${billboardTitle} Instagram`} href={`https://www.instagram.com/${billboard.instagram}`}><Instagram className={`${socialMediaClass}`} /></a>}
|
||||
{billboard.twitter && <a className={`${socialMediaLinkClass} [&>svg]:hover:text-[var(--brand-color)]`} title={`${billboardTitle} X`} href={`https://twitter.com/${billboard.twitter}`}><XTwitter className={`${socialMediaClass}`} /></a>}
|
||||
{billboard.youtube && <a className={`${socialMediaLinkClass} [&>svg]:hover:text-[var(--brand-color)]`} title={`${billboardTitle} YouTube`} href={`https://www.youtube.com/${billboard.youtube}`}><Youtube className={`${socialMediaClass}`} /></a>}
|
||||
{billboard.facebook && <a className={`${socialMediaLinkClass} [&>svg]:hover:text-[var(--brand-color)]`} title={`${billboardTitle} Facebook`} href={`https://www.facebook.com/${billboard.facebook}`}><Facebook className={`${socialMediaClass}`} /></a>}
|
||||
{billboard.whatsapp && <a className={`${socialMediaLinkClass} hover:[&>svg]:text-(--brand-color)`} title={`${billboardTitle} WhatsApp`} href={`https://wa.me/${billboard.whatsapp}`}><Whatsapp className={`${socialMediaClass}`} /></a>}
|
||||
{billboard.telegram && <a className={`${socialMediaLinkClass} hover:[&>svg]:text-(--brand-color)`} title={`${billboardTitle} Telegram`} href={`https://t.me/${billboard.telegram}`}><Telegram className={`${socialMediaClass}`} /></a>}
|
||||
{billboard.instagram && <a className={`${socialMediaLinkClass} hover:[&>svg]:text-(--brand-color)`} title={`${billboardTitle} Instagram`} href={`https://www.instagram.com/${billboard.instagram}`}><Instagram className={`${socialMediaClass}`} /></a>}
|
||||
{billboard.twitter && <a className={`${socialMediaLinkClass} hover:[&>svg]:text-(--brand-color)`} title={`${billboardTitle} X`} href={`https://twitter.com/${billboard.twitter}`}><XTwitter className={`${socialMediaClass}`} /></a>}
|
||||
{billboard.youtube && <a className={`${socialMediaLinkClass} hover:[&>svg]:text-(--brand-color)`} title={`${billboardTitle} YouTube`} href={`https://www.youtube.com/${billboard.youtube}`}><Youtube className={`${socialMediaClass}`} /></a>}
|
||||
{billboard.facebook && <a className={`${socialMediaLinkClass} hover:[&>svg]:text-(--brand-color)`} title={`${billboardTitle} Facebook`} href={`https://www.facebook.com/${billboard.facebook}`}><Facebook className={`${socialMediaClass}`} /></a>}
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
@ -99,7 +99,7 @@ const ContactItem: React.FunctionComponent<ContactItemProps> = ({ title, value,
|
||||
<Link href={href} className="flex items-center w-full py-2" target={target}>
|
||||
{icon}
|
||||
<span className="inline-block text-sm rtl:ml-3 ltr:mr-3 text-secondary-light capitalize">{title} :</span>
|
||||
<span className="inline-block text-xs lg:text-sm text-slate-500 [direction:ltr] hover:text-[var(--brand-color)]">{value}</span>
|
||||
<span className="inline-block text-xs lg:text-sm text-slate-500 [direction:ltr] hover:text-(--brand-color)">{value}</span>
|
||||
</Link>
|
||||
</li>
|
||||
}
|
||||
@ -161,8 +161,8 @@ const BillboardContact: React.FunctionComponent<BillboardContactProps> = ({ bill
|
||||
{(billboard.whatsapp || billboard.telegram || billboard.instagram || billboard.twitter || billboard.youtube || billboard.facebook) && <SocialMedia billboard={billboard} />}
|
||||
|
||||
{/* sharing */}
|
||||
<ClickOutside handleClass="billboard-sharing-handle" className={`!p-0 !shadow-none`} onClickOutside={() => setShareOpen(false)}>
|
||||
<div className={`${shareOpen ? "visible -translate-y-4" : "invisible"} select-none block p-2 transition-transform duration-500 [transition-timing-function:cubic-bezier(0.2,1,0.3,1)] bottom-36 bg-market-input w-full sm:w-96 absolute shadow-lg left-1/2 -translate-x-1/2 rounded-lg z-20`}>
|
||||
<ClickOutside handleClass="billboard-sharing-handle" className={`p-0! shadow-none!`} onClickOutside={() => setShareOpen(false)}>
|
||||
<div className={`${shareOpen ? "visible -translate-y-4" : "invisible"} select-none block p-2 transition-transform duration-500 ease-[cubic-bezier(0.2,1,0.3,1)] bottom-36 bg-market-input w-full sm:w-96 absolute shadow-lg left-1/2 -translate-x-1/2 rounded-lg z-20`}>
|
||||
<div className="flex flex-col items-center rounded-lg bg-white p-6">
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<span className="text-base xl:text-base font-semibold block w-full text-secondary-light uppercase">{translate("article-share-title")}</span>
|
||||
@ -189,11 +189,11 @@ const BillboardContact: React.FunctionComponent<BillboardContactProps> = ({ bill
|
||||
</ClickOutside>
|
||||
<div className="block mt-6 mb-4">
|
||||
<span className="block w-full text-sm sm:text-base text-current font-extrabold capitalize">{translate("article-share-title")}</span>
|
||||
<ShareNodesSolid className="billboard-sharing-handle inline-block rounded-lg md:rounded-lg bg-market-input hover:bg-[var(--light-brand-color)] p-2 mt-6 size-9 sm:size-10 fill-current text-secondary-light hover:text-[var(--brand-color)] lg:cursor-pointer" onClick={() => setShareOpen(true)} />
|
||||
<ShareNodesSolid className="billboard-sharing-handle inline-block rounded-lg md:rounded-lg bg-market-input hover:bg-(--light-brand-color) p-2 mt-6 size-9 sm:size-10 fill-current text-secondary-light hover:text-(--brand-color) lg:cursor-pointer" onClick={() => setShareOpen(true)} />
|
||||
</div>
|
||||
|
||||
{/* contact button */}
|
||||
<a href={`tel:${billboard.phone_number}`} className="reactive-button block w-full capitalize py-3 px-4 mt-10 rounded-lg bg-[var(--brand-color)] text-white font-semibold text-sm/6 text-center">
|
||||
<a href={`tel:${billboard.phone_number}`} className="reactive-button block w-full capitalize py-3 px-4 mt-10 rounded-lg bg-(--brand-color) text-white font-semibold text-sm/6 text-center">
|
||||
<PhoneSolid className={`inline-block size-4 xl:size-4 shrink-0 rtl:ml-3 ltr:mr-3 fill-current`} />
|
||||
{translate("billboard-contact-business")}
|
||||
</a>
|
||||
|
||||
@ -33,18 +33,18 @@ const BillboardFaq: React.FunctionComponent<BillboardFaqProps> = ({ billboard })
|
||||
<Accordion
|
||||
key={x.question + i}
|
||||
title={x.question}
|
||||
header={<span className="block absolute -top-[80px]"></span>}
|
||||
iconStart={<PlusSolid className="inline-block size-4 fill-current text-[var(--brand-color)] shrink-0" />}
|
||||
header={<span className="block absolute top-[-80px]"></span>}
|
||||
iconStart={<PlusSolid className="inline-block size-4 fill-current text-(--brand-color) shrink-0" />}
|
||||
titleClass="flex items-center bg-white lg:bg-white select-none font-semibold py-2 sm:py-2 sm:px-3 capitalize lg:px-1 lg:cursor-pointer"
|
||||
titleWrapperClass="inline-block text-sm/7 sm:rtl:ml-7 rtl:mr-3 sm:ltr:mr-7 ltr:ml-3 text-secondary-light"
|
||||
className={`bg-white mb-2 pb-2 xl:px-0 overflow-visible border-b border-gray-100 last:border-none`}
|
||||
openClass="border-none"
|
||||
iconClass="hidden sm:block fill-[var(--brand-color)] w-4 h-4 absolute rtl:left-0 ltr:right-0 rtl:xl:left-2 ltr:xl:right-2"
|
||||
iconClass="hidden sm:block fill-(--brand-color) w-4 h-4 absolute rtl:left-0 ltr:right-0 xl:rtl:left-2 xl:ltr:right-2"
|
||||
bodyClass="pt-3 pb-1"
|
||||
isOpen={false}
|
||||
shouldStartIconRotate
|
||||
>
|
||||
<Parser text={x.answer} className="py-2 sm:py-4 px-4 sm:px-8 bg-gray-50/75 rounded-lg [&_*]:!text-xs/6 lg:[&_*]:!text-sm/7" />
|
||||
<Parser text={x.answer} className="py-2 sm:py-4 px-4 sm:px-8 bg-gray-50/75 rounded-lg **:text-xs/6! lg:**:text-sm/7!" />
|
||||
</Accordion>
|
||||
))}
|
||||
|
||||
|
||||
@ -65,7 +65,7 @@ const BillboardGallery: React.FunctionComponent<BillboardGalleryProps> = ({ bill
|
||||
onClick={() => openGallery(i)}
|
||||
/>
|
||||
:
|
||||
<span className="block size-full aspect-1/1 md:aspect-1/1 bg-gray-100 lg:bg-gray-50 rounded-lg lg:rounded-2xl">
|
||||
<span className="block size-full aspect-square md:aspect-square bg-gray-100 lg:bg-gray-50 rounded-lg lg:rounded-2xl">
|
||||
<ImageSharpSolid className="inline-block absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-16 xl:size-24 fill-gray-200" />
|
||||
</span>
|
||||
}
|
||||
|
||||
@ -45,8 +45,8 @@ const BillboardMap: React.FunctionComponent<BillboardMapProps> = ({ billboard })
|
||||
className="block w-full h-64"
|
||||
>
|
||||
<div className={`${showMap ? "hidden" : "flex"} flex-col items-center justify-center w-full h-full space-y-8 rounded-lg lg:cursor-pointer bg-gray-50
|
||||
[background-image:url('/pics/patterns/white-texture.png')] bg-repeat`} onClick={() => setShowMap(true)}>
|
||||
<span className="inline-block text-center text-lg py-2 px-4 rounded-lg bg-[var(--brand-color)] text-white">{translate("billboard-contact-show-map")}</span>
|
||||
bg-[url('/pics/patterns/white-texture.png')] bg-repeat`} onClick={() => setShowMap(true)}>
|
||||
<span className="inline-block text-center text-lg py-2 px-4 rounded-lg bg-(--brand-color) text-white">{translate("billboard-contact-show-map")}</span>
|
||||
{/* <img
|
||||
src="/pics/billboard/pirate-map.jpg"
|
||||
alt={translate("billboard-contact-show-map")}
|
||||
|
||||
@ -113,7 +113,7 @@ const MenuItem: React.FunctionComponent<MenuItemProps> = ({ id, label, noTitle =
|
||||
shallow
|
||||
scroll={false}
|
||||
href={`/billboard/${billboardId}/${url(billboardTitle)}${link}`}
|
||||
className={`flex flex-col items-center justify-center ${id === 1 ? "space-y-1" : "space-y-2"} py-3 px-1 ${isActive ? "text-[var(--brand-color)]" : "text-secondary-light"} ${className}`}
|
||||
className={`flex flex-col items-center justify-center ${id === 1 ? "space-y-1" : "space-y-2"} py-3 px-1 ${isActive ? "text-(--brand-color)" : "text-secondary-light"} ${className}`}
|
||||
onClick={() => onClick(id)}
|
||||
>
|
||||
{filterIcon(isActive ? activeIcon : icon)}
|
||||
@ -160,7 +160,7 @@ const BillboardMenu: React.FunctionComponent<BillboardMenuProps> = ({ billboardI
|
||||
|
||||
return (
|
||||
<div className="block w-full sticky bottom-0 z-20">
|
||||
{asPath.includes("?product=") && <ReplySolid className="reactive-button inline-block lg:hidden absolute size-11 rtl:left-3 ltr:right-3 ltr:[transform:rotateY(180deg)] bottom-24 fill-current p-3 rounded-full bg-white text-[var(--brand-color)] shadow-strong z-[25]" onClick={onBack} />}
|
||||
{asPath.includes("?product=") && <ReplySolid className="reactive-button inline-block lg:hidden absolute size-11 rtl:left-3 ltr:right-3 ltr:transform-[rotateY(180deg)] bottom-24 fill-current p-3 rounded-full bg-white text-(--brand-color) shadow-strong z-25" onClick={onBack} />}
|
||||
<div className={`grid grid-cols-3 items-center w-full bg-white py-0 px-4 shadow-top-strong ${className}`}>
|
||||
{menuData.map((x, i) => (
|
||||
<MenuItem
|
||||
|
||||
@ -93,7 +93,7 @@ const SocialMediaButton = ({ icon, text, link, bgColor, color, className, onClic
|
||||
}
|
||||
|
||||
const Label: React.FunctionComponent<LabelProps> = ({ value, className }) => {
|
||||
return <div className={`inline-block absolute top-0 -translate-y-1/2 rtl:right-[1.5rem] ltr:left-[1.5rem] px-4 py-[2px] rounded z-10 text-white text-xs font-normal uppercase ${className}`}>
|
||||
return <div className={`inline-block absolute top-0 -translate-y-1/2 rtl:right-6 ltr:left-6 px-4 py-[2px] rounded-sm z-10 text-white text-xs font-normal uppercase ${className}`}>
|
||||
{value}
|
||||
</div>
|
||||
}
|
||||
@ -116,8 +116,8 @@ const GalleryItem: React.FunctionComponent<GalleryItemProps> = ({ title, pic, in
|
||||
priority={true}
|
||||
noPreload={true}
|
||||
fetchPriority="low"
|
||||
className={`w-full rounded-lg !object-cover sm:!object-contain`}
|
||||
figureClass="rounded-lg w-full max-h-80 sm:max-h-[450px] select-none [&>div]:!bg-transparent lg:cursor-pointer"
|
||||
className={`w-full rounded-lg object-cover! sm:object-contain!`}
|
||||
figureClass="rounded-lg w-full max-h-80 sm:max-h-[450px] select-none [&>div]:bg-transparent! lg:cursor-pointer"
|
||||
/>
|
||||
:
|
||||
<span className="block size-full rounded-full bg-gray-50">
|
||||
@ -289,11 +289,11 @@ const NewsDetails: React.FunctionComponent<NewsDetailsProps> = ({ billboardId, b
|
||||
|
||||
return <>
|
||||
<div className="flex items-center justify-between w-full py-2 lg:py-3 px-4 bg-white border-b border-gray-200/75">
|
||||
<span className="inlin-block py-2 px-4 rounded-lg bg-[var(--light-brand-color)] text-xs lg:text-sm text-[var(--brand-color)]">
|
||||
<span className="inlin-block py-2 px-4 rounded-lg bg-(--light-brand-color) text-xs lg:text-sm text-(--brand-color)">
|
||||
<SplitSolid className="inline-block size-3 lg:size-3 fill-current rtl:ml-2 ltr:mr-2 lg:rtl:ml-2 lg:ltr:mr-2" />
|
||||
{newsData.category[0] ? getLocaleTr(newsData.category[0].billboard_news_categories_id, locale).name : translate("general")}
|
||||
</span>
|
||||
<ReplySolid className="reactive-button inline-block size-9 lg:size-11 ltr:rotate-180 fill-current p-2 lg:p-3 rounded-full bg-[var(--light-brand-color)] text-[var(--brand-color)]" onClick={onBack} />
|
||||
<ReplySolid className="reactive-button inline-block size-9 lg:size-11 ltr:rotate-180 fill-current p-2 lg:p-3 rounded-full bg-(--light-brand-color) text-(--brand-color)" onClick={onBack} />
|
||||
</div>
|
||||
|
||||
{newsData.video_link ?
|
||||
@ -327,8 +327,8 @@ const NewsDetails: React.FunctionComponent<NewsDetailsProps> = ({ billboardId, b
|
||||
priority={true}
|
||||
noPreload={true}
|
||||
fetchPriority="low"
|
||||
className={`w-auto rounded-lg !object-contain`}
|
||||
figureClass="rounded-lg w-full max-h-[450px] select-none [&>div]:!bg-transparent"
|
||||
className={`w-auto rounded-lg object-contain!`}
|
||||
figureClass="rounded-lg w-full max-h-[450px] select-none [&>div]:bg-transparent!"
|
||||
/>
|
||||
:
|
||||
<span className="block size-full rounded-full bg-gray-50">
|
||||
@ -351,7 +351,7 @@ const NewsDetails: React.FunctionComponent<NewsDetailsProps> = ({ billboardId, b
|
||||
autoplay={false}
|
||||
childComponent={(x: any, i) => <GalleryItem key={i} title={getLocaleTr(newsData, locale).title} pic={x.directus_files_id} index={i} onClick={openGallery} />}
|
||||
sliderClass={`block w-full [rtl:direction:rtl] mx-auto bg-white`}
|
||||
viewPortClass="!p-0 bg-white"
|
||||
viewPortClass="p-0! bg-white"
|
||||
containerClass=""
|
||||
slideClass=""
|
||||
controlsContainerClass="mt-8 mb-4"
|
||||
@ -362,11 +362,11 @@ const NewsDetails: React.FunctionComponent<NewsDetailsProps> = ({ billboardId, b
|
||||
}
|
||||
|
||||
<div className={`block w-full relative px-4 lg:px-8 rounded-lg bg-white mt-1 border-b border-gray-200/75
|
||||
${newsData.features?.includes("celebrate") ? "[background-image:url('/pics/patterns/memphis-colorful.webp')] [background-size:200px] lg:[background-size:300px] bg-repeat bg-blend-multiply py-6" : "py-2"}
|
||||
${newsData.features?.includes("celebrate") ? "bg-[url('/pics/patterns/memphis-colorful.webp')] bg-size-[200px] lg:bg-size-[300px] bg-repeat bg-blend-multiply py-6" : "py-2"}
|
||||
`}>
|
||||
<div className="block px-4 lg:px-6 pt-2 pb-4 rounded-lg bg-white/85">
|
||||
{/* labels */}
|
||||
{newsData.features?.includes("celebrate") && <Label value={translate("billboard-news-label-celebrate")} className="bg-[var(--brand-color)]" />}
|
||||
{newsData.features?.includes("celebrate") && <Label value={translate("billboard-news-label-celebrate")} className="bg-(--brand-color)" />}
|
||||
{newsData.features?.includes("hot") && <Label value={translate("billboard-news-label-hot")} className="bg-primary" />}
|
||||
{newsData.features?.includes("limited") && <Label value={translate("billboard-news-label-limited")} className="bg-violet-600" />}
|
||||
|
||||
@ -376,7 +376,7 @@ const NewsDetails: React.FunctionComponent<NewsDetailsProps> = ({ billboardId, b
|
||||
<div className="flex items-center justify-between w-full border-b border-dashed border-gray-200/75 px-1 pt-6 lg:pt-12 pb-2">
|
||||
{/* date */}
|
||||
<span className="flex items-center text-sm text-secondary-light">
|
||||
<CalendarDaysSolid className="inline-block size-[14px] fill-cool-gray rtl:ml-2 ltr:mr-2 -mt-[2px]" />
|
||||
<CalendarDaysSolid className="inline-block size-[14px] fill-cool-gray rtl:ml-2 ltr:mr-2 mt-[-2px]" />
|
||||
{getSmartTime(newsData.date_created)}
|
||||
</span>
|
||||
{/* seen & likes */}
|
||||
@ -394,11 +394,11 @@ const NewsDetails: React.FunctionComponent<NewsDetailsProps> = ({ billboardId, b
|
||||
</header>
|
||||
|
||||
{/* content */}
|
||||
<Parser limit limitLength={800} text={getLocaleTr(newsData, locale).content} className={`[&_*]:!text-sm/7 [&_*]:lg:!text-sm/7 !min-h-0 [&_*]:!text-start`} />
|
||||
<Parser limit limitLength={800} text={getLocaleTr(newsData, locale).content} className={`**:text-sm/7! lg:**:text-sm/7! min-h-0! **:text-start!`} />
|
||||
{getLocaleTr(newsData, locale).cta_link &&
|
||||
<Link
|
||||
href={`${getLocaleTr(newsData, locale).cta_link}`}
|
||||
className="reactive-button block mx-auto w-max py-3 px-6 rounded-xl bg-[var(--brand-color)] text-white text-sm lg:text-base font-semibold mt-6 mb-4 select-none uppercase"
|
||||
className="reactive-button block mx-auto w-max py-3 px-6 rounded-xl bg-(--brand-color) text-white text-sm lg:text-base font-semibold mt-6 mb-4 select-none uppercase"
|
||||
>
|
||||
{getLocaleTr(newsData, locale).cta}
|
||||
</Link>
|
||||
@ -407,8 +407,8 @@ const NewsDetails: React.FunctionComponent<NewsDetailsProps> = ({ billboardId, b
|
||||
{/* footer */}
|
||||
<footer className="flex items-center w-full px-8 mt-6 mb-4 pt-4 lg:pt-8 border-t border-dashed">
|
||||
{/* sharing */}
|
||||
<ClickOutside handleClass="news-sharing-handle" className={`!p-0 !shadow-none`} onClickOutside={() => setShareOpen(false)}>
|
||||
<div className={`${shareOpen ? "visible -translate-y-4" : "invisible"} select-none block p-2 transition-transform duration-500 [transition-timing-function:cubic-bezier(0.2,1,0.3,1)] bottom-24 lg:bottom-28 bg-market-input w-full sm:w-96 absolute shadow-lg left-1/2 -translate-x-1/2 rounded-lg z-20`}>
|
||||
<ClickOutside handleClass="news-sharing-handle" className={`p-0! shadow-none!`} onClickOutside={() => setShareOpen(false)}>
|
||||
<div className={`${shareOpen ? "visible -translate-y-4" : "invisible"} select-none block p-2 transition-transform duration-500 ease-[cubic-bezier(0.2,1,0.3,1)] bottom-24 lg:bottom-28 bg-market-input w-full sm:w-96 absolute shadow-lg left-1/2 -translate-x-1/2 rounded-lg z-20`}>
|
||||
<div className="flex flex-col items-center rounded-lg bg-white p-6">
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<span className="text-base xl:text-base font-semibold block w-full text-secondary-light uppercase">{translate("article-share-title")}</span>
|
||||
@ -438,13 +438,13 @@ const NewsDetails: React.FunctionComponent<NewsDetailsProps> = ({ billboardId, b
|
||||
{isAuthenticated ?
|
||||
(userLikesList && newsData) &&
|
||||
isLiked ?
|
||||
<FilledHeart className="login-needed-handle-liked-news inline-block p-2 size-9 sm:size-9 bg-market-input fill-primary rounded-lg md:rounded-lg lg:cursor-pointer hover:fill-[var(--brand-color)]" onClick={handleNewsLike} />
|
||||
<FilledHeart className="login-needed-handle-liked-news inline-block p-2 size-9 sm:size-9 bg-market-input fill-primary rounded-lg md:rounded-lg lg:cursor-pointer hover:fill-(--brand-color)" onClick={handleNewsLike} />
|
||||
:
|
||||
<EmptyHeart className="login-needed-handle-liked-news inline-block p-2 size-9 sm:size-9 bg-market-input fill-secondary-light rounded-lg md:rounded-lg lg:cursor-pointer hover:fill-[var(--brand-color)]" onClick={handleNewsLike} />
|
||||
<EmptyHeart className="login-needed-handle-liked-news inline-block p-2 size-9 sm:size-9 bg-market-input fill-secondary-light rounded-lg md:rounded-lg lg:cursor-pointer hover:fill-(--brand-color)" onClick={handleNewsLike} />
|
||||
:
|
||||
<EmptyHeart className="login-needed-handle-liked-news inline-block p-2 size-9 sm:size-9 bg-market-input fill-secondary-light rounded-lg md:rounded-lg lg:cursor-pointer hover:fill-[var(--brand-color)]" onClick={handleNewsLike} />
|
||||
<EmptyHeart className="login-needed-handle-liked-news inline-block p-2 size-9 sm:size-9 bg-market-input fill-secondary-light rounded-lg md:rounded-lg lg:cursor-pointer hover:fill-(--brand-color)" onClick={handleNewsLike} />
|
||||
}
|
||||
<ShareNodesSolid className="news-sharing-handle inline-block rounded-lg md:rounded-lg bg-market-input hover:bg-[var(--light-brand-color)] p-2 size-9 sm:size-9 fill-current text-secondary-light hover:text-[var(--brand-color)] lg:cursor-pointer" onClick={() => setShareOpen(true)} />
|
||||
<ShareNodesSolid className="news-sharing-handle inline-block rounded-lg md:rounded-lg bg-market-input hover:bg-(--light-brand-color) p-2 size-9 sm:size-9 fill-current text-secondary-light hover:text-(--brand-color) lg:cursor-pointer" onClick={() => setShareOpen(true)} />
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
@ -58,27 +58,27 @@ const PicOnlyNews: React.FunctionComponent<PicOnlyNewsProps> = ({ item, billboar
|
||||
scroll={false}
|
||||
target={"_self"}
|
||||
style={{ "--col-span": `span ${item.col_span} / span ${item.col_span}`, "--dominant-color": dominantColor } as React.CSSProperties}
|
||||
className={`max-lg:reactive-button flex w-full max-h-[420px] relative bg-white shrink-0 border-b p-2 lg:p-1 border-gray-100 lg:rounded-lg [grid-column:var(--col-span)] [grid-row:var(--row-span)]
|
||||
className={`max-lg:reactive-button flex w-full max-h-[420px] relative bg-white shrink-0 border-b p-2 lg:p-1 border-gray-100 lg:rounded-lg col-(--col-span) row-(--row-span)
|
||||
lg:cursor-pointer
|
||||
${item.features?.includes("celebrate") ? "!bg-[var(--brand-color)]" : ""}
|
||||
${item.features?.includes("hot") ? "!bg-primary" : ""}
|
||||
${item.features?.includes("limited") ? "!bg-violet-600" : ""}
|
||||
[&_.pic-only-overlay]:hover:lg:block`}
|
||||
${item.features?.includes("celebrate") ? "bg-(--brand-color)!" : ""}
|
||||
${item.features?.includes("hot") ? "bg-primary!" : ""}
|
||||
${item.features?.includes("limited") ? "bg-violet-600!" : ""}
|
||||
lg:hover:[&_.pic-only-overlay]:block`}
|
||||
>
|
||||
{item.pinned && <ThumbTackSolid className="inline-block absolute z-10 -top-4 rtl:left-4 ltr:right-4 size-5 rounded rtl:-rotate-12 ltr:rotate-12 bg-white p-1 fill-secondary-light" />}
|
||||
{item.features?.includes("celebrate") && <Label value={translate("billboard-news-label-celebrate")} className="bg-[var(--brand-color)]" />}
|
||||
{item.pinned && <ThumbTackSolid className="inline-block absolute z-10 -top-4 rtl:left-4 ltr:right-4 size-5 rounded-sm rtl:-rotate-12 ltr:rotate-12 bg-white p-1 fill-secondary-light" />}
|
||||
{item.features?.includes("celebrate") && <Label value={translate("billboard-news-label-celebrate")} className="bg-(--brand-color)" />}
|
||||
{item.features?.includes("hot") && <Label value={translate("billboard-news-label-hot")} className="bg-primary" />}
|
||||
{item.features?.includes("limited") && <Label value={translate("billboard-news-label-limited")} className="bg-violet-600" />}
|
||||
<div
|
||||
className={`flex w-full relative bg-white/75 rounded-lg
|
||||
${item.features?.includes("celebrate") ? "!bg-[var(--brand-color)]" : ""}
|
||||
${item.features?.includes("hot") ? "!bg-primary" : ""}
|
||||
${item.features?.includes("limited") ? "!bg-violet-50/75" : ""}
|
||||
${item.features?.includes("celebrate") ? "bg-(--brand-color)!" : ""}
|
||||
${item.features?.includes("hot") ? "bg-primary!" : ""}
|
||||
${item.features?.includes("limited") ? "bg-violet-50/75!" : ""}
|
||||
`}>
|
||||
<div className={`block w-full h-auto relative rounded-lg border-0 border-[var(--dominant-color)]
|
||||
${item.features?.includes("celebrate") ? "!border-[var(--brand-color)]" : ""}
|
||||
${item.features?.includes("hot") ? "!border-primary" : ""}
|
||||
${item.features?.includes("limited") ? "!border-violet-600" : ""}
|
||||
<div className={`block w-full h-auto relative rounded-lg border-0 border-(--dominant-color)
|
||||
${item.features?.includes("celebrate") ? "border-(--brand-color)!" : ""}
|
||||
${item.features?.includes("hot") ? "border-primary!" : ""}
|
||||
${item.features?.includes("limited") ? "border-violet-600!" : ""}
|
||||
`}>
|
||||
{pic ?
|
||||
<Image
|
||||
@ -93,7 +93,7 @@ const PicOnlyNews: React.FunctionComponent<PicOnlyNewsProps> = ({ item, billboar
|
||||
noPreload={true}
|
||||
fetchPriority="low"
|
||||
className={`rounded-md object-contain`}
|
||||
figureClass="rounded-md w-full select-none [&>div]:!bg-transparent"
|
||||
figureClass="rounded-md w-full select-none [&>div]:bg-transparent!"
|
||||
/>
|
||||
:
|
||||
<span className="block size-full rounded-lg lg:rounded-md">
|
||||
@ -104,12 +104,12 @@ const PicOnlyNews: React.FunctionComponent<PicOnlyNewsProps> = ({ item, billboar
|
||||
</div>
|
||||
<div className={`pic-only-overlay hidden lg:hidden w-full h-full p-1 absolute top-0 left-0 rounded-lg`}>
|
||||
<div className={`flex items-center justify-center w-full h-full bg-black/50 rounded-lg`}>
|
||||
<span className={`inline-block text-base py-3 px-4 rounded-xl bg-[var(--dominant-color)] text-white lg:cursor-pointer
|
||||
${item.features?.includes("celebrate") ? "!bg-[var(--brand-color)]" : ""}
|
||||
${item.features?.includes("hot") ? "!bg-primary" : ""}
|
||||
${item.features?.includes("limited") ? "!bg-violet-600" : ""}
|
||||
<span className={`inline-block text-base py-3 px-4 rounded-xl bg-(--dominant-color) text-white lg:cursor-pointer
|
||||
${item.features?.includes("celebrate") ? "bg-(--brand-color)!" : ""}
|
||||
${item.features?.includes("hot") ? "bg-primary!" : ""}
|
||||
${item.features?.includes("limited") ? "bg-violet-600!" : ""}
|
||||
`}>
|
||||
<PartyHornSolid className="inline-block size-5 rounded fill-current rtl:ml-3 ltr:mr-3" />
|
||||
<PartyHornSolid className="inline-block size-5 rounded-sm fill-current rtl:ml-3 ltr:mr-3" />
|
||||
{translate("see-details")}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -18,7 +18,7 @@ interface LabelProps {
|
||||
}
|
||||
|
||||
const Label: React.FunctionComponent<LabelProps> = ({ value, className }) => {
|
||||
return <div className={`inline-block absolute top-0 -translate-y-1/2 rtl:right-[7.5rem] ltr:left-[7.5rem] px-4 py-[2px] rounded z-10 text-white text-xs font-normal uppercase ${className}`}>
|
||||
return <div className={`inline-block absolute top-0 -translate-y-1/2 rtl:right-30 ltr:left-30 px-4 py-[2px] rounded-sm z-10 text-white text-xs font-normal uppercase ${className}`}>
|
||||
{value}
|
||||
</div>
|
||||
}
|
||||
@ -57,27 +57,27 @@ const RegularNews: React.FunctionComponent<RegularNewsProps> = ({ item, billboar
|
||||
scroll={false}
|
||||
target={"_self"}
|
||||
className={`max-lg:reactive-button flex w-full relative bg-white shrink-0 border-b px-2 py-2 border-gray-100 lg:rounded-lg col-span-2 ${item.pinned ? "md:col-span-2" : "md:col-span-1"}
|
||||
lg:cursor-pointer lg:hover:shadow-lg [&_.button]:hover:bg-[var(--brand-color)] [&_.button]:hover:text-white [&_.button]:hover:ring-[var(--brand-color)]
|
||||
${item.features?.includes("celebrate") ? "[background-image:url('/pics/patterns/memphis-colorful.webp')] bg-contain bg-repeat bg-blend-multiply" : ""}
|
||||
${item.features?.includes("hot") ? "!bg-error-bg" : ""}
|
||||
${item.features?.includes("limited") ? "!bg-violet-50" : ""}
|
||||
lg:cursor-pointer lg:hover:shadow-lg hover:[&_.button]:bg-(--brand-color) hover:[&_.button]:text-white hover:[&_.button]:ring-(--brand-color)
|
||||
${item.features?.includes("celebrate") ? "bg-[url('/pics/patterns/memphis-colorful.webp')] bg-contain bg-repeat bg-blend-multiply" : ""}
|
||||
${item.features?.includes("hot") ? "bg-error-bg!" : ""}
|
||||
${item.features?.includes("limited") ? "bg-violet-50!" : ""}
|
||||
`}
|
||||
>
|
||||
{item.pinned && <ThumbTackSolid className="inline-block absolute -top-2 rtl:right-4 ltr:left-4 z-10 rtl:rotate-12 ltr:-rotate-12 size-5 rounded bg-white p-1 fill-secondary-light" />}
|
||||
{item.features?.includes("celebrate") && <Label value={translate("billboard-news-label-celebrate")} className="bg-[var(--brand-color)]" />}
|
||||
{item.pinned && <ThumbTackSolid className="inline-block absolute -top-2 rtl:right-4 ltr:left-4 z-10 rtl:rotate-12 ltr:-rotate-12 size-5 rounded-sm bg-white p-1 fill-secondary-light" />}
|
||||
{item.features?.includes("celebrate") && <Label value={translate("billboard-news-label-celebrate")} className="bg-(--brand-color)" />}
|
||||
{item.features?.includes("hot") && <Label value={translate("billboard-news-label-hot")} className="bg-primary" />}
|
||||
{item.features?.includes("limited") && <Label value={translate("billboard-news-label-limited")} className="bg-violet-600" />}
|
||||
<div
|
||||
style={{ "--dominant-color": dominantColor } as React.CSSProperties}
|
||||
className={`flex w-full relative bg-white/75 px-1 py-1 rounded-lg
|
||||
${item.features?.includes("celebrate") ? "!bg-white/75" : ""}
|
||||
${item.features?.includes("hot") ? "!bg-error-bg/75" : ""}
|
||||
${item.features?.includes("limited") ? "!bg-violet-50/75" : ""}
|
||||
${item.features?.includes("celebrate") ? "bg-white/75!" : ""}
|
||||
${item.features?.includes("hot") ? "bg-error-bg/75!" : ""}
|
||||
${item.features?.includes("limited") ? "bg-violet-50/75!" : ""}
|
||||
`}>
|
||||
<div className={`block size-20 sm:size-28 relative shrink-0 mx-2 mt-2 border-[4px] rounded-full border-gray-100
|
||||
${item.features?.includes("celebrate") ? "!border-[var(--brand-color)]" : ""}
|
||||
${item.features?.includes("hot") ? "!border-primary" : ""}
|
||||
${item.features?.includes("limited") ? "!border-violet-600" : ""}
|
||||
<div className={`block size-20 sm:size-28 relative shrink-0 mx-2 mt-2 border-4 rounded-full border-gray-100
|
||||
${item.features?.includes("celebrate") ? "border-(--brand-color)!" : ""}
|
||||
${item.features?.includes("hot") ? "border-primary!" : ""}
|
||||
${item.features?.includes("limited") ? "border-violet-600!" : ""}
|
||||
`}>
|
||||
{pic ?
|
||||
<Image
|
||||
@ -92,7 +92,7 @@ const RegularNews: React.FunctionComponent<RegularNewsProps> = ({ item, billboar
|
||||
noPreload={true}
|
||||
fetchPriority="low"
|
||||
className={`rounded-full object-cover`}
|
||||
figureClass="rounded-full w-full select-none [&>div]:!bg-transparent"
|
||||
figureClass="rounded-full w-full select-none [&>div]:bg-transparent!"
|
||||
/>
|
||||
:
|
||||
<span className="block size-full rounded-full bg-gray-50">
|
||||
|
||||
@ -236,7 +236,7 @@ const BillboardNews: React.FunctionComponent<BillboardNewsProps> = ({ billboardI
|
||||
<span className="block text-xl md:text-2xl font-extrabold text-secondary-light uppercase">{translate("billboard-news-intro-title")}</span>
|
||||
<p className="block w-full max-md:px-4 md:w-[480px] mx-auto text-sm/7 md:text-sm/7 text-center first-letter:capitalize">"{translate("billboard-news-intro-text")}"</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between w-[calc(100vw_-_2rem)] lg:w-[calc(100%_-_2rem)] mx-4 pt-4 pb-4">
|
||||
<div className="flex items-center justify-between w-[calc(100vw-2rem)] lg:w-[calc(100%-2rem)] mx-4 pt-4 pb-4">
|
||||
{/* filters */}
|
||||
{/* <div className={`${searchVisible ? "hidden" : "flex"} md:flex shrink-0 items-center space-x-1 rtl:space-x-reverse rounded-lg`}>
|
||||
{newsCategories && <Select
|
||||
@ -260,7 +260,7 @@ const BillboardNews: React.FunctionComponent<BillboardNewsProps> = ({ billboardI
|
||||
onChange={(data) => handleCatSelection(data.value)}
|
||||
optionsWrapper="inline-block w-full px-2 rounded-lg bg-white capitalize text-sm py-1"
|
||||
wrapperClass="block w-52 bg-neutral-100/75 rounded-xl py-2 px-2"
|
||||
buttonText='!text-sm'
|
||||
buttonText='text-sm!'
|
||||
/>
|
||||
{/* products search */}
|
||||
<div className={`flex items-center ${searchVisible ? "max-md:w-full" : ""}`}>
|
||||
@ -270,7 +270,7 @@ const BillboardNews: React.FunctionComponent<BillboardNewsProps> = ({ billboardI
|
||||
placeholder={translate("billboard-news-search-placeholder")}
|
||||
stripeHtml
|
||||
onInput={handleproductSearch}
|
||||
className={`${searchVisible ? "block" : "hidden"} md:block w-full py-3 px-4 text-sm placeholder:text-xs placeholder:capitalize outline-none rounded-xl bg-gray-100/75`}
|
||||
className={`${searchVisible ? "block" : "hidden"} md:block w-full py-3 px-4 text-sm placeholder:text-xs placeholder:capitalize outline-hidden rounded-xl bg-gray-100/75`}
|
||||
wrapperClass="w-full md:w-64"
|
||||
/>
|
||||
{searchVisible ?
|
||||
@ -308,9 +308,9 @@ const BillboardNews: React.FunctionComponent<BillboardNewsProps> = ({ billboardI
|
||||
pageSize={itemsPerPage}
|
||||
onSelect={setCurrentPage}
|
||||
wrapperClass="w-max pb-8 pt-2 lg:pt-8"
|
||||
prevClass="!rounded-full"
|
||||
nextClass="!rounded-full"
|
||||
counterClass="!rounded-full"
|
||||
prevClass="rounded-full!"
|
||||
nextClass="rounded-full!"
|
||||
counterClass="rounded-full!"
|
||||
/>
|
||||
</>
|
||||
:
|
||||
|
||||
@ -41,7 +41,7 @@ const ProductBreadcrumbDesktop: React.FunctionComponent<ProductBreadcrumbDesktop
|
||||
|
||||
return (
|
||||
<div className="hidden lg:flex items-center justify-between relative w-full mb-3 lg:mb-8">
|
||||
<div className="flex items-center w-max text-[var(--brand-color)]">
|
||||
<div className="flex items-center w-max text-(--brand-color)">
|
||||
<SplitSolid className="inline-block size-3 lg:size-3 fill-current rtl:ml-3 ltr:mr-3 lg:rtl:ml-3 lg:ltr:mr-3" />
|
||||
<div className="flex items-center space-x-2 rtl:space-x-reverse">
|
||||
{productCategory.parent.length > 0 &&
|
||||
@ -49,7 +49,7 @@ const ProductBreadcrumbDesktop: React.FunctionComponent<ProductBreadcrumbDesktop
|
||||
href={`/billboard/${billboardId}/${url(billboardTitle)}/products/?cat=${productCategory.parent[0]}`}
|
||||
scroll={false}
|
||||
shallow
|
||||
className="inline-block text-xs lg:text-xs text-current font-semibold capitalize py-1 px-3 rounded bg-[var(--light-brand-color)]"
|
||||
className="inline-block text-xs lg:text-xs text-current font-semibold capitalize py-1 px-3 rounded-sm bg-(--light-brand-color)"
|
||||
>
|
||||
{getLocaleTr(parentCat, locale).name}
|
||||
</Link>
|
||||
@ -63,13 +63,13 @@ const ProductBreadcrumbDesktop: React.FunctionComponent<ProductBreadcrumbDesktop
|
||||
}`}
|
||||
scroll={false}
|
||||
shallow
|
||||
className="inline-block text-xs lg:text-xs text-current font-semibold capitalize py-1 px-3 rounded bg-[var(--light-brand-color)]"
|
||||
className="inline-block text-xs lg:text-xs text-current font-semibold capitalize py-1 px-3 rounded-sm bg-(--light-brand-color)"
|
||||
>
|
||||
{getLocaleTr(productCategory, locale).name}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
{router.asPath.includes("?product=") && <ReplySolid className="reactive-button hidden lg:inline-block absolute size-11 rtl:left-0 ltr:right-0 -bottom-2 fill-current p-3 rounded-full bg-[var(--light-brand-color)] text-[var(--brand-color)]" onClick={onBack} />}
|
||||
{router.asPath.includes("?product=") && <ReplySolid className="reactive-button hidden lg:inline-block absolute size-11 rtl:left-0 ltr:right-0 -bottom-2 fill-current p-3 rounded-full bg-(--light-brand-color) text-(--brand-color)" onClick={onBack} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -40,7 +40,7 @@ const ProductBreadcrumbMobile: React.FunctionComponent<ProductBreadcrumbMobilePr
|
||||
// useEffects
|
||||
|
||||
return (
|
||||
<div className="flex lg:hidden items-center w-full bg-white text-[var(--brand-color)] bg-[var(--light-brand-color)] py-2 sm:py-3 px-6 rounded-t-lg mb-1 border-b border-gray-100">
|
||||
<div className="flex lg:hidden items-center w-full bg-white text-(--brand-color) bg-(--light-brand-color) py-2 sm:py-3 px-6 rounded-t-lg mb-1 border-b border-gray-100">
|
||||
<SplitSolid className="inline-block size-3 lg:size-3 fill-current rtl:ml-3 ltr:mr-3 lg:rtl:ml-2 lg:ltr:mr-2" />
|
||||
<div className="flex items-center space-x-2 rtl:space-x-reverse">
|
||||
{productCategory.parent.length > 0 &&
|
||||
@ -48,7 +48,7 @@ const ProductBreadcrumbMobile: React.FunctionComponent<ProductBreadcrumbMobilePr
|
||||
href={`/billboard/${billboardId}/${url(billboardTitle)}/products/?cat=${productCategory.parent[0]}`}
|
||||
scroll={false}
|
||||
shallow
|
||||
className="inline-block text-xs lg:text-xs text-current font-semibold capitalize py-1 px-3 rounded bg-[var(--light-brand-color)]"
|
||||
className="inline-block text-xs lg:text-xs text-current font-semibold capitalize py-1 px-3 rounded-sm bg-(--light-brand-color)"
|
||||
>
|
||||
{getLocaleTr(parentCat, locale).name}
|
||||
</Link>}
|
||||
@ -62,7 +62,7 @@ const ProductBreadcrumbMobile: React.FunctionComponent<ProductBreadcrumbMobilePr
|
||||
}`}
|
||||
scroll={false}
|
||||
shallow
|
||||
className="inline-block text-xs lg:text-xs text-current font-semibold capitalize py-1 px-3 rounded bg-[var(--light-brand-color)]"
|
||||
className="inline-block text-xs lg:text-xs text-current font-semibold capitalize py-1 px-3 rounded-sm bg-(--light-brand-color)"
|
||||
>
|
||||
{getLocaleTr(productCategory, locale).name}
|
||||
</Link>
|
||||
|
||||
@ -9,7 +9,7 @@ interface ProductFeatureProps {
|
||||
valueClass?: string;
|
||||
}
|
||||
|
||||
export const featureIconClass = "inline-block size-3 xl:size-3 fill-[var(--brand-color)] mt-1 rtl:ml-1 ltr:mr-1 ltr:rotate-180";
|
||||
export const featureIconClass = "inline-block size-3 xl:size-3 fill-(--brand-color) mt-1 rtl:ml-1 ltr:mr-1 ltr:rotate-180";
|
||||
|
||||
const ProductFeature: React.FunctionComponent<ProductFeatureProps> = ({ label, value, icon, className, labelClass, valueClass }) => {
|
||||
|
||||
|
||||
@ -77,8 +77,8 @@ const ProductGallery: React.FunctionComponent<ProductGalleryProps> = ({ productT
|
||||
priority={true}
|
||||
noPreload={true}
|
||||
fetchPriority="low"
|
||||
className="rounded-lg will-change-transform !object-contain px-gi"
|
||||
figureClass="block mx-auto rounded-lg w-full transition-transform duration-200 select-none [&>div]:!bg-transparent lg:cursor-pointer"
|
||||
className="rounded-lg will-change-transform object-contain! px-gi"
|
||||
figureClass="block mx-auto rounded-lg w-full transition-transform duration-200 select-none [&>div]:bg-transparent! lg:cursor-pointer"
|
||||
onClick={() => openGallery(currentPic)}
|
||||
/>
|
||||
}
|
||||
@ -109,22 +109,22 @@ const ProductGallery: React.FunctionComponent<ProductGalleryProps> = ({ productT
|
||||
loop={false}
|
||||
autoplay={false}
|
||||
childComponent={(x: any, i) => <GalleryItem key={x.directus_files_id.id} item={x.directus_files_id} />}
|
||||
sliderClass={`block sm:bg-[#fcfcfd] max-sm:w-[calc(100vw_-_4rem)] w-full [rtl:direction:rtl] mx-auto bg-white`}
|
||||
viewPortClass="!p-0 bg-white"
|
||||
sliderClass={`block sm:bg-[#fcfcfd] max-sm:w-[calc(100vw-4rem)] w-full [rtl:direction:rtl] mx-auto bg-white`}
|
||||
viewPortClass="p-0! bg-white"
|
||||
containerClass=""
|
||||
controlsContainerClass="!mt-0"
|
||||
controlsContainerClass="mt-0!"
|
||||
onScroll={handleSlideChanges}
|
||||
currentIndex={currentPic}
|
||||
/>
|
||||
:
|
||||
<span className="block w-full aspect-square md:aspect-square rounded-lg lg:rounded">
|
||||
<span className="block w-full aspect-square md:aspect-square rounded-lg lg:rounded-sm">
|
||||
<ImageSharpSolid className="inline-block absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-16 xl:size-24 fill-gray-200" />
|
||||
</span>
|
||||
}
|
||||
{/* gallery */}
|
||||
<div className="grid grid-cols-4 gap-4 px-gi mt-2">
|
||||
{galleryItems.slice(0, 4).map((x, i) => (
|
||||
<div key={x.directus_files_id.id} className={`block w-full relative overflow-hidden my-3 p-1 lg:cursor-pointer ring-2 hover:bg-[var(--light-brand-color)] ${i === currentPic ? "ring-[var(--brand-color)]" : "ring-white"} rounded-lg`} onClick={() => handlePicSelection(i)}>
|
||||
<div key={x.directus_files_id.id} className={`block w-full relative overflow-hidden my-3 p-1 lg:cursor-pointer ring-2 hover:bg-(--light-brand-color) ${i === currentPic ? "ring-(--brand-color)" : "ring-white"} rounded-lg`} onClick={() => handlePicSelection(i)}>
|
||||
{x.directus_files_id ?
|
||||
<Image
|
||||
src={`${x.directus_files_id.id}/${x.directus_files_id.filename_download}`}
|
||||
@ -137,15 +137,15 @@ const ProductGallery: React.FunctionComponent<ProductGalleryProps> = ({ productT
|
||||
priority={true}
|
||||
noPreload={true}
|
||||
fetchPriority="low"
|
||||
className="rounded-lg will-change-transform !object-contain"
|
||||
figureClass="rounded-lg w-full transition-transform duration-200 select-none [&>div]:!bg-transparent select-none"
|
||||
className="rounded-lg will-change-transform object-contain!"
|
||||
figureClass="rounded-lg w-full transition-transform duration-200 select-none [&>div]:bg-transparent! select-none"
|
||||
/>
|
||||
:
|
||||
<span className="block w-full aspect-square rounded-lg lg:rounded">
|
||||
<span className="block w-full aspect-square rounded-lg lg:rounded-sm">
|
||||
<ImageSharpSolid className="inline-block absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-16 xl:size-24 fill-gray-200" />
|
||||
</span>
|
||||
}
|
||||
{galleryItems.length > 4 && i === 3 && <span className="flex items-center justify-center z-10 size-[calc(100%_-_0.5rem)] absolute top-0 left-0 m-1 rounded-lg bg-black/30 text-white text-lg font-semibold [direction:ltr] pointer-events-none">{`+${galleryItems.length - 4}`}</span>}
|
||||
{galleryItems.length > 4 && i === 3 && <span className="flex items-center justify-center z-10 size-[calc(100%-0.5rem)] absolute top-0 left-0 m-1 rounded-lg bg-black/30 text-white text-lg font-semibold [direction:ltr] pointer-events-none">{`+${galleryItems.length - 4}`}</span>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -167,11 +167,11 @@ const ProductOrder: React.FunctionComponent<ProductOrderProps> = ({ productTitle
|
||||
priority={true}
|
||||
noPreload={true}
|
||||
fetchPriority="low"
|
||||
className="rounded-lg will-change-transform !object-contain"
|
||||
figureClass="rounded-lg w-16 transition-transform duration-200 select-none [&>div]:!bg-transparent select-none"
|
||||
className="rounded-lg will-change-transform object-contain!"
|
||||
figureClass="rounded-lg w-16 transition-transform duration-200 select-none [&>div]:bg-transparent! select-none"
|
||||
/>
|
||||
:
|
||||
<span className="block aspect-square w-16 rounded-lg lg:rounded relative">
|
||||
<span className="block aspect-square w-16 rounded-lg lg:rounded-sm relative">
|
||||
<ImageSharpSolid className="inline-block absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-16 fill-gray-200" />
|
||||
</span>
|
||||
}
|
||||
@ -187,13 +187,13 @@ const ProductOrder: React.FunctionComponent<ProductOrderProps> = ({ productTitle
|
||||
</div>
|
||||
|
||||
{item.type === "purchasable" && hasValue(selectedUnit) && <div className="flex flex-col items-start mt-8 mb-8 space-y-4">
|
||||
<div className="flex items-center justify-between py-2 px-2 rounded-xl bg-gray-100/75 text-[var(--brand-color)] ltr:flex-row-reverse space-x-5 space-x-reverse">
|
||||
<div className="flex items-center justify-between py-2 px-2 rounded-xl bg-gray-100/75 text-(--brand-color) ltr:flex-row-reverse space-x-5 space-x-reverse">
|
||||
<PlusSolid className="reactive-button inline-block size-8 fill-current p-2 rounded-full bg-white" onClick={() => orderQuantity < selectedVariant.total_count && setOrderQuantity(orderQuantity + 1)} />
|
||||
<Input
|
||||
type="number"
|
||||
min={1}
|
||||
value={orderQuantity}
|
||||
className="inline-block text-secondary-light text-lg font-extrabold select-none w-14 outline-none text-center rounded"
|
||||
className="inline-block text-secondary-light text-lg font-extrabold select-none w-14 outline-hidden text-center rounded-sm"
|
||||
onInput={handleOrderQuantity}
|
||||
/>
|
||||
<MinusSolid className="reactive-button inline-block size-8 fill-current p-2 rounded-full bg-white" onClick={() => orderQuantity > 1 && setOrderQuantity(orderQuantity - 1)} />
|
||||
@ -209,7 +209,7 @@ const ProductOrder: React.FunctionComponent<ProductOrderProps> = ({ productTitle
|
||||
onChange={(data) => handleUnitSelection(data.value)}
|
||||
optionsWrapper="w-32 inline-block px-2 rtl:mr-2 ltr:ml-2 rounded-lg bg-white capitalize"
|
||||
wrapperClass="bg-gray-100/75 rounded-xl py-3 px-2"
|
||||
buttonText='!text-sm'
|
||||
buttonText='text-sm!'
|
||||
/>
|
||||
</div>}
|
||||
</div>}
|
||||
@ -229,7 +229,7 @@ const ProductOrder: React.FunctionComponent<ProductOrderProps> = ({ productTitle
|
||||
<ul className="list-none block w-full space-y-1">
|
||||
{policiesData.map(x => (
|
||||
<li key={x.id} className="flex items-start w-full py-1">
|
||||
<span className="flex items-center text-xs/6 font-semibold bg-warning-bg text-warning-text px-2 py-[1px] rounded-lg shrink-0 capitalize">
|
||||
<span className="flex items-center text-xs/6 font-semibold bg-warning-bg text-warning-text px-2 py-px rounded-lg shrink-0 capitalize">
|
||||
{x.icon}
|
||||
{`${x.label} :`}
|
||||
</span>
|
||||
@ -246,14 +246,14 @@ const ProductOrder: React.FunctionComponent<ProductOrderProps> = ({ productTitle
|
||||
<Button
|
||||
type="button"
|
||||
text={translate("billboard-buy-now")}
|
||||
className="w-full py-3 px-gi rounded-lg text-sm font-semibold shadow-none ring-2 ring-[var(--brand-color)] text-[var(--brand-color)] mb-4 uppercase"
|
||||
className="w-full py-3 px-gi rounded-lg text-sm font-semibold shadow-none ring-2 ring-(--brand-color) text-(--brand-color) mb-4 uppercase"
|
||||
leftIcon={<CreditCardSolid className="inline-block size-6 fill-current rtl:ml-4 ltr:mr-4" />}
|
||||
onClick={handleBuyNow}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
text={translate("billboard-add-to-cart")}
|
||||
className="w-full py-3 px-gi rounded-lg text-sm font-semibold shadow-none ring-2 ring-[var(--brand-color)] bg-[var(--brand-color)] text-white uppercase"
|
||||
className="w-full py-3 px-gi rounded-lg text-sm font-semibold shadow-none ring-2 ring-(--brand-color) bg-(--brand-color) text-white uppercase"
|
||||
leftIcon={<BasketShoppingSolid className="inline-block size-6 fill-current rtl:ml-4 ltr:mr-4" />}
|
||||
onClick={handleAddToCart}
|
||||
/>
|
||||
|
||||
@ -47,14 +47,14 @@ const ProductPurchasableHeader: React.FunctionComponent<ProductPurchasableHeader
|
||||
<h2 className="block text-lg/[2.125rem] font-extrabold xl:text-xl/9 lg:font-extrabold text-secondary-light mb-4 capitalize">{productTitle}</h2>
|
||||
<div className="flex productDetailss-center w-full mt-4 space-x-2 rtl:space-x-reverse">
|
||||
{/* brand */}
|
||||
{!hasValue(productDetails.volume) && !hasValue(productDetails.weight) && hasValue(productDetails.brand) && <span className="flex productDetailss-center w-max text-sm sm:text-sm ltr:text-xs bg-gray-100 text-secondary-light py-[2px] ltr:py-1 px-2 rounded">{`${locale === "fa" ? productDetails.brand.persian_name : productDetails.brand.english_name}`}</span>}
|
||||
{!hasValue(productDetails.volume) && !hasValue(productDetails.weight) && hasValue(productDetails.brand) && <span className="flex productDetailss-center w-max text-sm sm:text-sm ltr:text-xs bg-gray-100 text-secondary-light py-[2px] ltr:py-1 px-2 rounded-sm">{`${locale === "fa" ? productDetails.brand.persian_name : productDetails.brand.english_name}`}</span>}
|
||||
{/* weight */}
|
||||
{hasValue(productDetails.weight) && <span className="flex productDetailss-center w-max text-sm sm:text-base ltr:text-xs font-semibold bg-market-input text-market-title-light py-[2px] ltr:py-1 px-2 rounded">{`${productDetails.weight} ${productDetails.weight_unit}`}</span>}
|
||||
{hasValue(productDetails.weight) && <span className="flex productDetailss-center w-max text-sm sm:text-base ltr:text-xs font-semibold bg-market-input text-market-title-light py-[2px] ltr:py-1 px-2 rounded-sm">{`${productDetails.weight} ${productDetails.weight_unit}`}</span>}
|
||||
{/* availablility */}
|
||||
{productDetails.type === "purchasable" && <span className={`inline-block py-[2px] ltr:py-1 px-2 rounded capitalize ${productDetails.stock_count === -1 || productDetails.stock_count > 0 ? "bg-green-700 text-white" : "bg-error-bg text-error-text"} text-sm ltr:text-xs`}>{productDetails.stock_count === -1 ? translate("available") : (productDetails.stock_count > 0 ? translate("available") : translate("not-available")) }</span>}
|
||||
{productDetails.type === "purchasable" && <span className={`inline-block py-[2px] ltr:py-1 px-2 rounded-sm capitalize ${productDetails.stock_count === -1 || productDetails.stock_count > 0 ? "bg-green-700 text-white" : "bg-error-bg text-error-text"} text-sm ltr:text-xs`}>{productDetails.stock_count === -1 ? translate("available") : (productDetails.stock_count > 0 ? translate("available") : translate("not-available")) }</span>}
|
||||
{/* discount percentage */}
|
||||
{(productDetails.discount_price && productDetails.discount_price !== -1) && <div className="flex productDetailss-center w-max text-white bg-primary rounded py-1 px-2">
|
||||
<PercentageSolid className="inline-block size-3 rtl:xl:size-4 ltr:xl:size-3 fill-current rtl:ml-[2px] ltr:mr-[2px]" />
|
||||
{(productDetails.discount_price && productDetails.discount_price !== -1) && <div className="flex productDetailss-center w-max text-white bg-primary rounded-sm py-1 px-2">
|
||||
<PercentageSolid className="inline-block size-3 xl:rtl:size-4 xl:ltr:size-3 fill-current rtl:ml-[2px] ltr:mr-[2px]" />
|
||||
<span className="inline-block text-sm ltr:text-xs text-current font-semibold capitalize">
|
||||
{`${Math.ceil(((productDetails.discount_price - productDetails.price) / productDetails.price) * 100)} ${translate("discount")}`}
|
||||
</span>
|
||||
@ -62,8 +62,8 @@ const ProductPurchasableHeader: React.FunctionComponent<ProductPurchasableHeader
|
||||
</div>
|
||||
{/* rating */}
|
||||
{isRatingsAvailable ?
|
||||
<div className="flex productDetailss-center space-x-2 rtl:space-x-reverse mt-4 text-[var(--brand-color)]">
|
||||
<StarRating rating={ratings.avg.product_quality} className="text-current -mt-[2px] -mr-1" starClass="size-4 shrink-0" />
|
||||
<div className="flex productDetailss-center space-x-2 rtl:space-x-reverse mt-4 text-(--brand-color)">
|
||||
<StarRating rating={ratings.avg.product_quality} className="text-current mt-[-2px] -mr-1" starClass="size-4 shrink-0" />
|
||||
<span className="text-base font-semibold text-current">{ratings.avg.product_quality ? String(ratings.avg.product_quality).slice(0, 3) : 0}/5 |</span>
|
||||
<span className="text-xs/5 font-semibold text-cool-gray">{`(${ratings.countDistinct.id} ${translate("vote")})`}</span>
|
||||
</div>
|
||||
|
||||
@ -352,7 +352,7 @@ const PurchasableProductsDetails: React.FunctionComponent<PurchasableProductsDet
|
||||
productTitle={getLocaleTr(product, locale).title}
|
||||
galleryItems={!product.variations || !product.variations.some(x => x.pics.length > 0) ? [] : (selectedVariant.pics[0].variant_galleries_id.gallery.length > 0 ? selectedVariant.pics[0].variant_galleries_id.gallery : [])}
|
||||
/>
|
||||
<div className="bg-white block w-full lg:w-1/2 px-6 lg:px-4 pt-4 pb-6 lg:pt-0 border-t-[4px] border-gray-50 lg:border-t-0 border-b lg:border-b-0 border-b-gray-100">
|
||||
<div className="bg-white block w-full lg:w-1/2 px-6 lg:px-4 pt-4 pb-6 lg:pt-0 border-t-4 border-gray-50 lg:border-t-0 border-b lg:border-b-0 border-b-gray-100">
|
||||
{product.category && <ProductBreadcrumbDesktop productCategory={product.category} parentCat={categories.filter(x => x.local_id === product.category.parent[0])[0]} billboardId={billboard.id} billboardTitle={billboardTitle} />}
|
||||
<ProductPurchasableHeader
|
||||
productTitle={getLocaleTr(product, locale).title}
|
||||
@ -408,7 +408,7 @@ const PurchasableProductsDetails: React.FunctionComponent<PurchasableProductsDet
|
||||
|
||||
{/* product desccription */}
|
||||
{getLocaleTr(product, locale).description && <ProductSection id="product-description" title={translate("billboard-product-description")} className="pt-4 mt-6 border-t border-dashed border-gray-200/75">
|
||||
<Parser limit limitLength={800} text={getLocaleTr(product, locale).description} className="[&_*]:lg:!text-sm/7" />
|
||||
<Parser limit limitLength={800} text={getLocaleTr(product, locale).description} className="lg:**:text-sm/7!" />
|
||||
</ProductSection>}
|
||||
|
||||
{/* product features */}
|
||||
@ -436,7 +436,7 @@ const PurchasableProductsDetails: React.FunctionComponent<PurchasableProductsDet
|
||||
|
||||
{/* gallery */}
|
||||
{product.type === "gallery" && <>
|
||||
<a href={`tel:${billboard.phone_number}`} className="reactive-button block w-full capitalize py-3 px-4 mt-10 rounded-lg bg-[var(--brand-color)] text-white font-semibold text-sm/6 text-center">
|
||||
<a href={`tel:${billboard.phone_number}`} className="reactive-button block w-full capitalize py-3 px-4 mt-10 rounded-lg bg-(--brand-color) text-white font-semibold text-sm/6 text-center">
|
||||
<PhoneSolid className={`inline-block size-4 xl:size-4 shrink-0 rtl:ml-3 ltr:mr-3 fill-current`} />
|
||||
{translate("billboard-page-gallery-type-cta")}
|
||||
</a>
|
||||
|
||||
@ -37,7 +37,7 @@ const Item: React.FunctionComponent<ProductItem> = ({ billboardId, billboardTitl
|
||||
return <Link
|
||||
href={`/billboard/${billboardId}/${url(billboardTitle)}/products/${item.product_id}`}
|
||||
scroll={true}
|
||||
className="flex flex-col items-center w-full [&>h2]:hover:text-[var(--brand-color)] hover:shadow-lg shrink-0 justify-center bg-white sm:p-4 rounded-lg"
|
||||
className="flex flex-col items-center w-full hover:[&>h2]:text-(--brand-color) hover:shadow-lg shrink-0 justify-center bg-white sm:p-4 rounded-lg"
|
||||
>
|
||||
<div className="block w-full relative select-none">
|
||||
{pic ?
|
||||
@ -52,18 +52,18 @@ const Item: React.FunctionComponent<ProductItem> = ({ billboardId, billboardTitl
|
||||
priority={true}
|
||||
noPreload={true}
|
||||
fetchPriority="low"
|
||||
className="rounded-lg md:cursor-pointer !object-contain bg-white"
|
||||
className="rounded-lg md:cursor-pointer object-contain! bg-white"
|
||||
figureClass="md:cursor-pointer rounded-lg w-full"
|
||||
/>
|
||||
:
|
||||
<span className="block w-full aspect-3/2 md:aspect-3/2 bg-white rounded-lg lg:rounded">
|
||||
<span className="block w-full aspect-3/2 md:aspect-3/2 bg-white rounded-lg lg:rounded-sm">
|
||||
<ImageSharpSolid className="inline-block absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-16 xl:size-24 fill-gray-200" />
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
<h2 className="text-center text-xs/6 text-secondary-light font-semibold line-clamp-1 sm:line-clamp-1 max-sm:px-2 mt-6 capitalize">{itemTitle}</h2>
|
||||
{/* price */}
|
||||
<div className="flex items-center w-max text-secondary-light mt-3 mb-2 bg-white pt-1 px-2 rounded select-none">
|
||||
<div className="flex items-center w-max text-secondary-light mt-3 mb-2 bg-white pt-1 px-2 rounded-sm select-none">
|
||||
<span className="text-sm sm:text-base rtl:ml-1 ltr:mr-1 text-current font-semibold">{`${price.currency.sign}${price.discounted_price !== -1 ? price.discounted_price : price.price}`}</span>
|
||||
{price.discounted_price !== -1 && <span className="text-sm sm:text-base text-cool-gray line-through font-semibold rtl:mr-1 ltr:ml-1">{`${price.currency.sign}${price.price}`}</span>}
|
||||
</div>
|
||||
@ -194,11 +194,11 @@ const RelatedProducts: React.FunctionComponent<RelatedProductsProps> = ({ billbo
|
||||
return (
|
||||
<div className={`${productsData?.data.billboard_products.length > 1 ? "grid sm:block" : "hidden"} w-full items-center bg-white mt-1 lg:mt-4 mb-4 lg:mb-6 pb-2 sm:pb-4 lg:rounded-lg shadow-bot ${className}`}>
|
||||
<div className="flex items-center justify-between w-full pt-4 pb-4 px-6 sm:px-6 capitalize">
|
||||
<span className={`flex items-center text-sm text-[var(--brand-color)] font-semibold sm:text-base ${className}`}>
|
||||
<span className={`flex items-center text-sm text-(--brand-color) font-semibold sm:text-base ${className}`}>
|
||||
<LayerGroupSolid className="inline-block size-4 fill-current rtl:ml-2 ltr:mr-2" />
|
||||
{translate("billboard-related-products-title")}
|
||||
</span>
|
||||
<span className={`flex items-center text-sm text-[var(--brand-color)] font-semibold sm:text-base lg:cursor-pointer hover:underline ${className}`} onClick={handleSeeAll}>
|
||||
<span className={`flex items-center text-sm text-(--brand-color) font-semibold sm:text-base lg:cursor-pointer hover:underline ${className}`} onClick={handleSeeAll}>
|
||||
<CaretLeftSolid className="inline-block size-4 fill-current rtl:ml-1 ltr:mr-1 ltr:rotate-180" />
|
||||
{translate("see-all")}
|
||||
</span>
|
||||
@ -220,13 +220,13 @@ const RelatedProducts: React.FunctionComponent<RelatedProductsProps> = ({ billbo
|
||||
autoplay={false}
|
||||
direction={locale === "fa" ? "rtl" : "ltr"}
|
||||
childComponent={(x: any) => <Item key={x.id} item={x} priceData={priceData[0]} billboardId={billboardId} billboardTitle={billboardTitle} />}
|
||||
sliderClass={`block max-sm:w-[calc(100vw_-_2rem)] w-full rtl:[direction:rtl] mx-auto sm:bg-white px-0 sm:px-6`}
|
||||
viewPortClass="!py-0 px-2 sm:px-2"
|
||||
sliderClass={`block max-sm:w-[calc(100vw-2rem)] w-full rtl:rtl mx-auto sm:bg-white px-0 sm:px-6`}
|
||||
viewPortClass="py-0! px-2 sm:px-2"
|
||||
containerClass="py-3"
|
||||
controlsContainerClass="hidden bg-white px-4 pt-4 pb-4 lg:py-6 !mt-0"
|
||||
buttonsWrapperClass="-top-[52px] !w-14 sm:!w-16 rtl:left-3 ltr:right-3 rtl:xl:left-0 ltr:xl:right-0"
|
||||
prevClass="[&>svg]:!bg-[var(--brand-color)] [&>svg]:!text-white [&>svg]:!w-6 [&>svg]:!h-6 [&>svg]:sm:!w-7 [&>svg]:sm:!h-7"
|
||||
nextClass="[&>svg]:!bg-[var(--brand-color)] [&>svg]:!text-white [&>svg]:!w-6 [&>svg]:!h-6 [&>svg]:sm:!w-7 [&>svg]:sm:!h-7"
|
||||
controlsContainerClass="hidden bg-white px-4 pt-4 pb-4 lg:py-6 mt-0!"
|
||||
buttonsWrapperClass="top-[-52px] w-14! sm:w-16! rtl:left-3 ltr:right-3 xl:rtl:left-0 xl:ltr:right-0"
|
||||
prevClass="[&>svg]:bg-(--brand-color)! [&>svg]:text-white! [&>svg]:w-6! [&>svg]:h-6! sm:[&>svg]:w-7! sm:[&>svg]:h-7!"
|
||||
nextClass="[&>svg]:bg-(--brand-color)! [&>svg]:text-white! [&>svg]:w-6! [&>svg]:h-6! sm:[&>svg]:w-7! sm:[&>svg]:h-7!"
|
||||
/>
|
||||
:
|
||||
<span className="flex items-center capitalize w-full text-sm px-2">{translate("market-ads-page-no-similar-ads")}</span>
|
||||
|
||||
@ -44,13 +44,13 @@ const CalendarDatePicker: React.FunctionComponent<CalendarDatePickerProps> = ({
|
||||
noClear
|
||||
navLayout="around"
|
||||
onChange={(dates) => onSelect(dates[0])}
|
||||
labelClass="!bg-[var(--light-brand-color)] !text-[var(--brand-color)]"
|
||||
todayClass="!text-[var(--brand-color)]"
|
||||
chevronClass="!fill-[var(--brand-color)]"
|
||||
selectedClass="bg-market-title-light !text-white hover:!bg-market-title-light"
|
||||
rangeStartClass="!bg-[var(--brand-color)] hover:!bg-[var(--brand-color)]"
|
||||
rangeMiddleClass="!bg-[var(--light-brand-color)] !text-[var(--brand-color)]"
|
||||
rangeEndClass="!bg-[var(--brand-color)] hover:!bg-[var(--brand-color)]"
|
||||
labelClass="bg-(--light-brand-color)! text-(--brand-color)!"
|
||||
todayClass="text-(--brand-color)!"
|
||||
chevronClass="fill-(--brand-color)!"
|
||||
selectedClass="bg-market-title-light text-white! hover:bg-market-title-light!"
|
||||
rangeStartClass="bg-(--brand-color)! hover:bg-(--brand-color)!"
|
||||
rangeMiddleClass="bg-(--light-brand-color)! text-(--brand-color)!"
|
||||
rangeEndClass="bg-(--brand-color)! hover:bg-(--brand-color)!"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -46,20 +46,20 @@ const DateSelection: React.FunctionComponent<DateSelectionProps> = ({ selectedDa
|
||||
<div
|
||||
key={i}
|
||||
className={`reactive-button flex flex-col items-center select-none w-1/4 relative rounded-md px-2 py-3 lg:py-4 shrink-0 lg:cursor-pointer ring-1
|
||||
${isSelectedDate(x) ? "slider-selected-date bg-[var(--light-brand-color)] ring-2 ring-[var(--brand-color)]" : "bg-white ring-gray-200"}
|
||||
${(x.closed) ? "!bg-error-bg !ring-error-bg pointer-events-none" : ""}
|
||||
${providerNotAvialable(x) ? "!bg-warning-bg/80 !ring-warning-text/15" : ""}`}
|
||||
${isSelectedDate(x) ? "slider-selected-date bg-(--light-brand-color) ring-2 ring-(--brand-color)" : "bg-white ring-gray-200"}
|
||||
${(x.closed) ? "bg-error-bg! ring-error-bg! pointer-events-none" : ""}
|
||||
${providerNotAvialable(x) ? "bg-warning-bg/80! ring-warning-text/15!" : ""}`}
|
||||
onClick={() => onSelect(x.date, i)}
|
||||
>
|
||||
{(x.closed) &&
|
||||
<span className={`inline-block text-xs absolute -top-[2px] px-4 py-[2px] rounded-lg -translate-y-1/2 bg-error-bg text-error-text`}>{translate("closed")}</span>
|
||||
<span className={`inline-block text-xs absolute top-[-2px] px-4 py-[2px] rounded-lg -translate-y-1/2 bg-error-bg text-error-text`}>{translate("closed")}</span>
|
||||
}
|
||||
<span className={`inline-block mt-[2px] lg:mt-1 text-xs ${isSelectedDate(x) ? "text-[var(--brand-color)]" : (providerNotAvialable(x) ? "text-warning-text" : "text-secondary-light")}`}>{x.weekday.slice(0, 3)}</span>
|
||||
<span className={`inline-block mt-[2px] lg:mt-1 text-2xl lg:text-3xl ${isSelectedDate(x) ? "text-[var(--brand-color)]" : (providerNotAvialable(x) ? "text-warning-text" : "text-secondary-light")} font-bold`}>{new Date(x.date).getDate()}</span>
|
||||
<span className={`inline-block mt-[1px] lg:mt-1 text-xs ${isSelectedDate(x) ? "text-[var(--brand-color)]" : (providerNotAvialable(x) ? "text-warning-text" : "text-secondary-light")} `}>{getMonth(new Date(x.date).getMonth()).slice(0, 3)}</span>
|
||||
<span className={`inline-block mt-[2px] lg:mt-1 text-xs ${isSelectedDate(x) ? "text-(--brand-color)" : (providerNotAvialable(x) ? "text-warning-text" : "text-secondary-light")}`}>{x.weekday.slice(0, 3)}</span>
|
||||
<span className={`inline-block mt-[2px] lg:mt-1 text-2xl lg:text-3xl ${isSelectedDate(x) ? "text-(--brand-color)" : (providerNotAvialable(x) ? "text-warning-text" : "text-secondary-light")} font-bold`}>{new Date(x.date).getDate()}</span>
|
||||
<span className={`inline-block mt-px lg:mt-1 text-xs ${isSelectedDate(x) ? "text-(--brand-color)" : (providerNotAvialable(x) ? "text-warning-text" : "text-secondary-light")} `}>{getMonth(new Date(x.date).getMonth()).slice(0, 3)}</span>
|
||||
{[mtd(today.getTime()), mtd(tomorrow.getTime())].includes(mtd(x.date.getTime())) &&
|
||||
<span className={`inline-block text-xs absolute bottom-0 px-4 py-[2px] rounded-lg capitalize translate-y-1/2
|
||||
${isSelectedDate(x) ? "bg-[var(--brand-color)] text-white" : "bg-[var(--light-brand-color)] text-secondary-light"}
|
||||
${isSelectedDate(x) ? "bg-(--brand-color) text-white" : "bg-(--light-brand-color) text-secondary-light"}
|
||||
${(x.closed) ? "bg-error-text text-white" : ""}`}>
|
||||
{mtd(today.getTime()) === mtd(x.date.getTime()) && translate("today")}
|
||||
{mtd(tomorrow.getTime()) === mtd(x.date.getTime()) && translate("tomorrow")}
|
||||
|
||||
@ -38,8 +38,8 @@ const ProductReservationHeader: React.FunctionComponent<ProductReservationHeader
|
||||
<h2 className="block text-lg/[2.125rem] font-extrabold xl:text-xl/9 lg:font-extrabold text-secondary-light mb-4 capitalize">{productTitle}</h2>
|
||||
<div className="flex productDetailss-center w-full mt-4 space-x-2 rtl:space-x-reverse">
|
||||
{/* discount percentage */}
|
||||
{((productDetails.discount_price && productDetails.discount_price !== -1) || (productDetails.reservationDiscountedPrice && productDetails.reservationDiscountedPrice !== -1)) && <div className="flex productDetailss-center w-max text-white bg-primary rounded py-1 px-2">
|
||||
<PercentageSolid className="inline-block size-3 rtl:xl:size-4 ltr:xl:size-3 fill-current rtl:ml-[2px] ltr:mr-[2px]" />
|
||||
{((productDetails.discount_price && productDetails.discount_price !== -1) || (productDetails.reservationDiscountedPrice && productDetails.reservationDiscountedPrice !== -1)) && <div className="flex productDetailss-center w-max text-white bg-primary rounded-sm py-1 px-2">
|
||||
<PercentageSolid className="inline-block size-3 xl:rtl:size-4 xl:ltr:size-3 fill-current rtl:ml-[2px] ltr:mr-[2px]" />
|
||||
<span className="inline-block text-sm ltr:text-xs text-current font-semibold capitalize">
|
||||
`${Math.ceil(((productDetails.reservationPrice - productDetails.reservationDiscountedPrice) / productDetails.reservationPrice) * 100)} ${translate("discount")}`
|
||||
</span>
|
||||
@ -47,8 +47,8 @@ const ProductReservationHeader: React.FunctionComponent<ProductReservationHeader
|
||||
</div>
|
||||
{/* rating */}
|
||||
{isRatingsAvailable ?
|
||||
<div className="flex productDetailss-center space-x-2 rtl:space-x-reverse mt-4 text-[var(--brand-color)]">
|
||||
<StarRating rating={ratings.avg.product_quality} className="text-current -mt-[2px] -mr-1" starClass="size-4 shrink-0" />
|
||||
<div className="flex productDetailss-center space-x-2 rtl:space-x-reverse mt-4 text-(--brand-color)">
|
||||
<StarRating rating={ratings.avg.product_quality} className="text-current mt-[-2px] -mr-1" starClass="size-4 shrink-0" />
|
||||
<span className="text-base font-semibold text-current">{ratings.avg.product_quality ? String(ratings.avg.product_quality).slice(0, 3) : 0}/5 |</span>
|
||||
<span className="text-xs/5 font-semibold text-cool-gray">{`(${ratings.countDistinct.id} ${translate("vote")})`}</span>
|
||||
</div>
|
||||
|
||||
@ -365,7 +365,7 @@ const ProductReservation: React.FunctionComponent<ProductReservationProps> = ({
|
||||
<Button
|
||||
type="button"
|
||||
text={translate("billboard-product-page-reservation-cta")}
|
||||
className="w-full py-3 px-gi rounded-lg text-sm font-semibold shadow-none ring-2 mt-4 ring-[var(--brand-color)] bg-[var(--brand-color)] text-white uppercase"
|
||||
className="w-full py-3 px-gi rounded-lg text-sm font-semibold shadow-none ring-2 mt-4 ring-(--brand-color) bg-(--brand-color) text-white uppercase"
|
||||
leftIcon={<CreditCardSolid className="inline-block size-6 fill-current rtl:ml-4 ltr:mr-4" />}
|
||||
disabledClass="ring-gray-300"
|
||||
onClick={handleReservation}
|
||||
|
||||
@ -95,11 +95,11 @@ const ReservationDetails: React.FunctionComponent<ReservationDetailsProps> = ({
|
||||
priority={true}
|
||||
noPreload={true}
|
||||
fetchPriority="low"
|
||||
className="rounded-full will-change-transform !object-cover border-4 border-[var(--light-brand-color)]"
|
||||
figureClass="rounded-full w-16 transition-transform duration-200 select-none [&>div]:!bg-transparent select-none"
|
||||
className="rounded-full will-change-transform object-cover! border-4 border-(--light-brand-color)"
|
||||
figureClass="rounded-full w-16 transition-transform duration-200 select-none [&>div]:bg-transparent! select-none"
|
||||
/>
|
||||
:
|
||||
<span className="block aspect-square w-16 rounded-lg lg:rounded">
|
||||
<span className="block aspect-square w-16 rounded-lg lg:rounded-sm">
|
||||
<ImageSharpSolid className="inline-block absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-16 xl:size-24 fill-gray-200" />
|
||||
</span>
|
||||
}
|
||||
@ -111,49 +111,49 @@ const ReservationDetails: React.FunctionComponent<ReservationDetailsProps> = ({
|
||||
<ReservationDetail
|
||||
label={translate("billboard-product-reservation-details-type")}
|
||||
value={serviceTypes ? getLocaleTr(selectedServiceType, locale).title : "-"}
|
||||
icon={<CircleQuestionSolid className={`inline-block size-4 sm:size-4 fill-[var(--brand-color)] rtl:ml-1 ltr:mr-1`} />}
|
||||
icon={<CircleQuestionSolid className={`inline-block size-4 sm:size-4 fill-(--brand-color) rtl:ml-1 ltr:mr-1`} />}
|
||||
/>
|
||||
<ReservationDetail
|
||||
label={translate("billboard-product-reservation-details-date")}
|
||||
value={mtd(selectedDate.getTime())}
|
||||
icon={<CalendarCheckSolid className={`inline-block size-4 sm:size-4 fill-[var(--brand-color)] rtl:ml-1 ltr:mr-1`} />}
|
||||
icon={<CalendarCheckSolid className={`inline-block size-4 sm:size-4 fill-(--brand-color) rtl:ml-1 ltr:mr-1`} />}
|
||||
valueClass="[direction:ltr]"
|
||||
/>
|
||||
<ReservationDetail
|
||||
label={translate("billboard-product-reservation-details-time")}
|
||||
value={hasValue(selectedTime) ? `${selectedTime.from.slice(0, 5)} - ${selectedTime.to.slice(0, 5)}` : "-"}
|
||||
icon={<ClockSolid className={`inline-block size-4 sm:size-4 fill-[var(--brand-color)] rtl:ml-1 ltr:mr-1`} />}
|
||||
icon={<ClockSolid className={`inline-block size-4 sm:size-4 fill-(--brand-color) rtl:ml-1 ltr:mr-1`} />}
|
||||
valueClass="[direction:ltr]"
|
||||
/>
|
||||
{serviceProvidersList.length > 0 && selectedTime && <ReservationDetail
|
||||
label={translate("billboard-reservation-service-duration")}
|
||||
value={`${selectedTime.session_duration} ${translate("minute")}`}
|
||||
icon={<HourGlassSolid className={`inline-block size-4 sm:size-4 fill-[var(--brand-color)] rtl:ml-2 ltr:mr-2`} />}
|
||||
icon={<HourGlassSolid className={`inline-block size-4 sm:size-4 fill-(--brand-color) rtl:ml-2 ltr:mr-2`} />}
|
||||
/>}
|
||||
{serviceProvidersList.length > 0 && <ReservationDetail
|
||||
label={translate("billboard-reservation-service-provider")}
|
||||
value={`${getLocaleTr(serviceProvidersList[selectedProvider], locale).first_name} ${getLocaleTr(serviceProvidersList[selectedProvider], locale).last_name}`}
|
||||
icon={<UserVneckHairSolid className={`inline-block size-4 sm:size-4 fill-[var(--brand-color)] rtl:ml-2 ltr:mr-2`} />}
|
||||
icon={<UserVneckHairSolid className={`inline-block size-4 sm:size-4 fill-(--brand-color) rtl:ml-2 ltr:mr-2`} />}
|
||||
/>}
|
||||
{getLocaleTr(selectedServiceType, locale).session_rules?.length > 0 && <ReservationDetail
|
||||
label={translate("billboard-product-reservation-details-rules")}
|
||||
value={getLocaleTr(selectedServiceType, locale).session_rules[0]}
|
||||
icon={<CircleExclamationSolid className={`inline-block size-4 sm:size-4 fill-[var(--brand-color)] rtl:ml-2 ltr:mr-2`} />}
|
||||
icon={<CircleExclamationSolid className={`inline-block size-4 sm:size-4 fill-(--brand-color) rtl:ml-2 ltr:mr-2`} />}
|
||||
/>}
|
||||
<ReservationDetail
|
||||
label={translate("billboard-product-reservation-price-title")}
|
||||
value={priceDetails.length > 0 ? priceDetails.map(x => `${getLocaleTr(serviceTicketTypes.filter(t => t.id === x.id)[0], locale).title} ${x.amount} ${translate("units-number")}`).join(" | ") : "-"}
|
||||
icon={<TicketSolid className={`inline-block size-4 sm:size-4 fill-[var(--brand-color)] rtl:ml-2 ltr:mr-2`} />}
|
||||
icon={<TicketSolid className={`inline-block size-4 sm:size-4 fill-(--brand-color) rtl:ml-2 ltr:mr-2`} />}
|
||||
/>
|
||||
{serviceProvidersList.length === 0 && <ReservationDetail
|
||||
label={translate("billboard-reservation-seat-selection-title")}
|
||||
value={selectedSeat.length > 0 ? selectedSeat.join(", ") : "-"}
|
||||
icon={<SeatAirlineSolid className={`inline-block size-4 sm:size-4 fill-[var(--brand-color)] rtl:ml-2 ltr:mr-2`} />}
|
||||
icon={<SeatAirlineSolid className={`inline-block size-4 sm:size-4 fill-(--brand-color) rtl:ml-2 ltr:mr-2`} />}
|
||||
/>}
|
||||
<ReservationDetail
|
||||
label={translate("billboard-product-reservation-price-total-price")}
|
||||
value={String(totalReservationPrice) + " " + getLocaleTr(priceUnit, locale).name}
|
||||
icon={<CircleDollarSolid className={`inline-block size-4 sm:size-4 fill-[var(--brand-color)] rtl:ml-2 ltr:mr-2`} />}
|
||||
icon={<CircleDollarSolid className={`inline-block size-4 sm:size-4 fill-(--brand-color) rtl:ml-2 ltr:mr-2`} />}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -120,14 +120,14 @@ const ReservationPriceItem: React.FunctionComponent<ReservationPriceItemProps> =
|
||||
{ticketTypes.map(x => (
|
||||
<div key={x.id} className="flex items-center justify-between gap-4 w-full">
|
||||
<span className="text-sm">{`${getLocaleTr(x, locale).title} - ${getTicketPriceData(x.id).price} ${getLocaleTr(priceUnit, locale).name}`}</span>
|
||||
<div className="flex items-center justify-between py-1 px-2 rounded-full ring-1 ring-gray-200/75 text-[var(--brand-color)] ltr:flex-row-reverse space-x-2 space-x-reverse">
|
||||
<div className="flex items-center justify-between py-1 px-2 rounded-full ring-1 ring-gray-200/75 text-(--brand-color) ltr:flex-row-reverse space-x-2 space-x-reverse">
|
||||
<PlusSolid className="reactive-button inline-block size-7 fill-current p-[6px] rounded-full" onClick={() => handleIncrease(x.id)} />
|
||||
<Input
|
||||
type="number"
|
||||
min={initialTicketAmounts}
|
||||
max={remainingCapacity}
|
||||
value={orderQuantity.filter(q => q.id === x.id)[0].count}
|
||||
className="inline-block bg-gray-50 text-secondary-light text-base font-extrabold select-none w-12 outline-none text-center rounded"
|
||||
className="inline-block bg-gray-50 text-secondary-light text-base font-extrabold select-none w-12 outline-hidden text-center rounded-sm"
|
||||
onInput={(value) => Number(value) > remainingCapacity ? handleOrderQuantity(x.id, remainingCapacity) : handleOrderQuantity(x.id, Number(value))}
|
||||
/>
|
||||
<MinusSolid className="reactive-button inline-block size-7 fill-current p-[6px] rounded-full" onClick={() =>handleDecrease(x.id)} />
|
||||
@ -171,17 +171,17 @@ const ReservationPrice: React.FunctionComponent<ReservationPriceProps> = ({ serv
|
||||
}
|
||||
|
||||
{/* cancellation & refund policies */}
|
||||
<div className="block w-full !mt-4 pt-3 space-y-1 border-t border-dashed border-gray-200/75">
|
||||
<div className="block w-full mt-4! pt-3 space-y-1 border-t border-dashed border-gray-200/75">
|
||||
<ReservationDetail
|
||||
label={translate("billboard-reservation-free-cancellation")}
|
||||
value={serviceTypes.filter(x => x.service_id === selectedType)[0]?.free_cancellation ? translate("logic-yes") : translate("logic-no")}
|
||||
icon={<CalendarXmarkSolid className={`inline-block size-4 sm:size-4 fill-[var(--brand-color)] rtl:ml-1 ltr:mr-1 shrink-0`} />}
|
||||
icon={<CalendarXmarkSolid className={`inline-block size-4 sm:size-4 fill-(--brand-color) rtl:ml-1 ltr:mr-1 shrink-0`} />}
|
||||
labelClass=""
|
||||
/>
|
||||
<ReservationDetail
|
||||
label={translate("billboard-reservation-refundable")}
|
||||
value={serviceTypes.filter(x => x.service_id === selectedType)[0]?.refundable ? translate("logic-yes") : translate("logic-no")}
|
||||
icon={<CircleDollarSolid className={`inline-block size-4 sm:size-4 fill-[var(--brand-color)] rtl:ml-1 ltr:mr-1 shrink-0`} />}
|
||||
icon={<CircleDollarSolid className={`inline-block size-4 sm:size-4 fill-(--brand-color) rtl:ml-1 ltr:mr-1 shrink-0`} />}
|
||||
labelClass=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -45,7 +45,7 @@ const ReservationProductsDetails: React.FunctionComponent<ReservationProductsDet
|
||||
productTitle={getLocaleTr(product, locale).title}
|
||||
galleryItems={gallery}
|
||||
/>
|
||||
<div className="bg-white block w-full lg:w-1/2 px-6 lg:px-4 pt-4 pb-6 lg:pt-0 border-t-[4px] border-gray-50 lg:border-t-0 border-b lg:border-b-0 border-b-gray-100">
|
||||
<div className="bg-white block w-full lg:w-1/2 px-6 lg:px-4 pt-4 pb-6 lg:pt-0 border-t-4 border-gray-50 lg:border-t-0 border-b lg:border-b-0 border-b-gray-100">
|
||||
{product.category && <ProductBreadcrumbDesktop productCategory={product.category} parentCat={categories.filter(x => x.local_id === product.category.parent[0])[0]} billboardId={billboard.id} billboardTitle={billboardTitle} />}
|
||||
<ProductReservationHeader
|
||||
productTitle={getLocaleTr(product, locale).title}
|
||||
@ -63,7 +63,7 @@ const ReservationProductsDetails: React.FunctionComponent<ReservationProductsDet
|
||||
|
||||
{/* product desccription */}
|
||||
{getLocaleTr(product, locale).description && <ProductSection id="product-description" title={translate("billboard-product-description")} className="pt-4 mt-6 border-t border-dashed border-gray-200/75">
|
||||
<Parser limit limitLength={800} text={getLocaleTr(product, locale).description} className="[&_*]:lg:!text-sm/7" />
|
||||
<Parser limit limitLength={800} text={getLocaleTr(product, locale).description} className="lg:**:text-sm/7!" />
|
||||
</ProductSection>}
|
||||
|
||||
{/* product features */}
|
||||
@ -82,7 +82,7 @@ const ReservationProductsDetails: React.FunctionComponent<ReservationProductsDet
|
||||
<div className="block w-full space-y-2">
|
||||
{getLocaleTr(product, locale).event_rules.map((x: any, i: number) => (
|
||||
<div key={i} className="block w-full text-sm/6 text-secondary-light">
|
||||
<CircleExclamationSolid className={`inline-block size-3 fill-[var(--brand-color)] rtl:ml-2 ltr:mr-2`} />
|
||||
<CircleExclamationSolid className={`inline-block size-3 fill-(--brand-color) rtl:ml-2 ltr:mr-2`} />
|
||||
{x.rule}
|
||||
</div>
|
||||
))}
|
||||
@ -105,7 +105,7 @@ const ReservationProductsDetails: React.FunctionComponent<ReservationProductsDet
|
||||
|
||||
{/* gallery */}
|
||||
{product.type === "gallery" && <>
|
||||
<a href={`tel:${billboard.phone_number}`} className="reactive-button block w-full capitalize py-3 px-4 mt-10 rounded-lg bg-[var(--brand-color)] text-white font-semibold text-sm/6 text-center">
|
||||
<a href={`tel:${billboard.phone_number}`} className="reactive-button block w-full capitalize py-3 px-4 mt-10 rounded-lg bg-(--brand-color) text-white font-semibold text-sm/6 text-center">
|
||||
<PhoneSolid className={`inline-block size-4 xl:size-4 shrink-0 rtl:ml-3 ltr:mr-3 fill-current`} />
|
||||
{translate("billboard-page-gallery-type-cta")}
|
||||
</a>
|
||||
|
||||
@ -66,7 +66,7 @@ const SeatSelection: React.FunctionComponent<SeatSelectionProps> = ({ seatsData,
|
||||
<span className="flex items-center text-sm sm:text-base text-secondary-light capitalize text-current font-extrabold mb-2">{translate("billboard-reservation-seat-selection-title")}</span>
|
||||
</div>
|
||||
<span className="block text-sm/6 mb-2 mt-3 font-semibold text-secondary-light">
|
||||
<CaretLeftSolid className={`inline-block size-3 sm:size-3 fill-[var(--brand-color)] rtl:ml-1 ltr:mr-1 shrink-0 ltr:rotate-180`} />
|
||||
<CaretLeftSolid className={`inline-block size-3 sm:size-3 fill-(--brand-color) rtl:ml-1 ltr:mr-1 shrink-0 ltr:rotate-180`} />
|
||||
{locale === "fa" ? currecntSeatsMap?.persian_name : currecntSeatsMap?.english_name}
|
||||
</span>
|
||||
<div className="grid grid-cols-6 sm:grid-cols-8 md:grid-cols-10 lg:grid-cols-6 xl:grid-cols-7 2xl:grid-cols-8 gap-x-2 gap-y-2 w-full px-[2px] py-4">
|
||||
@ -74,7 +74,7 @@ const SeatSelection: React.FunctionComponent<SeatSelectionProps> = ({ seatsData,
|
||||
<div
|
||||
key={i}
|
||||
className={`reactive-button flex flex-col items-center w-full relative rounded-full px-2 py-2 select-none shrink-0 lg:cursor-pointer border-2 border-white ring-1
|
||||
${selectedTime?.reservedSeats.includes(x) ? "pointer-events-none bg-error-bg border-white ring-error-bg text-error-text" : (selectedSeat.includes(x) ? "ring-2 ring-[var(--brand-color)] bg-[var(--brand-color)] text-white" : "bg-white text-secondary-light ring-gray-200 lg:hover:bg-[var(--light-brand-color)]")} `}
|
||||
${selectedTime?.reservedSeats.includes(x) ? "pointer-events-none bg-error-bg border-white ring-error-bg text-error-text" : (selectedSeat.includes(x) ? "ring-2 ring-(--brand-color) bg-(--brand-color) text-white" : "bg-white text-secondary-light ring-gray-200 lg:hover:bg-(--light-brand-color)")} `}
|
||||
onClick={() => onSelect(x)}
|
||||
>
|
||||
<span className={`block text-xs lg:text-sm font-semibold mt-2 mb-1 uppercase text-current`}>{x}</span>
|
||||
@ -87,7 +87,7 @@ const SeatSelection: React.FunctionComponent<SeatSelectionProps> = ({ seatsData,
|
||||
wrapperId={`seats-map-modal`}
|
||||
open={showSeatsMap}
|
||||
onClose={() => setShowSeatsMap(false)}
|
||||
className="flex flex-col bg-white w-[90vw] h-auto max-h-[70vh] lg:w-auto lg:h-auto lg:min-w-[500px] lg:max-w-[90vw] lg:max-h-[90vh] rounded -top-[10%] lg:top-0"
|
||||
className="flex flex-col bg-white w-[90vw] h-auto max-h-[70vh] lg:w-auto lg:h-auto lg:min-w-[500px] lg:max-w-[90vw] lg:max-h-[90vh] rounded-sm top-[-10%] lg:top-0"
|
||||
childrenClass="lg:flierland-scrollbar"
|
||||
titleClass="text-lg"
|
||||
>
|
||||
@ -103,21 +103,21 @@ const SeatSelection: React.FunctionComponent<SeatSelectionProps> = ({ seatsData,
|
||||
priority={false}
|
||||
noPreload={true}
|
||||
fetchPriority="low"
|
||||
className="rounded-none will-change-transform !object-contain"
|
||||
figureClass="rounded-none w-full sm:w-[calc(100vw/3)] mx-auto transition-transform duration-200 select-none"
|
||||
className="rounded-none will-change-transform object-contain!"
|
||||
figureClass="rounded-none w-full sm:w-[33.333333333333336vw] mx-auto transition-transform duration-200 select-none"
|
||||
/>
|
||||
:
|
||||
<span className="block aspect-square w-16 rounded-lg lg:rounded">
|
||||
<span className="block aspect-square w-16 rounded-lg lg:rounded-sm">
|
||||
<ImageSharpSolid className="inline-block absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-16 xl:size-24 fill-gray-200" />
|
||||
</span>
|
||||
}
|
||||
</Modal>
|
||||
<div className="block w-full space-y-2 mt-4 mb-8">
|
||||
<p className="block text-sm/6 mb-4">
|
||||
<CircleExclamationSolid className={`inline-block size-4 sm:size-4 fill-[var(--brand-color)] rtl:ml-2 ltr:mr-2 shrink-0`} />
|
||||
<CircleExclamationSolid className={`inline-block size-4 sm:size-4 fill-(--brand-color) rtl:ml-2 ltr:mr-2 shrink-0`} />
|
||||
{translate("billboard-reservation-seat-selection-map-notice")}
|
||||
</p>
|
||||
<span className="reactive-button flex items-center justify-center w-max mx-auto text-xs sm:text-sm select-none text-[var(--brand-color)] capitalize font-semibold lg:cursor-pointer py-2 px-3 sm:px-4 rounded-lg bg-[var(--light-brand-color)]" onClick={() => setShowSeatsMap(true)}>
|
||||
<span className="reactive-button flex items-center justify-center w-max mx-auto text-xs sm:text-sm select-none text-(--brand-color) capitalize font-semibold lg:cursor-pointer py-2 px-3 sm:px-4 rounded-lg bg-(--light-brand-color)" onClick={() => setShowSeatsMap(true)}>
|
||||
{translate("billboard-reservation-seat-selection-map-cta")}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -41,7 +41,7 @@ const ServiceProviders: React.FunctionComponent<ServiceProvidersProps> = ({ serv
|
||||
className={`flex flex-col items-center justify-center w-full relative rounded-lg px-2 py-2 shrink-0 lg:cursor-pointer bg-white ${i === selectedProvider ? "" : ""}`}
|
||||
onClick={() => onSelect(i)}
|
||||
>
|
||||
<CircleCheckSolid className={`${i === selectedProvider ? "inline-block" : "hidden"} absolute top-0 right-5 -translate-y-1/2 translate-x-1/2 bg-white rounded-full size-5 fill-[var(--brand-color)]`} />
|
||||
<CircleCheckSolid className={`${i === selectedProvider ? "inline-block" : "hidden"} absolute top-0 right-5 -translate-y-1/2 translate-x-1/2 bg-white rounded-full size-5 fill-(--brand-color)`} />
|
||||
{hasValue(x.profile_pic) ?
|
||||
<Image
|
||||
src={`${x.profile_pic.id}/${x.profile_pic.filename_download}`}
|
||||
@ -54,15 +54,15 @@ const ServiceProviders: React.FunctionComponent<ServiceProvidersProps> = ({ serv
|
||||
priority={false}
|
||||
noPreload={true}
|
||||
fetchPriority="low"
|
||||
className={`rounded-full will-change-transform !object-cover border-4 ${i === selectedProvider ? "border-[var(--brand-color)]" : "border-gray-100"} `}
|
||||
figureClass="rounded-full w-24 transition-transform duration-200 select-none [&>div]:!bg-transparent"
|
||||
className={`rounded-full will-change-transform object-cover! border-4 ${i === selectedProvider ? "border-(--brand-color)" : "border-gray-100"} `}
|
||||
figureClass="rounded-full w-24 transition-transform duration-200 select-none [&>div]:bg-transparent!"
|
||||
/>
|
||||
:
|
||||
<span className="block aspect-square w-16 rounded-lg lg:rounded">
|
||||
<span className="block aspect-square w-16 rounded-lg lg:rounded-sm">
|
||||
<ImageSharpSolid className="inline-block absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-16 xl:size-24 fill-gray-200" />
|
||||
</span>
|
||||
}
|
||||
<span className={`block text-base lg:text-base font-semibold capitalize mt-3 ${i === selectedProvider ? "text-[var(--brand-color)]" : "text-secondary-light"}`}>{getLocaleTr(serviceProvidersList[i], locale).first_name}</span>
|
||||
<span className={`block text-base lg:text-base font-semibold capitalize mt-3 ${i === selectedProvider ? "text-(--brand-color)" : "text-secondary-light"}`}>{getLocaleTr(serviceProvidersList[i], locale).first_name}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -81,10 +81,10 @@ const ServiceTypes: React.FunctionComponent<ServiceTypesProps> = ({ serviceTypes
|
||||
<CaretLeftSolid className={`inline-block size-3 fill-secondary-light rtl:ml-1 ltr:mr-1 ltr:rotate-180`} />
|
||||
<span className={`inline-block text-sm lg:text-sm font-semibold capitalize text-secondary-light`}>{getLocaleTr(x, locale).title}</span>
|
||||
</div> */}
|
||||
<div className="flex flex-col mt-2 lg:cursor-pointer transition-all [&_svg]:hover:fill-info-bg" onClick={() => onSelect(x.service_id)}>
|
||||
<div className="flex flex-col mt-2 lg:cursor-pointer transition-all hover:[&_svg]:fill-info-bg" onClick={() => onSelect(x.service_id)}>
|
||||
<div className="flex items-center mb-4">
|
||||
{x.service_id === selectedType ?
|
||||
<CircleDotSolid className={`inline-block rounded-full size-4 !fill-[var(--brand-color)] rtl:ml-2 ltr:mr-2`} />
|
||||
<CircleDotSolid className={`inline-block rounded-full size-4 fill-(--brand-color)! rtl:ml-2 ltr:mr-2`} />
|
||||
:
|
||||
<CircleSolid className={`inline-block rounded-full size-4 fill-gray-100 rtl:ml-2 ltr:mr-2`} />
|
||||
}
|
||||
@ -97,7 +97,7 @@ const ServiceTypes: React.FunctionComponent<ServiceTypesProps> = ({ serviceTypes
|
||||
<div className="flex flex-col gap-1">
|
||||
{x.ticket_types.map(t => (
|
||||
<div key={t.reservation_ticket_type_id.id} className="flex items-center w-full gap-[2px] ps-2">
|
||||
<ArrowTurnDownLeftSolid className={`inline-block size-3 !fill-[var(--brand-color)] me-2`} />
|
||||
<ArrowTurnDownLeftSolid className={`inline-block size-3 fill-(--brand-color)! me-2`} />
|
||||
{x.ticket_types.length > 1 &&
|
||||
<>
|
||||
<span className={`inline-block text-sm capitalize`}>{getLocaleTr(t.reservation_ticket_type_id, locale).title}</span>
|
||||
@ -129,7 +129,7 @@ const ServiceTypes: React.FunctionComponent<ServiceTypesProps> = ({ serviceTypes
|
||||
<span className="flex items-center text-sm sm:text-base text-secondary-light capitalize text-current font-extrabold mb-4">{translate("billboard-product-reservation-available-types-info")}</span>
|
||||
</div>
|
||||
<div className="block w-full text-sm/6 text-secondary-light">
|
||||
{/* <CaretLeftSolid className={`inline-block size-3 fill-[var(--brand-color)] rtl:ml-1 ltr:mr-1 ltr:rotate-180`} /> */}
|
||||
{/* <CaretLeftSolid className={`inline-block size-3 fill-(--brand-color) rtl:ml-1 ltr:mr-1 ltr:rotate-180`} /> */}
|
||||
{stripHtml(getLocaleTr(serviceTypesList.filter(x => x.service_id === selectedType)[0], locale).description)}
|
||||
</div>
|
||||
</>}
|
||||
|
||||
@ -37,12 +37,12 @@ const TimeSelection: React.FunctionComponent<TimeSelectionProps> = ({ timeSlots,
|
||||
{timeSlots.map((x:any, i: number) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`reactive-button flex flex-col items-center w-full relative rounded-full px-2 py-3 shrink-0 lg:cursor-pointer ring-1 ${x.from === selectedTime?.from ? "selected-date bg-[var(--light-brand-color)] ring-2 ring-[var(--brand-color)]" : "ring-gray-200"} ${x.reserved === x.capacity ? "bg-gray-50 pointer-events-none" : "bg-white"}`}
|
||||
className={`reactive-button flex flex-col items-center w-full relative rounded-full px-2 py-3 shrink-0 lg:cursor-pointer ring-1 ${x.from === selectedTime?.from ? "selected-date bg-(--light-brand-color) ring-2 ring-(--brand-color)" : "ring-gray-200"} ${x.reserved === x.capacity ? "bg-gray-50 pointer-events-none" : "bg-white"}`}
|
||||
onClick={() => onSelect(x)}
|
||||
>
|
||||
<span className={`inline-block text-xs absolute top-0 px-4 py-[2px] rounded-full -translate-y-1/2 bg-white text-secondary-light border border-gray-200`}>{x.reserved === x.capacity ? `${translate("billboard-reservation-slot-full")}` : `${x.reserved}/${x.capacity}`}</span>
|
||||
<span className={`block text-xs lg:text-sm font-semibold mt-2 mb-1 ${x.from === selectedTime?.from ? "text-[var(--brand-color)]" : "text-secondary-light"} ${x.reserved === x.capacity ? "!text-gray-400" : ""} [direction:ltr]`}>{`${x.from.slice(0, 5)} - ${x.to.slice(0, 5)}`}</span>
|
||||
<CircleCheckSolid className={`${x.from === selectedTime?.from ? "inline-block" : "hidden"} absolute bottom-0 translate-y-1/2 bg-white rounded-full size-5 fill-[var(--brand-color)]`} />
|
||||
<span className={`block text-xs lg:text-sm font-semibold mt-2 mb-1 ${x.from === selectedTime?.from ? "text-(--brand-color)" : "text-secondary-light"} ${x.reserved === x.capacity ? "text-gray-400!" : ""} [direction:ltr]`}>{`${x.from.slice(0, 5)} - ${x.to.slice(0, 5)}`}</span>
|
||||
<CircleCheckSolid className={`${x.from === selectedTime?.from ? "inline-block" : "hidden"} absolute bottom-0 translate-y-1/2 bg-white rounded-full size-5 fill-(--brand-color)`} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -35,7 +35,7 @@ const ProductItem: React.FunctionComponent<ProductItemProps> = ({ item, priceDat
|
||||
return (
|
||||
<div title={itemTitle} className="flex flex-col items-center w-full relative bg-white rounded-lg shrink-0 justify-center lg:cursor-pointer lg:hover:shadow-lg overflow-hidden">
|
||||
{/* discount percentage */}
|
||||
{price.discounted_price !== -1 && <div className="flex items-center w-max absolute capitalize top-0 rtl:right-0 ltr:left-0 z-10 text-white bg-[var(--brand-color)] rtl:rounded-bl-lg ltr:rounded-br-lg py-1 px-2">
|
||||
{price.discounted_price !== -1 && <div className="flex items-center w-max absolute capitalize top-0 rtl:right-0 ltr:left-0 z-10 text-white bg-(--brand-color) rtl:rounded-bl-lg ltr:rounded-br-lg py-1 px-2">
|
||||
<PercentageSolid className="inline-block size-3 sm:size-3 fill-current rtl:ml-[2px] ltr:mr-[2px]" />
|
||||
<span className="inline-block text-[0.625rem]/4 sm:text-xs text-current font-semibold shrink-0">{`${Math.ceil(((price.price - price.discounted_price) / price.price) * 100)} ${translate("discount")}`}</span>
|
||||
</div>}
|
||||
@ -54,7 +54,7 @@ const ProductItem: React.FunctionComponent<ProductItemProps> = ({ item, priceDat
|
||||
shallow
|
||||
scroll={false}
|
||||
target={item.ad_item ? "_blank" : "_self"}
|
||||
className="block w-full aspect-3/2 md:aspect-3/2 rounded-lg lg:rounded">
|
||||
className="block w-full aspect-3/2 md:aspect-3/2 rounded-lg lg:rounded-sm">
|
||||
<ImageSharpSolid className="inline-block absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-16 xl:size-24 fill-gray-200" />
|
||||
</Link>
|
||||
}
|
||||
@ -76,7 +76,7 @@ const ProductItem: React.FunctionComponent<ProductItemProps> = ({ item, priceDat
|
||||
mode="single"
|
||||
rating={Number(rating.toFixed(2))}
|
||||
className="text-amber-500 -mr-1 w-max gap-[2px]"
|
||||
starClass="size-[0.775rem] sm:size-[0.875rem] shrink-0"
|
||||
starClass="size-[0.775rem] sm:size-3.5 shrink-0"
|
||||
singleRateClass="font-semibold text-secondary-light text-sm"
|
||||
singleWrapperClass="gap-[6px]"
|
||||
/>
|
||||
@ -87,8 +87,8 @@ const ProductItem: React.FunctionComponent<ProductItemProps> = ({ item, priceDat
|
||||
<span className="text-sm sm:text-base text-secondary-light font-extrabold">{`${price.currency.sign}${price.discounted_price !== -1 ? price.discounted_price : price.price}`}</span>
|
||||
</div>
|
||||
<div
|
||||
className="reactive-button button flex items-center justify-center rounded sm:rounded py-2 px-2
|
||||
bg-gray-50 text-secondary-light sm:ring-gray-200 hover:bg-[var(--brand-color)] hover:text-white select-none"
|
||||
className="reactive-button button flex items-center justify-center rounded sm:rounded-sm py-2 px-2
|
||||
bg-gray-50 text-secondary-light sm:ring-gray-200 hover:bg-(--brand-color) hover:text-white select-none"
|
||||
onClick={handleAddToCart}
|
||||
>
|
||||
<CartPlusSolid className="inline-block size-[14px] sm:size-4 fill-current me-2" />
|
||||
|
||||
@ -47,7 +47,7 @@ const ProductPhotos: React.FunctionComponent<ProductPhotosProps> = ({ billboardI
|
||||
}
|
||||
|
||||
const GalleryItem: React.FunctionComponent<any> = ({ item }) => {
|
||||
return <div id={item.id} className="block mx-auto rounded-lg w-full select-none [&>div]:!bg-transparent lg:cursor-pointer shrink-0 snap-center snap-always">
|
||||
return <div id={item.id} className="block mx-auto rounded-lg w-full select-none [&>div]:bg-transparent! lg:cursor-pointer shrink-0 snap-center snap-always">
|
||||
<Image
|
||||
src={`${item.id}/${item.filename_download}`}
|
||||
alt={translate("pic-of") + productTitle}
|
||||
@ -59,8 +59,8 @@ const ProductPhotos: React.FunctionComponent<ProductPhotosProps> = ({ billboardI
|
||||
priority={true}
|
||||
noPreload={true}
|
||||
fetchPriority="low"
|
||||
className="rounded-lg !object-contain"
|
||||
figureClass="block mx-auto rounded-lg w-full select-none [&>div]:!bg-transparent shrink-0"
|
||||
className="rounded-lg object-contain!"
|
||||
figureClass="block mx-auto rounded-lg w-full select-none [&>div]:bg-transparent! shrink-0"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
@ -92,12 +92,12 @@ const ProductPhotos: React.FunctionComponent<ProductPhotosProps> = ({ billboardI
|
||||
priority={true}
|
||||
noPreload={true}
|
||||
fetchPriority="low"
|
||||
className="rounded-lg !object-contain"
|
||||
figureClass="hidden lg:block mx-auto rounded-lg w-full select-none [&>div]:!bg-transparent shrink-0"
|
||||
className="rounded-lg object-contain!"
|
||||
figureClass="hidden lg:block mx-auto rounded-lg w-full select-none [&>div]:bg-transparent! shrink-0"
|
||||
/>
|
||||
</>
|
||||
:
|
||||
<span className="block w-full aspect-square md:aspect-square rounded-lg lg:rounded">
|
||||
<span className="block w-full aspect-square md:aspect-square rounded-lg lg:rounded-sm">
|
||||
<ImageSharpSolid className="inline-block absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-16 xl:size-24 fill-gray-200" />
|
||||
</span>
|
||||
}
|
||||
@ -106,7 +106,7 @@ const ProductPhotos: React.FunctionComponent<ProductPhotosProps> = ({ billboardI
|
||||
{/* pic index dots */}
|
||||
<div className="flex lg:hidden items-center justify-center gap-1 pt-4">
|
||||
{selectedThumb.map((x, i) => (
|
||||
<span key={x.directus_files_id.id} className={`inline-block size-[6px] ${currentPic === i ? "bg-[var(--brand-color)]" : "bg-[var(--light-brand-color)]"} rounded-sm`}></span>
|
||||
<span key={x.directus_files_id.id} className={`inline-block size-[6px] ${currentPic === i ? "bg-(--brand-color)" : "bg-(--light-brand-color)"} rounded-xs`}></span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -118,7 +118,7 @@ const ProductPhotos: React.FunctionComponent<ProductPhotosProps> = ({ billboardI
|
||||
key={x}
|
||||
title={getColorData(x).name}
|
||||
style={{ "--color": `#${getColorData(x).code}` } as React.CSSProperties}
|
||||
className={`inline-block size-[22px] sm:size-[22px] bg-[var(--color)] rounded-full border-2 border-white lg:hover:scale-105 transition-transform duration-75 ring-1 ${selectedVariant === x ? "ring-[var(--color)]" : "ring-gray-100"} shrink-0`}
|
||||
className={`inline-block size-[22px] sm:size-[22px] bg-(--color) rounded-full border-2 border-white lg:hover:scale-105 transition-transform duration-75 ring-1 ${selectedVariant === x ? "ring-(--color)" : "ring-gray-100"} shrink-0`}
|
||||
onClick={() => setSelectedVariant(x)}
|
||||
>
|
||||
</span>
|
||||
|
||||
@ -31,10 +31,10 @@ const ReservationItem: React.FunctionComponent<ReservationItemProps> = ({ item,
|
||||
shallow
|
||||
scroll={false}
|
||||
target={item.ad_item ? "_blank" : "_self"}
|
||||
className="reactive-button flex items-center w-full relative bg-white rounded-lg shrink-0 justify-center lg:cursor-pointer lg:hover:shadow-lg [&_.button]:hover:bg-[var(--brand-color)] [&_.button]:hover:text-white [&_.button]:hover:ring-[var(--brand-color)] overflow-hidden"
|
||||
className="reactive-button flex items-center w-full relative bg-white rounded-lg shrink-0 justify-center lg:cursor-pointer lg:hover:shadow-lg hover:[&_.button]:bg-(--brand-color) hover:[&_.button]:text-white hover:[&_.button]:ring-(--brand-color) overflow-hidden"
|
||||
>
|
||||
{/* discount percentage */}
|
||||
{/* {item.discount_price && <div className="flex items-center w-max absolute capitalize top-0 rtl:right-0 ltr:left-0 z-10 text-white bg-[var(--brand-color)] rtl:rounded-bl-lg ltr:rounded-br-lg py-1 px-2">
|
||||
{/* {item.discount_price && <div className="flex items-center w-max absolute capitalize top-0 rtl:right-0 ltr:left-0 z-10 text-white bg-(--brand-color) rtl:rounded-bl-lg ltr:rounded-br-lg py-1 px-2">
|
||||
<PercentageSolid className="inline-block size-3 sm:size-3 fill-current rtl:ml-[2px] ltr:mr-[2px]" />
|
||||
<span className="inline-block text-[0.625rem]/4 sm:text-xs text-current font-semibold shrink-0">{`${Math.ceil(((item.price - item.discount_price) / item.price) * 100)} ${translate("discount")}`}</span>
|
||||
</div>} */}
|
||||
@ -51,29 +51,29 @@ const ReservationItem: React.FunctionComponent<ReservationItemProps> = ({ item,
|
||||
priority={true}
|
||||
noPreload={true}
|
||||
fetchPriority="low"
|
||||
className={`rounded will-change-transform !object-cover`}
|
||||
figureClass="rounded w-full transition-transform duration-200 select-none [&>div]:!bg-transparent"
|
||||
className={`rounded-sm will-change-transform object-cover!`}
|
||||
figureClass="rounded-sm w-full transition-transform duration-200 select-none [&>div]:bg-transparent!"
|
||||
/>
|
||||
:
|
||||
<span className="block w-full aspect-3/2 md:aspect-3/2 rounded-lg lg:rounded">
|
||||
<span className="block w-full aspect-3/2 md:aspect-3/2 rounded-lg lg:rounded-sm">
|
||||
<ImageSharpSolid className="inline-block absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-16 xl:size-24 fill-gray-200" />
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
<div className="bg-white block w-full h-full px-3 rtl:pr-2 ltr:pl-2 py-3 max-sm:pt-2 sm:px-4 rtl:sm:pr-2 ltr:sm:pl-2 sm:pb-4">
|
||||
<div className="bg-white block w-full h-full px-3 rtl:pr-2 ltr:pl-2 py-3 max-sm:pt-2 sm:px-4 sm:rtl:pr-2 sm:ltr:pl-2 sm:pb-4">
|
||||
<h2 className={`text-sm/7 font-extrabold sm:text-xl text-secondary-light line-clamp-1 sm:line-clamp-1 mb-2 sm:mb-3 uppercase shrink-0`}>{itemTitle}</h2>
|
||||
<div className="flex items-center sm:items-end space-x-2 rtl:space-x-reverse mb-3">
|
||||
<StarRating rating={rating} className="text-amber-500 -mr-1 w-max" starClass="size-3 sm:size-[0.875rem] shrink-0" />
|
||||
<StarRating rating={rating} className="text-amber-500 -mr-1 w-max" starClass="size-3 sm:size-3.5 shrink-0" />
|
||||
<span className="inline-block text-xs sm:text-sm/[0.875rem] text-secondary-light">{`(${rating})`}</span>
|
||||
</div>
|
||||
<p className="text-xs/[1.25rem] sm:text-xs/6 first-letter:capitalize line-clamp-2">{stripHtml(getLocaleTr(item, locale).description)}</p>
|
||||
<span className="hidden sm:inline-block text-xs bg-[var(--light-brand-color)] text-[var(--brand-color)] capitalize font-semibold mt-3 mb-1 py-1 px-2 rounded">{getLocaleTr(item.category, locale).name}</span>
|
||||
<span className="hidden sm:inline-block text-xs bg-(--light-brand-color) text-(--brand-color) capitalize font-semibold mt-3 mb-1 py-1 px-2 rounded-sm">{getLocaleTr(item.category, locale).name}</span>
|
||||
<div className="flex flex-row items-center justify-between mt-3">
|
||||
<div className="flex items-center w-max text-secondary-light">
|
||||
{item && serviceType.ticket_types[0].discount_price && <span className="text-sm text-cool-gray line-through font-semibold rtl:ml-2 ltr:mr-2">${serviceType.ticket_types[0].price}</span>}
|
||||
<span className="text-base sm:text-base text-[var(--brand-color)] font-extrabold">{`$${serviceType.ticket_types[0].discount_price ?? serviceType.ticket_types[0].price}`}</span>
|
||||
<span className="text-base sm:text-base text-(--brand-color) font-extrabold">{`$${serviceType.ticket_types[0].discount_price ?? serviceType.ticket_types[0].price}`}</span>
|
||||
</div>
|
||||
<div className="reactive-button button flex items-center justify-center rounded py-[6px] px-2 bg-white text-secondary-light ring-1 ring-gray-200">
|
||||
<div className="reactive-button button flex items-center justify-center rounded-sm py-[6px] px-2 bg-white text-secondary-light ring-1 ring-gray-200">
|
||||
<span className="text-xs sm:text-xs text-current capitalize">{translate("billboard-products-reservation-card-see-details")}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -124,7 +124,7 @@ const ProductCatsFilter: React.FunctionComponent<ProductCatsFilterProps> = ({ ca
|
||||
|
||||
<div className="flex items-center w-full gap-3 lg:px-4 pt-2 lg:pt-3 pb-5 border-b border-gray-200/50">
|
||||
{/* categories */}
|
||||
<div className={`reactive-button flex items-center w-max select-none bg-white py-2 px-4 text-xs sm:text-sm text-secondary-light rounded-full shadow-sm capitalize`} onClick={() => setAllCatsOpen(true)}>
|
||||
<div className={`reactive-button flex items-center w-max select-none bg-white py-2 px-4 text-xs sm:text-sm text-secondary-light rounded-full shadow-xs capitalize`} onClick={() => setAllCatsOpen(true)}>
|
||||
<SplitSolid className="inline-block size-3 lg:size-3 fill-current me-2 lg:me-2 select-none" />
|
||||
{activeParent === 0 ? filtersLabel() : getLocaleTr(parents.filter(x => x.local_id === activeParent)[0], locale).name}
|
||||
</div>
|
||||
@ -135,10 +135,10 @@ const ProductCatsFilter: React.FunctionComponent<ProductCatsFilterProps> = ({ ca
|
||||
{cats.filter(x => x.parent[0] === activeParent).sort((a, b) => a.sort_id - b.sort_id).map(x => (
|
||||
<div
|
||||
key={x.id}
|
||||
className={`flex flex-col items-center justify-center gap-3 w-24 shrink-0 lg:cursor-pointer [&>span]:hover:lg:bg-white [&>span]:hover:lg:text-[var(--brand-color)]`}
|
||||
className={`flex flex-col items-center justify-center gap-3 w-24 shrink-0 lg:cursor-pointer lg:hover:[&>span]:bg-white lg:hover:[&>span]:text-(--brand-color)`}
|
||||
onClick={() => handleSubCatSelection(x.local_id)}
|
||||
>
|
||||
<div className={`reactive-button block w-[88px] !h-[88px] relative rounded-full shadow-bot border-[4px] ${activeChild === x.local_id ? "border-[var(--medium-brand-color)]" : "border-white"}`}>
|
||||
<div className={`reactive-button block w-[88px] h-[88px]! relative rounded-full shadow-bot border-4 ${activeChild === x.local_id ? "border-(--medium-brand-color)" : "border-white"}`}>
|
||||
{x.thumbnail ?
|
||||
<Image
|
||||
src={`${x.thumbnail.id}/${x.thumbnail.filename_download}`}
|
||||
@ -151,11 +151,11 @@ const ProductCatsFilter: React.FunctionComponent<ProductCatsFilterProps> = ({ ca
|
||||
priority={true}
|
||||
noPreload={true}
|
||||
fetchPriority="low"
|
||||
className={`rounded-full will-change-transform !object-cover`}
|
||||
figureClass="rounded-full w-full transition-transform duration-200 select-none [&>div]:!bg-transparent"
|
||||
className={`rounded-full will-change-transform object-cover!`}
|
||||
figureClass="rounded-full w-full transition-transform duration-200 select-none [&>div]:bg-transparent!"
|
||||
/>
|
||||
:
|
||||
<span className="block w-full rounded-lg lg:rounded">
|
||||
<span className="block w-full rounded-lg lg:rounded-sm">
|
||||
<ImageSharpSolid className="inline-block absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-10 xl:size-10 fill-gray-200" />
|
||||
</span>
|
||||
}
|
||||
@ -163,7 +163,7 @@ const ProductCatsFilter: React.FunctionComponent<ProductCatsFilterProps> = ({ ca
|
||||
<span
|
||||
key={x.local_id}
|
||||
title={getLocaleTr(x, locale).name}
|
||||
className={`${`${x.local_id}-active-cat`} reactive-button shrink-0 py-1 px-3 capitalize rounded-full text-xs/6 text-center select-none font-semibold line-clamp-1 ${activeChild === x.local_id ? "!bg-[var(--light-brand-color)] !text-[var(--brand-color)]" : "text-secondary-light"}`}
|
||||
className={`${`${x.local_id}-active-cat`} reactive-button shrink-0 py-1 px-3 capitalize rounded-full text-xs/6 text-center select-none font-semibold line-clamp-1 ${activeChild === x.local_id ? "bg-(--light-brand-color)! text-(--brand-color)!" : "text-secondary-light"}`}
|
||||
>
|
||||
{getLocaleTr(x, locale).name}
|
||||
</span>
|
||||
|
||||
@ -51,8 +51,8 @@ const ColorSelection: React.FunctionComponent<ColorSelectionProps> = ({ allVaria
|
||||
<span
|
||||
key={x.id}
|
||||
style={{ "--color": `#${x.hex_code}` } as React.CSSProperties}
|
||||
className={`reactive-button relative inline-block size-9 border-[3px] border-white rounded-full bg-[var(--color)] mx-auto lg:cursor-pointer ring-2 shrink-0
|
||||
${selectedColor.id === x.id ? "ring-[var(--brand-color)]" : "ring-[var(--light-brand-color)]"}
|
||||
className={`reactive-button relative inline-block size-9 border-[3px] border-white rounded-full bg-(--color) mx-auto lg:cursor-pointer ring-2 shrink-0
|
||||
${selectedColor.id === x.id ? "ring-(--brand-color)" : "ring-(--light-brand-color)"}
|
||||
${!available.some(y => y.id === x.id) ? "opacity-50" : ""}
|
||||
`}
|
||||
onClick={() => handleColorSelection(x)}
|
||||
|
||||
@ -32,10 +32,10 @@ const Featuredtem: React.FunctionComponent<FeaturedtemProps> = ({ item, billboar
|
||||
href={`/billboard/${billboardId}/${url(billboardTitle)}?product=${item.id}#products`}
|
||||
shallow
|
||||
scroll={false}
|
||||
className="flex flex-col items-center w-full relative bg-white rounded-md shrink-0 justify-center lg:cursor-pointer lg:hover:shadow-lg [&_.button]:hover:bg-[var(--brand-color)] [&_.button]:hover:text-white [&_.button]:hover:ring-[var(--brand-color)] overflow-hidden"
|
||||
className="flex flex-col items-center w-full relative bg-white rounded-md shrink-0 justify-center lg:cursor-pointer lg:hover:shadow-lg hover:[&_.button]:bg-(--brand-color) hover:[&_.button]:text-white hover:[&_.button]:ring-(--brand-color) overflow-hidden"
|
||||
>
|
||||
{/* discount percentage */}
|
||||
{/* {price.discounted_price && <div className="flex items-center w-max absolute capitalize top-0 rtl:right-0 ltr:left-0 z-10 text-white bg-[var(--brand-color)] rtl:rounded-bl-lg ltr:rounded-br-lg py-1 px-2">
|
||||
{/* {price.discounted_price && <div className="flex items-center w-max absolute capitalize top-0 rtl:right-0 ltr:left-0 z-10 text-white bg-(--brand-color) rtl:rounded-bl-lg ltr:rounded-br-lg py-1 px-2">
|
||||
<PercentageSolid className="inline-block size-3 sm:size-3 fill-current rtl:ml-[2px] ltr:mr-[2px]" />
|
||||
<span className="inline-block text-[0.625rem]/4 sm:text-xs text-current font-semibold shrink-0">{`${Math.ceil(((price.price - price.discounted_price) / price.price) * 100)} ${translate("discount")}`}</span>
|
||||
</div>}
|
||||
@ -52,22 +52,22 @@ const Featuredtem: React.FunctionComponent<FeaturedtemProps> = ({ item, billboar
|
||||
priority={true}
|
||||
noPreload={true}
|
||||
fetchPriority="low"
|
||||
className="rounded-lg will-change-transform !object-contain"
|
||||
figureClass="rounded-lg w-full transition-transform duration-200 select-none [&>div]:!bg-transparent"
|
||||
className="rounded-lg will-change-transform object-contain!"
|
||||
figureClass="rounded-lg w-full transition-transform duration-200 select-none [&>div]:bg-transparent!"
|
||||
/>
|
||||
:
|
||||
<span className="block w-full aspect-3/2 md:aspect-3/2 rounded-lg lg:rounded">
|
||||
<span className="block w-full aspect-3/2 md:aspect-3/2 rounded-lg lg:rounded-sm">
|
||||
<ImageSharpSolid className="inline-block absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-16 xl:size-24 fill-gray-200" />
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
<div className="bg-white block w-full max-sm:pt-2 px-3 py-3 sm:px-4 sm:py-4">
|
||||
<h2 className="text-xs/6 font-extrabold sm:text-[0.825rem] text-secondary-light line-clamp-2 sm:line-clamp-1 mb-2 h-12 sm:h-6">{itemTitle}</h2>
|
||||
<StarRating rating={rating} className="text-amber-500 -mr-1 w-max" starClass="size-[0.875rem] shrink-0" />
|
||||
<StarRating rating={rating} className="text-amber-500 -mr-1 w-max" starClass="size-3.5 shrink-0" />
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between mt-4">
|
||||
<div className="flex items-center w-max text-secondary-light max-sm:mb-3">
|
||||
{price.discounted_price && <span className="text-sm text-cool-gray line-through font-semibold rtl:ml-2 ltr:mr-2">${price.price}</span>}
|
||||
<span className="text-base sm:text-base text-[var(--brand-color)] font-extrabold">{`$${price.discounted_price ?? price.price}`}</span>
|
||||
<span className="text-base sm:text-base text-(--brand-color) font-extrabold">{`$${price.discounted_price ?? price.price}`}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
@ -86,11 +86,11 @@ const ProductFilters: React.FunctionComponent<ProductFiltersProps> = ({
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
title={translate("products-page-filter-results")}
|
||||
className="flex flex-col bg-white w-[90vw] h-auto max-h-[80vh] lg:w-auto lg:h-auto lg:min-w-[500px] lg:max-w-[90vw] lg:max-h-[90vh] rounded"
|
||||
className="flex flex-col bg-white w-[90vw] h-auto max-h-[80vh] lg:w-auto lg:h-auto lg:min-w-[500px] lg:max-w-[90vw] lg:max-h-[90vh] rounded-sm"
|
||||
childrenClass="lg:flierland-scrollbar min-h-96 flex flex-col p-4 justify-between"
|
||||
headerClass="!h-12"
|
||||
titleClass="!text-sm"
|
||||
closeClass="!size-6"
|
||||
headerClass="h-12!"
|
||||
titleClass="text-sm!"
|
||||
closeClass="size-6!"
|
||||
style={themeStyles}
|
||||
>
|
||||
<div className="flex flex-col justify-between w-full h-full lg:px-2">
|
||||
@ -99,7 +99,7 @@ const ProductFilters: React.FunctionComponent<ProductFiltersProps> = ({
|
||||
label={translate("products-page-filters-modal-discounted-only")}
|
||||
value={
|
||||
<div
|
||||
className={`flex items-center gap-2 w-fit ${!discountedOnly ? "bg-gray-50 text-secondary-light" : "bg-[var(--brand-color)] text-white"} py-2 px-4 rounded-full lg:cursor-pointer select-none`}
|
||||
className={`flex items-center gap-2 w-fit ${!discountedOnly ? "bg-gray-50 text-secondary-light" : "bg-(--brand-color) text-white"} py-2 px-4 rounded-full lg:cursor-pointer select-none`}
|
||||
onClick={() => onShowDiscountedItems(!discountedOnly)}
|
||||
>
|
||||
<PercentageSolid className={`${iconClass} `} />
|
||||
@ -117,10 +117,10 @@ const ProductFilters: React.FunctionComponent<ProductFiltersProps> = ({
|
||||
value={sortingOptions.filter(x => x.value === sortBy).map(x => ({ label: x.label, value: x.value, disabled: x.disabled }))[0]}
|
||||
options={sortingOptions.map(x => ({ label: x.label, value: x.value, disabled: x.disabled }))}
|
||||
onChange={(data) => onSort(data.value as SortingTypesProps)}
|
||||
optionsWrapper="inline-block w-full px-2 max-sm:!rounded-full max-sm:!bg-gray-50 !ring-0 capitalize text-xs sm:text-sm max-sm:!py-[6px]"
|
||||
buttonWrapper="!ring-0"
|
||||
wrapperClass="block !min-w-20 bg-gray-50 rounded-full"
|
||||
buttonText='text-xs sm:!text-sm'
|
||||
optionsWrapper="inline-block w-full px-2 max-sm:rounded-full! max-sm:bg-gray-50! ring-0! capitalize text-xs sm:text-sm max-sm:py-[6px]!"
|
||||
buttonWrapper="ring-0!"
|
||||
wrapperClass="block min-w-20! bg-gray-50 rounded-full"
|
||||
buttonText='text-xs sm:text-sm!'
|
||||
/>
|
||||
}
|
||||
/>
|
||||
@ -150,14 +150,14 @@ const ProductFilters: React.FunctionComponent<ProductFiltersProps> = ({
|
||||
<Button
|
||||
type="button"
|
||||
text={translate("products-page-filters-modal-cta")}
|
||||
className="block w-full mt-4 py-3 px-4 rounded-lg ring-2 ring-[var(--brand-color)] bg-[var(--brand-color)] text-white text-xs sm:text-sm"
|
||||
className="block w-full mt-4 py-3 px-4 rounded-lg ring-2 ring-(--brand-color) bg-(--brand-color) text-white text-xs sm:text-sm"
|
||||
leftIcon={<CheckSolid className={`${buttonIconClass}`} />}
|
||||
onClick={onClose}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
text={translate("reset-filters")}
|
||||
className="block w-full mt-4 py-3 px-4 rounded-lg ring-2 ring-[var(--brand-color)] bg-white text-[var(--brand-color)] text-xs sm:text-sm"
|
||||
className="block w-full mt-4 py-3 px-4 rounded-lg ring-2 ring-(--brand-color) bg-white text-(--brand-color) text-xs sm:text-sm"
|
||||
leftIcon={<ArrowsRotateSolid className={`${buttonIconClass}`} />}
|
||||
onClick={onResetFilters}
|
||||
/>
|
||||
|
||||
@ -140,7 +140,7 @@ const HighlightedProducts: React.FunctionComponent<HighlightedProductsProps> = (
|
||||
{/* header */}
|
||||
<div className="flex items-center justify-center space-x-2 rtl:space-x-reverse pt-8 pb-4">
|
||||
{cats.map(x => (
|
||||
<span key={x.id} className={`flex items-center justify-center select-none py-1 px-4 rounded-lg text-sm lg:cursor-pointer shadow ${title + 1 === x.id ? "bg-[var(--brand-color)] text-white" : "bg-white text-secondary-light"}`} onClick={() => setTitle(x.id - 1)}>{cats[x.id - 1].name}</span>
|
||||
<span key={x.id} className={`flex items-center justify-center select-none py-1 px-4 rounded-lg text-sm lg:cursor-pointer shadow-sm ${title + 1 === x.id ? "bg-(--brand-color) text-white" : "bg-white text-secondary-light"}`} onClick={() => setTitle(x.id - 1)}>{cats[x.id - 1].name}</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -151,7 +151,7 @@ const HighlightedProducts: React.FunctionComponent<HighlightedProductsProps> = (
|
||||
<BoxOpenSolid className="inline-block size-3 lg:size-6 fill-secondary-light rtl:ml-3 ltr:mr-3" />
|
||||
{`${locale === "fa" ? translate("products") : ""} ${cats[title].name} ${locale === "en" ? translate("products") : ""}`}
|
||||
</span>
|
||||
<span className="inline-block text-sm py-2 px-3 rounded-lg bg-white text-secondary-light hover:bg-[var(--light-brand-color)] hover:text-[var(--brand-color)] lg:cursor-pointer">{translate("see-all")}</span>
|
||||
<span className="inline-block text-sm py-2 px-3 rounded-lg bg-white text-secondary-light hover:bg-(--light-brand-color) hover:text-(--brand-color) lg:cursor-pointer">{translate("see-all")}</span>
|
||||
</div>
|
||||
{currentProducts ?
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4 w-full py-4">
|
||||
|
||||
@ -25,8 +25,8 @@ const ProductPlaceHolder: React.FunctionComponent<ProductPlaceHolderProps> = ({
|
||||
{/* mobile breadcrumb */}
|
||||
<div className="flex lg:hidden items-center w-full mb-3 px-2 mt-2">
|
||||
<div className="flex items-center w-full space-x-4 rtl:space-x-reverse bg-gray-50 px-6 py-3 rounded-lg">
|
||||
<span className="inline-block w-20 rounded h-6 bg-gray-200/75"></span>
|
||||
<span className="inline-block w-20 rounded h-6 bg-gray-200/75"></span>
|
||||
<span className="inline-block w-20 rounded-sm h-6 bg-gray-200/75"></span>
|
||||
<span className="inline-block w-20 rounded-sm h-6 bg-gray-200/75"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -50,38 +50,38 @@ const ProductPlaceHolder: React.FunctionComponent<ProductPlaceHolderProps> = ({
|
||||
{/* desktop breadcrumb */}
|
||||
<div className="hidden lg:flex items-center justify-between w-full mb-3 lg:mb-8">
|
||||
<div className="flex items-center space-x-4 rtl:space-x-reverse">
|
||||
<span className="inline-block w-20 rounded h-5 bg-gray-200/75"></span>
|
||||
<span className="inline-block w-20 rounded h-5 bg-gray-200/75"></span>
|
||||
<span className="inline-block w-20 rounded-sm h-5 bg-gray-200/75"></span>
|
||||
<span className="inline-block w-20 rounded-sm h-5 bg-gray-200/75"></span>
|
||||
</div>
|
||||
<span className="inline-block size-12 rounded-full bg-gray-200/75"></span>
|
||||
</div>
|
||||
{/* title */}
|
||||
<div className="block w-4/5 rounded h-6 bg-gray-200/75 mb-4"></div>
|
||||
<div className="block w-4/5 rounded-sm h-6 bg-gray-200/75 mb-4"></div>
|
||||
<div className="flex items-center space-x-4 rtl:space-x-reverse">
|
||||
<span className="inline-block w-20 rounded h-5 bg-gray-200/75"></span>
|
||||
<span className="inline-block w-20 rounded h-5 bg-gray-200/75"></span>
|
||||
<span className="inline-block w-20 rounded-sm h-5 bg-gray-200/75"></span>
|
||||
<span className="inline-block w-20 rounded-sm h-5 bg-gray-200/75"></span>
|
||||
</div>
|
||||
<div className="flex items-center pt-4 space-x-1 rtl:space-x-reverse">
|
||||
{[1, 2, 3, 4, 5].map(x => (
|
||||
<StarSolid key={x} className="inline-block size-4 xl:size-4 fill-gray-200/75" />
|
||||
))}
|
||||
</div>
|
||||
<span className="inline-block w-24 rounded h-6 bg-gray-200/75 mt-6"></span>
|
||||
<span className="inline-block w-24 rounded-sm h-6 bg-gray-200/75 mt-6"></span>
|
||||
</div>
|
||||
|
||||
{/* description */}
|
||||
<div className="bg-gray-50 block w-full px-6 lg:px-4 py-4 mt-6 rounded-lg lg:animate-pulse">
|
||||
<span className="inline-block w-3/5 rounded h-6 bg-gray-200/75 mb-4"></span>
|
||||
<span className="inline-block w-3/5 rounded-sm h-6 bg-gray-200/75 mb-4"></span>
|
||||
{[1, 2, 3, 4, 5, 6].map(x => (
|
||||
<div className="block w-full h-4 relative my-4 p-1 rounded bg-gray-200/75" key={x}></div>
|
||||
<div className="block w-full h-4 relative my-4 p-1 rounded-sm bg-gray-200/75" key={x}></div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* features */}
|
||||
<div className="bg-gray-50 hidden lg:block w-full px-6 lg:px-4 py-4 mt-6 rounded-lg lg:animate-pulse">
|
||||
<span className="inline-block w-2/5 rounded h-6 bg-gray-200/75 mb-4"></span>
|
||||
<span className="inline-block w-2/5 rounded-sm h-6 bg-gray-200/75 mb-4"></span>
|
||||
{[1, 2, 3, 4].map(x => (
|
||||
<div className="block w-3/5 h-4 relative my-4 p-1 rounded bg-gray-200/75" key={x}></div>
|
||||
<div className="block w-3/5 h-4 relative my-4 p-1 rounded-sm bg-gray-200/75" key={x}></div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -65,7 +65,7 @@ const ProductCats: React.FunctionComponent<ProductCatsProps> = ({ cats, title, a
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
title={title}
|
||||
className="flex flex-col bg-white w-[90vw] h-auto max-h-[70vh] lg:w-auto lg:h-auto lg:min-w-[500px] lg:max-w-[90vw] lg:max-h-[90vh] rounded -top-[10%] lg:top-0"
|
||||
className="flex flex-col bg-white w-[90vw] h-auto max-h-[70vh] lg:w-auto lg:h-auto lg:min-w-[500px] lg:max-w-[90vw] lg:max-h-[90vh] rounded-sm top-[-10%] lg:top-0"
|
||||
childrenClass="lg:flierland-scrollbar"
|
||||
titleClass="text-lg select-none"
|
||||
style={{
|
||||
@ -81,7 +81,7 @@ const ProductCats: React.FunctionComponent<ProductCatsProps> = ({ cats, title, a
|
||||
<li key={x.local_id} className="block text-sm/7 mx-6 border-b border-gray-100 last:border-b-0 ">
|
||||
<div className="flex items-center justify-between px-2 lg:cursor-pointer">
|
||||
<span
|
||||
className={`block w-full py-2 lg:py-3 capitalize ${parentCats && getIsCatOpen(x.local_id) ? "text-[var(--brand-color)]" : ""}`}
|
||||
className={`block w-full py-2 lg:py-3 capitalize ${parentCats && getIsCatOpen(x.local_id) ? "text-(--brand-color)" : ""}`}
|
||||
onClick={() => handleCatSelection(x.local_id, -1, true)}
|
||||
>
|
||||
{getLocaleTr(x, locale).name}
|
||||
@ -98,8 +98,8 @@ const ProductCats: React.FunctionComponent<ProductCatsProps> = ({ cats, title, a
|
||||
<li
|
||||
key={z.local_id}
|
||||
className={`py-3 lg:py-3 px-4 lg:px-5 border-t border-gray-100 lg:cursor-pointer
|
||||
${activeCat === z.local_id ? "text-[var(--brand-color)]" : ""}
|
||||
text-xs lg:text-sm capitalize hover:text-[var(--brand-color)]
|
||||
${activeCat === z.local_id ? "text-(--brand-color)" : ""}
|
||||
text-xs lg:text-sm capitalize hover:text-(--brand-color)
|
||||
`}
|
||||
onClick={() => handleCatSelection(z.local_id, x.local_id, false)}
|
||||
>
|
||||
|
||||
@ -9,17 +9,17 @@ const ProductsPlaceHolder: React.FunctionComponent<ProductsPlaceHolderProps> = (
|
||||
<div className={`grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4 w-full py-4`}>
|
||||
{[...Array(8).keys()].map(x => (
|
||||
<div key={x} className="bg-white block w-full p-4 rounded-md lg:animate-pulse">
|
||||
<span className="inline-block w-full aspect-square rounded bg-gray-200/75"></span>
|
||||
<span className="inline-block w-24 rounded h-5 bg-gray-200/75 mt-2"></span>
|
||||
<div className="block w-full rounded h-5 bg-gray-200/75 mb-4"></div>
|
||||
<span className="inline-block w-full aspect-square rounded-sm bg-gray-200/75"></span>
|
||||
<span className="inline-block w-24 rounded-sm h-5 bg-gray-200/75 mt-2"></span>
|
||||
<div className="block w-full rounded-sm h-5 bg-gray-200/75 mb-4"></div>
|
||||
<div className="flex items-center space-x-1 rtl:space-x-reverse">
|
||||
{[...Array(5).keys()].map(y => (
|
||||
<StarSolid key={y} className="inline-block size-4 xl:size-4 fill-gray-200/75" />
|
||||
))}
|
||||
</div>
|
||||
<div className="max-sm:block flex items-center justify-between w-full mt-6">
|
||||
<span className="inline-block w-16 rounded h-5 bg-gray-200/75"></span>
|
||||
<span className="inline-block w-full sm:w-24 rounded h-5 bg-gray-200/75 max-sm:mt-2"></span>
|
||||
<span className="inline-block w-16 rounded-sm h-5 bg-gray-200/75"></span>
|
||||
<span className="inline-block w-full sm:w-24 rounded-sm h-5 bg-gray-200/75 max-sm:mt-2"></span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
@ -490,17 +490,17 @@ const BillboardProducts: React.FunctionComponent<BillboardProductsProps> = ({ bi
|
||||
{/* filters & reset button */}
|
||||
<div className="flex items-center gap-3 absolute rtl:left-4 ltr:right-4 top-4 lg:top-5">
|
||||
<div
|
||||
className={`${areFiltersActive ? "flex" : "hidden"} reactive-button items-center shadow-sm bg-white text-secondary-light py-2 px-2 rounded-full lg:cursor-pointer select-none`}
|
||||
className={`${areFiltersActive ? "flex" : "hidden"} reactive-button items-center shadow-xs bg-white text-secondary-light py-2 px-2 rounded-full lg:cursor-pointer select-none`}
|
||||
onClick={resetFilters}
|
||||
title={translate("reset-filters")}
|
||||
>
|
||||
<ArrowsRotateSolid className="inline-block shrink-0 size-3 lg:size-4 fill-current" />
|
||||
</div>
|
||||
<div
|
||||
className={`flex items-center gap-2 relative shadow-sm bg-white text-secondary-light py-2 px-4 rounded-full lg:cursor-pointer select-none capitalize`}
|
||||
className={`flex items-center gap-2 relative shadow-xs bg-white text-secondary-light py-2 px-4 rounded-full lg:cursor-pointer select-none capitalize`}
|
||||
onClick={() => setFiltersOpen(true)}
|
||||
>
|
||||
{areFiltersActive && <NotificationSign wrapperClass="absolute right-[2px] -top-[2px]" />}
|
||||
{areFiltersActive && <NotificationSign wrapperClass="absolute right-[2px] top-[-2px]" />}
|
||||
<FilterListSolid className="inline-block shrink-0 size-3 lg:size-4 fill-current" />
|
||||
<span className="text-xs sm:text-sm text-current">{translate("products-page-filter-results")}</span>
|
||||
</div>
|
||||
@ -534,7 +534,7 @@ const BillboardProducts: React.FunctionComponent<BillboardProductsProps> = ({ bi
|
||||
placeholder={translate("billboard-products-search-placeholder")}
|
||||
stripeHtml
|
||||
onInput={handleproductSearch}
|
||||
className={`${searchVisible ? "block" : "hidden"} md:block w-full py-2 px-4 text-sm placeholder:text-xs outline-none rounded-lg`}
|
||||
className={`${searchVisible ? "block" : "hidden"} md:block w-full py-2 px-4 text-sm placeholder:text-xs outline-hidden rounded-lg`}
|
||||
wrapperClass="w-full md:w-64"
|
||||
inputDelay={350}
|
||||
/>
|
||||
@ -580,7 +580,7 @@ const BillboardProducts: React.FunctionComponent<BillboardProductsProps> = ({ bi
|
||||
<Button
|
||||
type="button"
|
||||
text={translate("back")}
|
||||
className="block w-32 md:w-36 py-3 px-gi mt-10 rounded-lg text-sm md:text-base font-semibold !bg-gray-100 text-gray-600 capitalize ltr:[direction:ltr]"
|
||||
className="block w-32 md:w-36 py-3 px-gi mt-10 rounded-lg text-sm md:text-base font-semibold bg-gray-100! text-gray-600 capitalize ltr:[direction:ltr]"
|
||||
leftIcon={<ArrowLeftSolid className="inline-block size-4 fill-current me-4" />}
|
||||
onClick={handleGoToProducts}
|
||||
/>
|
||||
|
||||
@ -53,8 +53,8 @@ const SizeSelection: React.FunctionComponent<SizeSelectionProps> = ({ sizes, ava
|
||||
<span
|
||||
key={x}
|
||||
className={`flex items-center justify-center ${x === selectedSize ? `${x}-active-size` : ""} relative w-max px-4 py-2 text-sm font-semibold uppercase rounded-lg lg:cursor-pointer lg:select-none border-2 border-white
|
||||
${selectedSize === x ? "bg-[var(--brand-color)] text-white ring-2 ring-[var(--brand-color)]" : "bg-white ring-1 ring-gray-200"}
|
||||
${availableSizes.some(y => y === x) ? "" : "!bg-gray-100 line-through text-gray-400"}
|
||||
${selectedSize === x ? "bg-(--brand-color) text-white ring-2 ring-(--brand-color)" : "bg-white ring-1 ring-gray-200"}
|
||||
${availableSizes.some(y => y === x) ? "" : "bg-gray-100! line-through text-gray-400"}
|
||||
`}
|
||||
onClick={() => handleSizeSelection(x)}
|
||||
>
|
||||
|
||||
@ -61,7 +61,7 @@ const VariantSelection: React.FunctionComponent<VariantSelectionProps> = ({ prod
|
||||
{variants.sort((a, b) => getVariantId(a.id) - getVariantId(b.id)).map((x, i) => (
|
||||
<span
|
||||
key={x.id}
|
||||
className={`flex items-center justify-center ${x.id === selectedVariant ? `${x.id}-active-variation` : ""} relative hover:bg-[var(--light-brand-color)] hover:border-[var(--light-brand-color)] ltr:mr-4 rtl:ml-4 border shrink-0 border-gray-200 size-20 sm:size-20 lg:size-20 2xl:size-20 p-[2px] 2xl:p-1 text-sm font-semibold uppercase rounded-xl mx-auto lg:cursor-pointer lg:select-none ring-2 ${selectedVariant === x.id ? "ring-[var(--brand-color)]" : "ring-transparent"}`}
|
||||
className={`flex items-center justify-center ${x.id === selectedVariant ? `${x.id}-active-variation` : ""} relative hover:bg-(--light-brand-color) hover:border-(--light-brand-color) ltr:mr-4 rtl:ml-4 border shrink-0 border-gray-200 size-20 sm:size-20 lg:size-20 2xl:size-20 p-[2px] 2xl:p-1 text-sm font-semibold uppercase rounded-xl mx-auto lg:cursor-pointer lg:select-none ring-2 ${selectedVariant === x.id ? "ring-(--brand-color)" : "ring-transparent"}`}
|
||||
onClick={() => handleVariantSelection(x.id)}
|
||||
>
|
||||
{x.gallery ?
|
||||
@ -76,11 +76,11 @@ const VariantSelection: React.FunctionComponent<VariantSelectionProps> = ({ prod
|
||||
priority={true}
|
||||
noPreload={true}
|
||||
fetchPriority="low"
|
||||
className="rounded-lg will-change-transform !object-contain"
|
||||
figureClass="block mx-auto rounded-lg w-full transition-transform duration-200 select-none [&>div]:!bg-transparent lg:cursor-pointer"
|
||||
className="rounded-lg will-change-transform object-contain!"
|
||||
figureClass="block mx-auto rounded-lg w-full transition-transform duration-200 select-none [&>div]:bg-transparent! lg:cursor-pointer"
|
||||
/>
|
||||
:
|
||||
<span className="block w-full aspect-square md:aspect-square rounded-lg lg:rounded">
|
||||
<span className="block w-full aspect-square md:aspect-square rounded-lg lg:rounded-sm">
|
||||
<ImageSolid className="inline-block absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-10 2xl:size-12 fill-gray-200" />
|
||||
</span>
|
||||
}
|
||||
|
||||
@ -33,7 +33,7 @@ const Item: React.FunctionComponent<any> = ({ item }) => {
|
||||
const pic = item.gallery[0]?.directus_files_id;
|
||||
const itemTitle = item.translations.filter((x: any) => x.languages_code.code.slice(0, 2) === locale)[0].title;
|
||||
|
||||
return <Link href={`/billboard/${item.id}/${url(itemTitle)}`} className="flex flex-col items-center w-full bg-white [&>h2]:hover:text-market-title rounded-md shrink-0 justify-center">
|
||||
return <Link href={`/billboard/${item.id}/${url(itemTitle)}`} className="flex flex-col items-center w-full bg-white hover:[&>h2]:text-market-title rounded-md shrink-0 justify-center">
|
||||
<div className="block w-full relative">
|
||||
{pic ?
|
||||
<Image
|
||||
@ -51,12 +51,12 @@ const Item: React.FunctionComponent<any> = ({ item }) => {
|
||||
figureClass="md:cursor-pointer rounded-lg w-full transition-all select-none"
|
||||
/>
|
||||
:
|
||||
<span className="block w-full aspect-3/2 md:aspect-3/2 bg-gray-100 lg:bg-gray-50 rounded-lg lg:rounded">
|
||||
<span className="block w-full aspect-3/2 md:aspect-3/2 bg-gray-100 lg:bg-gray-50 rounded-lg lg:rounded-sm">
|
||||
<ImageSharpSolid className="inline-block absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-16 xl:size-24 fill-gray-200" />
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
<h2 className="text-center text-xs !leading-5 font-semibold h-16 sm:text-sm sm:!leading-6 sm:h-20 px-1 py-1 mt-1 text-secondary-light">{itemTitle}</h2>
|
||||
<h2 className="text-center text-xs leading-5! font-semibold h-16 sm:text-sm sm:leading-6! sm:h-20 px-1 py-1 mt-1 text-secondary-light">{itemTitle}</h2>
|
||||
</Link>
|
||||
}
|
||||
|
||||
@ -111,10 +111,10 @@ const BillboardRelated: React.FunctionComponent<BillboardRelatedProps> = ({ cat,
|
||||
loop={false}
|
||||
autoplay={false}
|
||||
childComponent={(x: any) => <Item key={x.id} item={x} />}
|
||||
sliderClass={`block sm:bg-[#fcfcfd] max-sm:w-[calc(100vw_-_4rem)] w-full [rtl:direction:rtl] mx-auto bg-white`}
|
||||
viewPortClass="!p-0 bg-white"
|
||||
sliderClass={`block sm:bg-[#fcfcfd] max-sm:w-[calc(100vw-4rem)] w-full [rtl:direction:rtl] mx-auto bg-white`}
|
||||
viewPortClass="p-0! bg-white"
|
||||
containerClass=""
|
||||
controlsContainerClass="!mt-0"
|
||||
controlsContainerClass="mt-0!"
|
||||
/>
|
||||
:
|
||||
<span className="flex items-center capitalize w-full text-sm px-2">{translate("market-ads-page-no-similar-ads")}</span>
|
||||
|
||||
@ -168,11 +168,11 @@ const ReviewItem: React.FunctionComponent<ReviewItemProps> = ({ brandColor, revi
|
||||
</div>
|
||||
{/* rating */}
|
||||
<div className="flex items-center justify-between w-full mt-4 sm:mt-3 lg:mt-4">
|
||||
<StarRating rating={review.service_quality} className="text-[var(--brand-color)]" starClass="size-4 shrink-0" />
|
||||
<StarRating rating={review.service_quality} className="text-(--brand-color)" starClass="size-4 shrink-0" />
|
||||
</div>
|
||||
{/* recommend */}
|
||||
<div className="flex items-center justify-between w-full mt-4 sm:mt-3 lg:mt-4">
|
||||
{review.recommend !== "neutral" && <div className={`flex items-center justify-between w-max space-x-2 rtl:space-x-reverse rtl:mr-1 ltr:ml-1 rounded-md py-[1px] px-2 ${review.recommend === "recommend" ? "bg-success-bg text-success-text" : "bg-error-bg text-error-text"}`}>
|
||||
{review.recommend !== "neutral" && <div className={`flex items-center justify-between w-max space-x-2 rtl:space-x-reverse rtl:mr-1 ltr:ml-1 rounded-md py-px px-2 ${review.recommend === "recommend" ? "bg-success-bg text-success-text" : "bg-error-bg text-error-text"}`}>
|
||||
{review.recommend === "recommend" ? <ThumbsUpSolid className="inline-block size-5 xl:size-6 fill-current" /> : <ThumbsDownSolid className="inline-block size-5 xl:size-6 fill-current" />}
|
||||
<span className="block w-full text-xs/6 text-current capitalize">{translate(review.recommend)}</span>
|
||||
</div>}
|
||||
@ -185,7 +185,7 @@ const ReviewItem: React.FunctionComponent<ReviewItemProps> = ({ brandColor, revi
|
||||
{/* {review.date_updated && <span className="flex items-center capitalize select-none text-[0.625rem]/5 lg:text-xs/6 w-max text-text-gray font-semibold bg-gray-100 rounded-lg py-[2px] px-3 mb-3">
|
||||
{`${translate("edited-on")} ${review.date_updated.slice(0, 10).split("-").reverse().join("-")}`}
|
||||
</span>} */}
|
||||
<Parser limit limitLength={300} text={getLocaleTr(review, locale).review} className="[&_*]:!text-xs/6 lg:[&_*]:!text-sm/7 !min-h-0" showMoreClass="!bg-[#fdfdfd] !from-[#fdfdfd] !via-neutral-50/0 !h-14 sm:!h-16 !text-[var(--brand-color)]" />
|
||||
<Parser limit limitLength={300} text={getLocaleTr(review, locale).review} className="**:text-xs/6! lg:**:text-sm/7! min-h-0!" showMoreClass="bg-[#fdfdfd]! from-[#fdfdfd]! via-neutral-50/0! h-14! sm:h-16! text-(--brand-color)!" />
|
||||
<div className="grid grid-cols-4 md:grid-cols-8 lg:grid-cols-8 gap-2 lg:gap-3 mt-4 lg:mt-6 mb-4">
|
||||
{review.pics.map((x, i) => (
|
||||
<div key={x.directus_files_id.id} className={`reactive-button block relative size-full rounded-lg mx-auto shrink-0 overflow-hidden`}>
|
||||
@ -206,7 +206,7 @@ const ReviewItem: React.FunctionComponent<ReviewItemProps> = ({ brandColor, revi
|
||||
onClick={() => openGallery(i)}
|
||||
/>
|
||||
:
|
||||
<span className="block size-full aspect-1/1 md:aspect-1/1 bg-gray-100 lg:bg-gray-50 rounded-lg lg:rounded-lg">
|
||||
<span className="block size-full aspect-square md:aspect-square bg-gray-100 lg:bg-gray-50 rounded-lg lg:rounded-lg">
|
||||
<ImageSharpSolid className="inline-block absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-16 xl:size-24 fill-gray-200" />
|
||||
</span>
|
||||
}
|
||||
@ -215,7 +215,7 @@ const ReviewItem: React.FunctionComponent<ReviewItemProps> = ({ brandColor, revi
|
||||
</div>
|
||||
{answer &&
|
||||
<>
|
||||
<span className="reactive-button flex items-center capitalize select-none text-xs/6 w-max text-[var(--brand-color)] font-semibold bg-[var(--light-brand-color)] lg:hover:bg-[var(--brand-color)] lg:hover:text-white rounded-xl py-1 px-4" onClick={() => setShowAnswer(!showAnswer)}>
|
||||
<span className="reactive-button flex items-center capitalize select-none text-xs/6 w-max text-(--brand-color) font-semibold bg-(--light-brand-color) lg:hover:bg-(--brand-color) lg:hover:text-white rounded-xl py-1 px-4" onClick={() => setShowAnswer(!showAnswer)}>
|
||||
{showAnswer ? <EyeSlashSolid className="inline-block size-4 fill-current rtl:ml-2 ltr:mr-2" /> : <EyeSolid className="inline-block size-4 fill-current rtl:ml-2 ltr:mr-2" />}
|
||||
{`${translate("view")} ${locale === "fa" ? translate("reply") : translate("business")} ${locale === "fa" ? translate("business") : translate("reply")}`}
|
||||
</span>
|
||||
@ -223,7 +223,7 @@ const ReviewItem: React.FunctionComponent<ReviewItemProps> = ({ brandColor, revi
|
||||
{/* {answer.date_updated && <span className="flex items-center capitalize select-none text-[0.625rem]/5 lg:text-xs/6 w-max text-text-gray font-semibold bg-gray-100 rounded-lg py-[2px] px-3 mb-3">
|
||||
{`${translate("edited-on")} ${answer.date_updated.slice(0, 10).split("-").reverse().join("-")}`}
|
||||
</span>} */}
|
||||
<Parser text={getLocaleTr(answer, locale).answer} className="[&_*]:!text-xs/6 lg:[&_*]:!text-sm/7 min-h-max px-1" showMoreClass="!bg-[#fdfdfd] !from-[#fdfdfd] !via-neutral-50/0 !h-14 sm:!h-16 !text-[var(--brand-color)]" />
|
||||
<Parser text={getLocaleTr(answer, locale).answer} className="**:text-xs/6! lg:**:text-sm/7! min-h-max px-1" showMoreClass="bg-[#fdfdfd]! from-[#fdfdfd]! via-neutral-50/0! h-14! sm:h-16! text-(--brand-color)!" />
|
||||
</div>}
|
||||
</>
|
||||
}
|
||||
@ -233,24 +233,24 @@ const ReviewItem: React.FunctionComponent<ReviewItemProps> = ({ brandColor, revi
|
||||
<div className="flex items-center space-x-2 rtl:space-x-reverse relative select-none">
|
||||
<LoginNeeded wrapperClass="reviews" handleClass="reviews" isVisible={showLoginNeeded} onClose={() => setShowLoginNeeded(false)} />
|
||||
<div
|
||||
className={`login-needed-handle-reviews reactive-button flex items-center ${useFull.includes(currentUserId) ? "bg-[var(--light-brand-color)] text-[var(--brand-color)] ring-[var(--brand-color)]" : "bg-slate-50 text-secondary-light ring-slate-100 hover:ring-[var(--light-brand-color)]"} rounded-lg py-[6px] px-3 ring-1 hover:bg-[var(--light-brand-color)]`}
|
||||
className={`login-needed-handle-reviews reactive-button flex items-center ${useFull.includes(currentUserId) ? "bg-(--light-brand-color) text-(--brand-color) ring-(--brand-color)" : "bg-slate-50 text-secondary-light ring-slate-100 hover:ring-(--light-brand-color)"} rounded-lg py-[6px] px-3 ring-1 hover:bg-(--light-brand-color)`}
|
||||
onClick={handleUpVote}
|
||||
>
|
||||
<span className={`inline-block text-sm lg:text-base font-extrabold text-[var(--brand-color)] rtl:pl-2 ltr:pr-2`}>{useFull.length}</span>
|
||||
<span className={`inline-block text-xs/6 text-current rtl:border-r-2 ltr:border-l-2 ${useFull.includes(currentUserId) ? "border-[var(--brand-color)]" : "border-white"} px-2`}>{translate("billboard-useful")}</span>
|
||||
<span className={`inline-block text-sm lg:text-base font-extrabold text-(--brand-color) rtl:pl-2 ltr:pr-2`}>{useFull.length}</span>
|
||||
<span className={`inline-block text-xs/6 text-current rtl:border-r-2 ltr:border-l-2 ${useFull.includes(currentUserId) ? "border-(--brand-color)" : "border-white"} px-2`}>{translate("billboard-useful")}</span>
|
||||
<ArrowUpSolid className="inline-block size-3 lg:size-4 fill-current" />
|
||||
</div>
|
||||
<div
|
||||
className={`login-needed-handle-reviews reactive-button flex items-center ${notUseFull.includes(currentUserId) ? "bg-[var(--light-brand-color)] text-[var(--brand-color)] ring-[var(--brand-color)]" : "bg-slate-50 text-secondary-light ring-slate-100 hover:ring-[var(--light-brand-color)]"} rounded-lg py-[6px] px-3 ring-1 hover:bg-[var(--light-brand-color)]`}
|
||||
className={`login-needed-handle-reviews reactive-button flex items-center ${notUseFull.includes(currentUserId) ? "bg-(--light-brand-color) text-(--brand-color) ring-(--brand-color)" : "bg-slate-50 text-secondary-light ring-slate-100 hover:ring-(--light-brand-color)"} rounded-lg py-[6px] px-3 ring-1 hover:bg-(--light-brand-color)`}
|
||||
onClick={handleDownVote}
|
||||
>
|
||||
<span className="inline-block text-sm lg:text-base font-extrabold text-[var(--brand-color)] rtl:pl-2 ltr:pr-2">{notUseFull.length}</span>
|
||||
<span className={`inline-block text-xs/6 text-current rtl:border-r-2 ltr:border-l-2 ${notUseFull.includes(currentUserId) ? "border-[var(--brand-color)]" : "border-white"} px-2`}>{translate("billboard-not-useful")}</span>
|
||||
<span className="inline-block text-sm lg:text-base font-extrabold text-(--brand-color) rtl:pl-2 ltr:pr-2">{notUseFull.length}</span>
|
||||
<span className={`inline-block text-xs/6 text-current rtl:border-r-2 ltr:border-l-2 ${notUseFull.includes(currentUserId) ? "border-(--brand-color)" : "border-white"} px-2`}>{translate("billboard-not-useful")}</span>
|
||||
<ArrowDownSolid className="inline-block size-3 lg:size-4 fill-current" />
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
{isOwner && !answer ? <Link href={`/dashboard/billboards/${query.id}/reviews`} className="reactive-button flex items-center capitalize text-xs/6 w-max text-[var(--brand-color)] font-semibold bg-[var(--light-brand-color)] hover:bg-[var(--brand-color)] hover:text-white rounded-xl py-1 px-4 mt-4 lg:cursor-pointer">
|
||||
{isOwner && !answer ? <Link href={`/dashboard/billboards/${query.id}/reviews`} className="reactive-button flex items-center capitalize text-xs/6 w-max text-(--brand-color) font-semibold bg-(--light-brand-color) hover:bg-(--brand-color) hover:text-white rounded-xl py-1 px-4 mt-4 lg:cursor-pointer">
|
||||
<ReplySolid className="inline-block size-4 fill-current rtl:ml-2 ltr:mr-2" />
|
||||
{translate("billboard-page-reviews-owner-reply-to-review")}
|
||||
</Link> : ""}
|
||||
@ -415,7 +415,7 @@ const BillboardReviews: React.FunctionComponent<BillboardReviewsProps> = ({ bran
|
||||
<Button
|
||||
type="button"
|
||||
text={translate("billboard-page-reviews-share-your-review")}
|
||||
className="bg-market-input text-secondary-light hover:bg-[var(--light-brand-color)] hover:text-[var(--brand-color)] text-xs/6 md:text-sm/7 capitalize shadow-none w-max py-2 px-4 inline-flex justify-center items-center rounded-xl"
|
||||
className="bg-market-input text-secondary-light hover:bg-(--light-brand-color) hover:text-(--brand-color) text-xs/6 md:text-sm/7 capitalize shadow-none w-max py-2 px-4 inline-flex justify-center items-center rounded-xl"
|
||||
onClick={() => setReviewOpen(!reviewOpen)}
|
||||
leftIcon={<StarSolid className="inline-block size-3 lg:size-4 fill-current rtl:ml-3 ltr:mr-3" />}
|
||||
/>
|
||||
@ -436,7 +436,7 @@ const BillboardReviews: React.FunctionComponent<BillboardReviewsProps> = ({ bran
|
||||
<Link
|
||||
href={(locale === "en" ? "/en/dashboard/user-reviews" : "/dashboard/user-reviews")}
|
||||
target="_blank"
|
||||
className="reactive-button bg-[var(--brand-color)] inline-flex items-center justify-center text-white text-xs/6 md:text-xs/6 capitalize shadow-none rounded-lg py-2 px-4 mt-6"
|
||||
className="reactive-button bg-(--brand-color) inline-flex items-center justify-center text-white text-xs/6 md:text-xs/6 capitalize shadow-none rounded-lg py-2 px-4 mt-6"
|
||||
>
|
||||
<StarSolid className={`shopping-cart-icon reactive-button inline-block size-4 fill-current shrink-0 rtl:ml-2 ltr:mr-2`} />
|
||||
{translate("billboard-page-reviews-already-rated-button")}
|
||||
@ -451,7 +451,7 @@ const BillboardReviews: React.FunctionComponent<BillboardReviewsProps> = ({ bran
|
||||
overallRating={0}
|
||||
className="text-cool-gray"
|
||||
starClass="size-5 lg:size-6 shrink-0"
|
||||
fullColor="text-[var(--brand-color)]"
|
||||
fullColor="text-(--brand-color)"
|
||||
onRate={handleRating}
|
||||
/>
|
||||
<span className="block text-xs/6 lg:text-sm/7 text-text-gray pt-2 pb-2">{translate("billboard-page-reviews-recommendation-text")}</span>
|
||||
@ -483,7 +483,7 @@ const BillboardReviews: React.FunctionComponent<BillboardReviewsProps> = ({ bran
|
||||
value={locale === "fa" ? userReview.current.fa.title : userReview.current.en.title}
|
||||
maxChar={100}
|
||||
maxLength={100}
|
||||
className={`block w-full py-3 px-4 rounded-xl bg-white text-xs/5 text-secondary-light outline-none ring-1 ring-neutral-200 focus:ring-2 focus:ring-[var(--brand-color)]`}
|
||||
className={`block w-full py-3 px-4 rounded-xl bg-white text-xs/5 text-secondary-light outline-hidden ring-1 ring-neutral-200 focus:ring-2 focus:ring-(--brand-color)`}
|
||||
wrapperClass="mb-3 lg:mb-4"
|
||||
onInput={(data) => handleFormUpdate("title", data)}
|
||||
/>
|
||||
@ -540,8 +540,8 @@ const BillboardReviews: React.FunctionComponent<BillboardReviewsProps> = ({ bran
|
||||
<Button
|
||||
type="button"
|
||||
text={translate("billboard-page-reviews-submit-review")}
|
||||
className="bg-[var(--light-brand-color)] text-[var(--brand-color)] hover:bg-[var(--brand-color)] hover:text-white text-xs/6 md:text-sm/7 capitalize shadow-none w-full md:w-80 mx-auto mt-6 py-2 px-4 flex justify-center items-center rounded-xl"
|
||||
disabledClass="!bg-neutral-100 text-text-gray"
|
||||
className="bg-(--light-brand-color) text-(--brand-color) hover:bg-(--brand-color) hover:text-white text-xs/6 md:text-sm/7 capitalize shadow-none w-full md:w-80 mx-auto mt-6 py-2 px-4 flex justify-center items-center rounded-xl"
|
||||
disabledClass="bg-neutral-100! text-text-gray"
|
||||
onClick={submitReview}
|
||||
leftIcon={<CircleCheckSolid className="inline-block size-3 lg:size-4 fill-current rtl:ml-3 ltr:mr-3" />}
|
||||
loading={updating}
|
||||
@ -553,7 +553,7 @@ const BillboardReviews: React.FunctionComponent<BillboardReviewsProps> = ({ bran
|
||||
:
|
||||
<Link
|
||||
href={(locale === "en" ? "/en/sign-in" : "/sign-in")}
|
||||
className="reactive-button bg-[var(--brand-color)] inline-flex items-center justify-center text-white text-xs/6 md:text-xs/6 capitalize shadow-none rounded-lg py-2 px-4 mt-6"
|
||||
className="reactive-button bg-(--brand-color) inline-flex items-center justify-center text-white text-xs/6 md:text-xs/6 capitalize shadow-none rounded-lg py-2 px-4 mt-6"
|
||||
>
|
||||
<ArrowLeftSolid className={`shopping-cart-icon reactive-button inline-block size-4 fill-current rounded-full shrink-0 rtl:ml-2 ltr:mr-2`} />
|
||||
{translate("billboard-page-reviews-login-text")}
|
||||
|
||||
@ -33,7 +33,7 @@ const BillboardSection: React.FunctionComponent<BillboardSectionProps> = ({ id,
|
||||
<span id={id} className="absolute -top-20"></span>
|
||||
{!noTitle &&
|
||||
<span className="flex items-center text-sm sm:text-base capitalize text-current font-extrabold mb-4 border-b border-dashed pb-4 border-gray-100">
|
||||
{icon ? icon : <CaretLeftSolid className="inline-block size-4 fill-current text-[var(--brand-color)] ltr:rotate-180 rtl:ml-1 ltr:mr-1" />}
|
||||
{icon ? icon : <CaretLeftSolid className="inline-block size-4 fill-current text-(--brand-color) ltr:rotate-180 rtl:ml-1 ltr:mr-1" />}
|
||||
{title}
|
||||
</span>
|
||||
}
|
||||
|
||||
@ -132,7 +132,7 @@ const BillboardSubscription: React.FunctionComponent<BillboardSubscriptionProps>
|
||||
<Button
|
||||
type="button"
|
||||
text={subscribedAt ? translate("billboard-unsusbscribe-from-busniess") : translate("billboard-susbscribe-to-busniess")}
|
||||
className={`login-needed-handle-subscription bg-[var(--light-brand-color)] text-[var(--brand-color)] hover:bg-[var(--brand-color)] hover:text-white text-sm md:text-base capitalize shadow-none w-full py-3 px-4 inline-flex justify-center items-center rounded-lg rtl:ml-2 ltr:mr-2 rtl:lg:ml-3 ltr:lg:mr-3`}
|
||||
className={`login-needed-handle-subscription bg-(--light-brand-color) text-(--brand-color) hover:bg-(--brand-color) hover:text-white text-sm md:text-base capitalize shadow-none w-full py-3 px-4 inline-flex justify-center items-center rounded-lg rtl:ml-2 ltr:mr-2 lg:rtl:ml-3 lg:ltr:mr-3`}
|
||||
onClick={handleSubscription}
|
||||
loading={updating}
|
||||
leftIcon={subscribedAt ?
|
||||
|
||||
@ -43,9 +43,9 @@ const TopNav: React.FunctionComponent<TopNavProps> = ({ title, logo, totalRating
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`flex lg:hidden items-center w-full fixed top-0 h-[var(--menu-height)] bg-white py-4 px-4 z-50 ${className}`}>
|
||||
<div className={`flex lg:hidden items-center w-full fixed top-0 h-(--menu-height) bg-white py-4 px-4 z-50 ${className}`}>
|
||||
{/* <ArrowLeftSolid className="inline-block fill-secondary-light size-6 absolute left-3" /> */}
|
||||
<ShoppingCart isOpen={cartOpen} onClose={handleCartClose} handleClass="shopping-cart-icon" className="left-0 !right-auto" cartClass="right-0" />
|
||||
<ShoppingCart isOpen={cartOpen} onClose={handleCartClose} handleClass="shopping-cart-icon" className="left-0 right-auto!" cartClass="right-0" />
|
||||
<BasketShoppingSolid className={`shopping-cart-icon reactive-button absolute bottom-3 inline-block size-11 rtl:left-3 ltr:right-3 lg:bottom-0 rounded-full fill-secondary-light shrink-0 p-2`} onClick={toggleShoppingCart} />
|
||||
{shoppingCart.length > 0 && <span className={`inline-block size-5 text-center select-none bg-primary rounded-full p-1 absolute rtl:left-9 ltr:right-8 rtl:bottom-3 ltr:bottom-3 z-10 text-white text-xs font-extrabold pointer-events-none`}>{shoppingCart.length}</span>}
|
||||
{hasValue(logo) ?
|
||||
@ -56,8 +56,8 @@ const TopNav: React.FunctionComponent<TopNavProps> = ({ title, logo, totalRating
|
||||
height={logo.height}
|
||||
ar={[1 / 1, 1 / 1, 1 / 1, 1 / 1]}
|
||||
imageSizes={[50, 50, 50, 50]}
|
||||
className="inline-block !size-11 rounded-full !object-conver"
|
||||
figureClass={`inline-block !size-11 bg-gray-300 border-2 border-white ring-1 ring-gray-100 rounded-full bg-gray-100 shrink-0 me-3`}
|
||||
className="inline-block size-11! rounded-full !object-conver"
|
||||
figureClass={`inline-block size-11! bg-gray-300 border-2 border-white ring-1 ring-gray-100 rounded-full bg-gray-100 shrink-0 me-3`}
|
||||
/>
|
||||
:
|
||||
<StoreSolid className="inline-block bg-gray-100 fill-secondary-light size-11 me-3 p-[6px] rounded-full" />
|
||||
@ -65,10 +65,10 @@ const TopNav: React.FunctionComponent<TopNavProps> = ({ title, logo, totalRating
|
||||
<div className="flex flex-col items-start gap-[10px]">
|
||||
<span className="inline-block text-sm font-extrabold text-secondary-light capitalize">{`${title.slice(0, 30)}${title.length > 30 ? "..." : ""}`}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<StarRating rating={totalRating} className="text-logo-orange -mt-[2px] gap-[2px]" starClass="size-3 shrink-0" />
|
||||
<StarRating rating={totalRating} className="text-logo-orange mt-[-2px] gap-[2px]" starClass="size-3 shrink-0" />
|
||||
<span className="text-xs font-semibold text-text-gray">{`(${ratingVotesCount} ${translate("vote")})`}</span>
|
||||
</div>
|
||||
{/* <StarRating rating={rating} className="text-amber-500 !gap-[2px]" starClass="size-3 shrink-0" /> */}
|
||||
{/* <StarRating rating={rating} className="text-amber-500 gap-[2px]!" starClass="size-3 shrink-0" /> */}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -34,9 +34,9 @@ const CategoryVOne: React.FunctionComponent<CategoryVOneProps> = ({ cardWidth, d
|
||||
className={`flex flex-col bg-white w-[90px] sm:w-full rounded-lg overflow-hidden relative select-none shrink-0 mx-auto`}
|
||||
>
|
||||
<div
|
||||
className={`flex flex-col items-center justify-center gap-2 sm:gap-3 w-full shrink-0 lg:cursor-pointer [&>span]:hover:lg:bg-white [&>span]:hover:lg:text-[var(--brand-color)] [&>span]:hover:lg:!bg-[var(--light-brand-color)]`}
|
||||
className={`flex flex-col items-center justify-center gap-2 sm:gap-3 w-full shrink-0 lg:cursor-pointer lg:hover:[&>span]:bg-white lg:hover:[&>span]:text-(--brand-color) lg:hover:[&>span]:bg-(--light-brand-color)!`}
|
||||
>
|
||||
<div className={`reactive-button block size-full relative rounded-full shadow-bot border-[4px] border-white`}>
|
||||
<div className={`reactive-button block size-full relative rounded-full shadow-bot border-4 border-white`}>
|
||||
{pic ?
|
||||
<Image
|
||||
src={`${pic.id}/${pic.filename_download}`}
|
||||
@ -49,11 +49,11 @@ const CategoryVOne: React.FunctionComponent<CategoryVOneProps> = ({ cardWidth, d
|
||||
priority={true}
|
||||
noPreload={true}
|
||||
fetchPriority="low"
|
||||
className={`rounded-full will-change-transform !object-cover`}
|
||||
figureClass="rounded-full w-full transition-transform duration-200 select-none [&>div]:!bg-transparent"
|
||||
className={`rounded-full will-change-transform object-cover!`}
|
||||
figureClass="rounded-full w-full transition-transform duration-200 select-none [&>div]:bg-transparent!"
|
||||
/>
|
||||
:
|
||||
<span className="block w-full rounded-lg lg:rounded">
|
||||
<span className="block w-full rounded-lg lg:rounded-sm">
|
||||
<ImageSharpSolid className="inline-block absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-10 xl:size-10 fill-gray-200" />
|
||||
</span>
|
||||
}
|
||||
@ -76,7 +76,7 @@ export const CategoryVOnePlaceHolder = ({ width }: { width: string; }) => {
|
||||
return (
|
||||
<div style={{ "width": width } as React.CSSProperties} className={`flex flex-col w-[90px] sm:w-full rounded-lg overflow-hidden relative select-none shrink-0 mx-auto`}>
|
||||
<div className="flex flex-col items-center justify-center gap-2 sm:gap-3 w-full shrink-0">
|
||||
<div className={`block size-full aspect-square relative rounded-full shadow-bot border-[4px] bg-gray-200/75 border-white`}></div>
|
||||
<div className={`block size-full aspect-square relative rounded-full shadow-bot border-4 bg-gray-200/75 border-white`}></div>
|
||||
<span className={`bg-gray-200/75 h-6 w-24 rounded-lg text-center`}></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -40,7 +40,7 @@ const ProductVOne: React.FunctionComponent<ProductVOneProps> = ({ cardWidth, dat
|
||||
style={{ "width": cardWidth } as React.CSSProperties}
|
||||
className={`flex flex-col bg-white rounded-lg p-3 overflow-hidden relative select-none`}
|
||||
>
|
||||
{discountPrice && <div className="flex items-center w-max absolute capitalize top-0 rtl:right-0 ltr:left-0 z-10 text-white bg-[var(--brand-color)] rtl:rounded-bl-lg rtl:rounded-tr-lg ltr:rounded-br-lg ltr:rounded-tl-lg py-1 px-2">
|
||||
{discountPrice && <div className="flex items-center w-max absolute capitalize top-0 rtl:right-0 ltr:left-0 z-10 text-white bg-(--brand-color) rtl:rounded-bl-lg rtl:rounded-tr-lg ltr:rounded-br-lg ltr:rounded-tl-lg py-1 px-2">
|
||||
<PercentageSolid className="inline-block size-3 sm:size-3 fill-current rtl:ml-[2px] ltr:mr-[2px]" />
|
||||
<span className="inline-block text-[0.625rem]/4 sm:text-xs text-current font-semibold shrink-0">{`${Math.ceil(((price - discountPrice) / price) * 100)} ${translate("discount")}`}</span>
|
||||
</div>}
|
||||
@ -57,11 +57,11 @@ const ProductVOne: React.FunctionComponent<ProductVOneProps> = ({ cardWidth, dat
|
||||
priority={true}
|
||||
noPreload={true}
|
||||
fetchPriority="auto"
|
||||
className="rounded-lg !object-contain"
|
||||
figureClass="block mx-auto rounded-lg w-full select-none [&>div]:!bg-transparent shrink-0"
|
||||
className="rounded-lg object-contain!"
|
||||
figureClass="block mx-auto rounded-lg w-full select-none [&>div]:bg-transparent! shrink-0"
|
||||
/>
|
||||
:
|
||||
<span className="block w-full aspect-square md:aspect-square rounded-lg lg:rounded">
|
||||
<span className="block w-full aspect-square md:aspect-square rounded-lg lg:rounded-sm">
|
||||
<ImageSharpSolid className="inline-block absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-16 xl:size-24 fill-gray-200" />
|
||||
</span>
|
||||
}
|
||||
@ -74,7 +74,7 @@ const ProductVOne: React.FunctionComponent<ProductVOneProps> = ({ cardWidth, dat
|
||||
mode="single"
|
||||
rating={Number(rating.toFixed(2))}
|
||||
className="text-amber-500 -mr-1 w-max gap-[2px]"
|
||||
starClass="size-[0.775rem] sm:size-[0.875rem] shrink-0"
|
||||
starClass="size-[0.775rem] sm:size-3.5 shrink-0"
|
||||
singleRateClass="font-semibold text-secondary-light text-sm"
|
||||
singleWrapperClass="gap-[6px]"
|
||||
/>
|
||||
@ -96,14 +96,14 @@ export default ProductVOne
|
||||
export const ProductVOnePlaceHolder = ({ width }: { width: string; }) => {
|
||||
return (
|
||||
<div style={{ "width": width } as React.CSSProperties} className={`flex flex-col bg-white p-3 rounded-lg shrink-0`}>
|
||||
<span className={`inline-block bg-gray-200/75 w-full aspect-3/2 rounded mb-5`}></span>
|
||||
<span className={`inline-block bg-gray-200/75 w-full h-4 rounded mb-2`}></span>
|
||||
<span className={`inline-block bg-gray-200/75 w-full h-4 rounded mb-4`}></span>
|
||||
<span className={`inline-block bg-gray-200/75 w-full aspect-3/2 rounded-sm mb-5`}></span>
|
||||
<span className={`inline-block bg-gray-200/75 w-full h-4 rounded-sm mb-2`}></span>
|
||||
<span className={`inline-block bg-gray-200/75 w-full h-4 rounded-sm mb-4`}></span>
|
||||
<div className="flex items-center justify-between w-full mb-4">
|
||||
<span className={`inline-block bg-gray-200/75 w-12 h-4 rounded`}></span>
|
||||
<span className={`inline-block bg-gray-200/75 w-6 h-4 rounded`}></span>
|
||||
<span className={`inline-block bg-gray-200/75 w-12 h-4 rounded-sm`}></span>
|
||||
<span className={`inline-block bg-gray-200/75 w-6 h-4 rounded-sm`}></span>
|
||||
</div>
|
||||
<span className={`inline-block bg-gray-200/75 w-16 h-6 rounded`}></span>
|
||||
<span className={`inline-block bg-gray-200/75 w-16 h-6 rounded-sm`}></span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user