fascano/web-menu-react-version-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

menu: add open button with its bottom sheet

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-12-11 00:07:43 +03:00
parent d56281b91d
commit e7ea8443fd
6 changed files with 285 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
src/components/CustomBottomSheet/OpeningTimesBottomSheet.tsx Normal file
View File

@@ -0,0 +1,214 @@
import { Button } from "antd";
import { useTranslation } from "react-i18next";
import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
import ProText from "components/ProText";
import ProTitle from "components/ProTitle";
import { useAppSelector } from "redux/hooks";
interface OpeningTimesBottomSheetProps {
isOpen: boolean;
onClose: () => void;
}
const textStyle: React.CSSProperties = {
fontWeight: 400,
fontStyle: "Regular",
fontSize: 14,
lineHeight: "140%",
letterSpacing: "0%",
};
export function OpeningTimesBottomSheet({
isOpen,
onClose,
}: OpeningTimesBottomSheetProps) {
const { t } = useTranslation();
const { isRTL } = useAppSelector((state) => state.locale);
const { restaurant } = useAppSelector((state) => state.order);
const days = [
"sunday",
"monday",
"tuesday",
"wednesday",
"thursday",
"friday",
"saturday",
];
const todayIndex = new Date().getDay();
const todayDay = days[todayIndex];
return (
<ProBottomSheet
isOpen={isOpen}
onClose={onClose}
title={t("menu.openingTimes")}
showCloseButton={false}
initialSnap={1}
height={445}
snapPoints={[445]}
>
<div
style={{
display: "flex",
flexDirection: "column",
padding: 20,
}}
>
<ProTitle level={5}>{t("menu.address")}</ProTitle>
<ProText type="secondary">
{isRTL ? restaurant?.addressAR : restaurant?.address}
</ProText>
<ProTitle level={5}>{t("menu.openingTimes")}</ProTitle>
<div style={{ display: "flex", justifyContent: "space-between" }}>
<ProText
type="secondary"
style={{
...textStyle,
fontWeight: todayDay === "sunday" ? 700 : 400,
}}
>
sunday
</ProText>
<ProText
type="secondary"
style={{
...textStyle,
fontWeight: todayDay === "sunday" ? 700 : 400,
}}
>
10:00 AM to 10:00 PM
</ProText>
</div>
<div style={{ display: "flex", justifyContent: "space-between" }}>
<ProText
type="secondary"
style={{
...textStyle,
fontWeight: todayDay === "monday" ? 700 : 400,
}}
>
monday
</ProText>
<ProText
type="secondary"
style={{
...textStyle,
fontWeight: todayDay === "monday" ? 700 : 400,
}}
>
10:00 AM to 10:00 PM
</ProText>
</div>
<div style={{ display: "flex", justifyContent: "space-between" }}>
<ProText
type="secondary"
style={{
...textStyle,
fontWeight: todayDay === "tuesday" ? 700 : 400,
}}
>
tuesday
</ProText>
<ProText
type="secondary"
style={{
...textStyle,
fontWeight: todayDay === "tuesday" ? 700 : 400,
}}
>
10:00 AM to 10:00 PM
</ProText>
</div>
<div style={{ display: "flex", justifyContent: "space-between" }}>
<ProText
type="secondary"
style={{
...textStyle,
fontWeight: todayDay === "wednesday" ? 700 : 400,
}}
>
wednesday
</ProText>
<ProText
type="secondary"
style={{
...textStyle,
fontWeight: todayDay === "wednesday" ? 700 : 400,
}}
>
10:00 AM to 10:00 PM
</ProText>
</div>
<div style={{ display: "flex", justifyContent: "space-between" }}>
<ProText
type="secondary"
style={{
...textStyle,
fontWeight: todayDay === "thursday" ? 700 : 400,
}}
>
thursday
</ProText>
<ProText
type="secondary"
style={{
...textStyle,
fontWeight: todayDay === "thursday" ? 700 : 400,
}}
>
10:00 AM to 10:00 PM
</ProText>
</div>
<div style={{ display: "flex", justifyContent: "space-between" }}>
<ProText
type="secondary"
style={{
...textStyle,
fontWeight: todayDay === "friday" ? 700 : 400,
}}
>
friday
</ProText>
<ProText
type="secondary"
style={{
...textStyle,
fontWeight: todayDay === "friday" ? 700 : 400,
}}
>
10:00 AM to 10:00 PM
</ProText>
</div>
<div style={{ display: "flex", justifyContent: "space-between" }}>
<ProText
type="secondary"
style={{
...textStyle,
fontWeight: todayDay === "saturday" ? 700 : 400,
}}
>
saturday
</ProText>
<ProText
type="secondary"
style={{
...textStyle,
fontWeight: todayDay === "saturday" ? 700 : 400,
}}
>
10:00 AM to 10:00 PM
</ProText>
</div>
</div>
<Button
type="primary"
style={{ width: "100%", height: 50 }}
onClick={onClose}
>
{t("menu.close")}
</Button>
</ProBottomSheet>
);
}

10
src/components/Icons/NextIcon.tsx
View File

@@ -4,15 +4,17 @@ import { ProGray1 } from "ThemeConstants";
interface NextIconType {
className?: string;
onClick?: () => void;
iconColor?: string;
iconSize?: number;
}
const NextIcon = ({ className, onClick }: NextIconType) => {
const NextIcon = ({ className, onClick, iconColor, iconSize }: NextIconType) => {
const { themeName } = useAppSelector((state) => state.theme);
const color = themeName === "dark" ? "white" : ProGray1;
const color = iconColor || (themeName === "dark" ? "white" : ProGray1);
return (
<svg
width="16"
height="16"
width={iconSize || 16}
height={iconSize || 16}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"