working on car card & car view BS

src/pages/checkout/components/CarCard.tsx

@@ -0,0 +1,78 @@
+import ProText from "components/ProText";
+import { useTranslation } from "react-i18next";
+import { useAppSelector } from "redux/hooks";
+import BackIcon from "components/Icons/BackIcon";
+import NextIcon from "components/Icons/NextIcon";
+import CarIcon from "components/Icons/CarIcon";
+import { Button, Card } from "antd";
+import styles from "../checkout.module.css";
+import { useState } from "react";
+import { CarBottomSheet } from "./CarBottomSheet";
+
+export function CarCard() {
+  const { t } = useTranslation();
+  const { isRTL } = useAppSelector((state) => state.locale);
+  const [isCarBottomSheetOpen, setIsCarBottomSheetOpen] = useState(false);
+  return (
+    <>
+      <Card onClick={() => {
+        setIsCarBottomSheetOpen(true);
+      }}>
+        <div className={styles.carCard}>
+          <Button
+            shape="circle"
+            icon={<CarIcon />}
+            style={{
+              backgroundColor: "var(--background)",
+              border: "none",
+              width: 32,
+              height: 32,
+              minWidth: 32,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              boxShadow: "0 0 10px 0 rgba(0, 0, 0, 0.1)",
+            }}
+          />
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              gap: 4,
+              width: "100%",
+            }}
+          >
+            <ProText
+              style={{
+                fontWeight: 500,
+                fontStyle: "Medium",
+                fontSize: 18,
+                lineHeight: "140%",
+                color: "#333333",
+              }}
+            >
+              {t("checkout.addCarDetails")}
+            </ProText>
+
+            <ProText
+              style={{
+                fontWeight: 400,
+                fontStyle: "Regular",
+                fontSize: 16,
+                lineHeight: "140%",
+                color: "#777580",
+              }}
+            >
+              {t("checkout.soTheRestaurantCanRecognizeYourCarWhenYouArrive")}
+            </ProText>
+          </div>
+          {isRTL ? <BackIcon iconSize={24} /> : <NextIcon iconSize={24} />}
+        </div>
+      </Card>
+      <CarBottomSheet
+        isOpen={isCarBottomSheetOpen}
+        onClose={() => setIsCarBottomSheetOpen(false)}
+      />
+    </>
+  );
+}