69 lines
1.8 KiB
TypeScript
69 lines
1.8 KiB
TypeScript
import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
|
|
import ProductDetailPage from "../page";
|
|
import { Button } from "antd";
|
|
import { UploadOutlined } from "@ant-design/icons";
|
|
import { useAppSelector } from "redux/hooks";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
|
|
interface ProductBottomSheetProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function ProductBottomSheet({
|
|
isOpen,
|
|
onClose,
|
|
}: ProductBottomSheetProps) {
|
|
const { themeName } = useAppSelector((state) => state.theme);
|
|
const { isRTL } = useAppSelector((state) => state.locale);
|
|
const { subdomain } = useParams();
|
|
const closeButtonStyle: React.CSSProperties = {
|
|
color: themeName === "dark" ? "#ffffff" : "#4D5154",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
padding: 8,
|
|
borderRadius: "50%",
|
|
backgroundColor: themeName === "dark" ? "rgba(54, 54, 54, 0.8)" : "#EDEEEE",
|
|
border: `1px solid ${themeName === "dark" ? "#424242" : "transparent"}`,
|
|
transition: "all 0.3s ease",
|
|
cursor: "pointer",
|
|
width: 30,
|
|
height: 30,
|
|
position: "absolute",
|
|
top: 40,
|
|
[isRTL ? "right" : "left"]: 16,
|
|
zIndex: 1000,
|
|
};
|
|
|
|
const navigate = useNavigate();
|
|
const productId = localStorage.getItem("productId");
|
|
|
|
const redirectToProductPage = () => {
|
|
if (productId) {
|
|
navigate(`/${subdomain}/product/${productId}`);
|
|
onClose();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<ProBottomSheet
|
|
isOpen={isOpen}
|
|
onClose={onClose}
|
|
showCloseButton={true}
|
|
initialSnap={1}
|
|
height={"90vh"}
|
|
snapPoints={["90vh"]}
|
|
contentStyle={{ padding: 0 }}
|
|
>
|
|
<Button
|
|
type="text"
|
|
icon={<UploadOutlined />}
|
|
onClick={redirectToProductPage}
|
|
style={closeButtonStyle}
|
|
/>
|
|
<ProductDetailPage onClose={onClose} />
|
|
</ProBottomSheet>
|
|
);
|
|
}
|