кастом карточки

2024-08-28 02:41:02 +03:00 · 2024-08-28 02:41:02 +03:00 · 40147884a5
commit 40147884a5
parent 89f1917a7c
5 changed files with 133 additions and 50 deletions
--- a/src/assets/icons/NotebookWithPencil.tsx
+++ b/src/assets/icons/NotebookWithPencil.tsx
@ -0,0 +1,22 @@
+import { useLocation } from "react-router-dom";
+import { Box, SxProps, Theme } from "@mui/material";
+
+interface Props {
+    sx?: SxProps<Theme>;
+}
+export default function NotebookWithPencil({ sx }: Props) {
+    return (
+        <Box
+            sx={{
+                height: "24px",
+                ...sx
+            }}
+        >
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M5.88766 6.5124H15.3537M5.88766 10.4075H12.0172M5.88766 14.398H9.18792M18.988 4.41492V3.69678C18.988 3.14449 18.5403 2.69678 17.988 2.69678H3.19922C2.64693 2.69678 2.19922 3.14449 2.19922 3.69678V19.7038C2.19922 20.5407 3.16577 21.0074 3.8211 20.4869L6.25047 18.5577C6.42733 18.4173 6.64652 18.3408 6.87236 18.3408H17.988C18.5403 18.3408 18.988 17.8931 18.988 17.3408V15.2147" stroke="#7E2AEA" stroke-width="1.5" stroke-linecap="round" />
+                <path d="M20.383 7.29034L20.9133 6.76001L20.383 6.22968L19.8527 6.76001L20.383 7.29034ZM15.9919 11.6815L15.4615 11.1511L14.9312 11.6815L15.4615 12.2118L15.9919 11.6815ZM16.7185 12.4081L16.1882 12.9384L16.7185 13.4688L17.2489 12.9384L16.7185 12.4081ZM21.1096 8.01698L21.64 8.54731L22.1703 8.01698L21.64 7.48665L21.1096 8.01698ZM14.4001 13.2732L14.9304 12.7429L14.4001 12.2126L13.8698 12.7429L14.4001 13.2732ZM14.0817 13.5917L13.5514 13.0613C13.5011 13.1115 13.4583 13.1686 13.4242 13.2309L14.0817 13.5917ZM13.1982 15.2018L12.5407 14.841C12.3803 15.1333 12.4321 15.4964 12.6678 15.7321C12.9036 15.9679 13.2667 16.0197 13.559 15.8593L13.1982 15.2018ZM14.8083 14.3183L15.1691 14.9758C15.2314 14.9417 15.2885 14.8988 15.3387 14.8486L14.8083 14.3183ZM15.1267 13.9999L15.6571 14.5302L16.1874 13.9999L15.6571 13.4696L15.1267 13.9999ZM21.9075 5.76585L21.3772 5.23552L20.8468 5.76585L21.3772 6.29618L21.9075 5.76585ZM22.2812 5.39209L22.8116 4.86176C22.5187 4.56887 22.0438 4.56887 21.7509 4.86176L22.2812 5.39209ZM23.0079 6.11874L23.5382 6.64907C23.8311 6.35617 23.8311 5.8813 23.5382 5.58841L23.0079 6.11874ZM22.6341 6.4925L22.1038 7.02283L22.6341 7.55316L23.1645 7.02283L22.6341 6.4925ZM19.8527 6.76001L15.4615 11.1511L16.5222 12.2118L20.9133 7.82067L19.8527 6.76001ZM15.4615 12.2118L16.1882 12.9384L17.2489 11.8778L16.5222 11.1511L15.4615 12.2118ZM17.2489 12.9384L21.64 8.54731L20.5793 7.48665L16.1882 11.8778L17.2489 12.9384ZM21.64 7.48665L20.9133 6.76001L19.8527 7.82067L20.5793 8.54731L21.64 7.48665ZM13.8698 12.7429L13.5514 13.0613L14.612 14.122L14.9304 13.8036L13.8698 12.7429ZM13.4242 13.2309L12.5407 14.841L13.8557 15.5626L14.7392 13.9524L13.4242 13.2309ZM13.559 15.8593L15.1691 14.9758L14.4475 13.6608L12.8374 14.5443L13.559 15.8593ZM15.3387 14.8486L15.6571 14.5302L14.5964 13.4696L14.278 13.788L15.3387 14.8486ZM15.6571 13.4696L14.9304 12.7429L13.8698 13.8036L14.5964 14.5302L15.6571 13.4696ZM22.4378 6.29618L22.8116 5.92242L21.7509 4.86176L21.3772 5.23552L22.4378 6.29618ZM21.7509 5.92242L22.4776 6.64907L23.5382 5.58841L22.8116 4.86176L21.7509 5.92242ZM22.4776 5.58841L22.1038 5.96217L23.1645 7.02283L23.5382 6.64907L22.4776 5.58841ZM23.1645 5.96217L22.4378 5.23552L21.3772 6.29618L22.1038 7.02283L23.1645 5.96217Z" fill="#7E2AEA" />
+            </svg>
+
+        </Box>
+    );
+}
--- a/src/assets/icons/SmallIconPena.tsx
+++ b/src/assets/icons/SmallIconPena.tsx
@ -0,0 +1,23 @@
+import { useLocation } from "react-router-dom";
+import { Box, SxProps, Theme } from "@mui/material";
+
+interface Props {
+    sx?: SxProps<Theme>;
+}
+export default function SmallIconPena({ sx }: Props) {
+    return (
+        <Box
+            sx={{
+                height: "24px",
+                ...sx
+            }}
+        >
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M8.72273 1.93565C6.22359 1.64616 4.49941 4.33068 2.89567 6.2712C1.48824 7.97419 0.440289 9.89773 0.318567 12.1047C0.189064 14.4526 0.614985 16.8979 2.21458 18.62C3.86225 20.3938 6.3304 21.5145 8.72273 21.1522C10.9164 20.8199 11.8871 18.4109 13.5203 16.9075C15.2937 15.2752 18.5976 14.516 18.5518 12.1047C18.5059 9.68969 15.0189 9.21697 13.3412 7.48116C11.6033 5.68317 11.2053 2.22322 8.72273 1.93565Z" fill="#7E2AEA" fill-opacity="0.3" />
+                <ellipse cx="14.9421" cy="20.2394" rx="1.37908" ry="1.37908" fill="#7E2AEA" fill-opacity="0.3" />
+                <circle cx="13.5639" cy="4.93942" r="0.525362" fill="#7E2AEA" fill-opacity="0.3" />
+                <path d="M21.9666 11.536C21.8134 10.0468 21.1128 8.66741 20.0005 7.66533C18.8882 6.66325 17.4434 6.10982 15.9463 6.11231C15.7337 6.11241 15.5213 6.12353 15.3099 6.14562C13.8213 6.30193 12.4433 7.00391 11.4417 8.11617C10.4401 9.22843 9.88579 10.6722 9.88574 12.169V12.169V20.8213H12.4815V17.1441C13.4963 17.8501 14.7035 18.2276 15.9398 18.2256C16.1524 18.2255 16.3648 18.2144 16.5762 18.1923C17.3672 18.1092 18.1341 17.871 18.8331 17.4915C19.5321 17.112 20.1495 16.5985 20.6501 15.9804C21.1506 15.3622 21.5245 14.6516 21.7504 13.8889C21.9763 13.1263 22.0498 12.3266 21.9666 11.5356V11.536ZM18.6328 14.3481C18.3477 14.7023 17.9951 14.9964 17.5955 15.2134C17.1959 15.4303 16.7573 15.5659 16.3049 15.6122C16.1836 15.6248 16.0618 15.6311 15.9398 15.6312C15.1548 15.6305 14.3933 15.3629 13.7804 14.8724C13.1675 14.3819 12.7396 13.6976 12.5669 12.9318C12.3941 12.1661 12.4869 11.3643 12.8298 10.6582C13.1728 9.95206 13.7456 9.38351 14.4543 9.04585C15.163 8.70819 15.9654 8.62148 16.7299 8.79996C17.4943 8.97844 18.1754 9.41149 18.6613 10.0281C19.1472 10.6446 19.409 11.408 19.4039 12.193C19.3987 12.978 19.1268 13.7379 18.6328 14.3481Z" fill="#7E2AEA" />
+            </svg>
+        </Box>
+    );
+}
--- a/src/pages/Tariffs/pages/Other.tsx
+++ b/src/pages/Tariffs/pages/Other.tsx
@ -1,6 +1,7 @@
 import { Box, useMediaQuery, useTheme } from "@mui/material"
 import { NavCard } from "../components/NavCard"
 import { createTariffElements } from "../tariffsUtils/createTariffElements"
+import SmallIconPena from "@/assets/icons/SmallIconPena"

 interface Props {
    content: {
@ -23,7 +24,7 @@ export const Other = ({
 }: any) => {
    const theme = useTheme()
    const isTablet = useMediaQuery(theme.breakpoints.down(1000));
-const sendRequestToCreate = userPrivilegies?.quizManual.amount > 0 ? startRequestCreate : undefined
+const sendRequest = userPrivilegies?.quizManual.amount > 0 ? startRequestCreate : undefined

    switch (selectedItem) {
        case "hide":
@ -78,8 +79,9 @@ const sendRequestToCreate = userPrivilegies?.quizManual.amount > 0 ? startReques
                    user,
                    discounts,
                    openModalHC,
-                    sendRequestToCreate,
-                    true
+                    sendRequest,
+                    true,
+                    <SmallIconPena/>
                )}
            </Box>
        default:
--- a/src/pages/Tariffs/tariffsUtils/TariffCard.tsx
+++ b/src/pages/Tariffs/tariffsUtils/TariffCard.tsx
@ -1,13 +1,13 @@
+import NotebookWithPencil from "@/assets/icons/NotebookWithPencil";
 import {
  Box,
  Typography,
-  Tooltip,
  SxProps,
  Theme,
  Button,
-  Badge,
  useTheme,
  useMediaQuery,
+  IconButton,
 } from "@mui/material";
 import { MouseEventHandler, ReactNode } from "react";

@ -23,7 +23,7 @@ interface Props {
    text?: string;
  };
  price?: ReactNode;
-  sendRequestToCreate?: () => void
+  sendRequest?: () => void
 }

 export default function TariffCard({
@ -34,7 +34,7 @@ export default function TariffCard({
  price,
  buttonProps,
  discount,
-  sendRequestToCreate,
+  sendRequest,
 }: Props) {
  text = Array.isArray(text) ? text : [text];
  const theme = useTheme();
@ -97,34 +97,34 @@ export default function TariffCard({
          </Box>
        )}
      </Box>
-        <Typography
-          variant="h5"
-          sx={{
-            mt: "14px",
-            mb: "10px",
-            textOverflow: "ellipsis",
-            overflow: "hidden",
-            whiteSpace: "nowrap",
-            width: "100%",
-          }}
-        >
-          {headerText}
-        </Typography>
-        <Box
-          sx={{
-            width: "100%",
-            mb: "auto",
-          }}
-        >
-          {text.map((line, index) => (
-            <Typography
-              sx={{ overflow: "hidden", textOverflow: "ellipsis" }}
-              key={index}
-            >
-              {line}
-            </Typography>
-          ))}
-        </Box>
+      <Typography
+        variant="h5"
+        sx={{
+          mt: "14px",
+          mb: "10px",
+          textOverflow: "ellipsis",
+          overflow: "hidden",
+          whiteSpace: "nowrap",
+          width: "100%",
+        }}
+      >
+        {headerText}
+      </Typography>
+      <Box
+        sx={{
+          width: "100%",
+          mb: "auto",
+        }}
+      >
+        {text.map((line, index) => (
+          <Typography
+            sx={{ overflow: "hidden", textOverflow: "ellipsis" }}
+            key={index}
+          >
+            {line}
+          </Typography>
+        ))}
+      </Box>
      <Box

        sx={{
@ -158,15 +158,34 @@ export default function TariffCard({
            {buttonProps.text}
          </Button>
        )}
-        {Boolean(sendRequestToCreate) && (
-          <Button
+        {Boolean(sendRequest) && (
+          <Box
            sx={{
-              ml: "30px"
+              ml: isMobile ? "10px" : "20px",
+              bgcolor: "#F2F3F7",
+              borderRadius: "8px",
            }}
-            onClick={sendRequestToCreate}
          >
-            Запросить
-          </Button>
+            {isMobile ?
+              <IconButton
+              sx={{
+                p:"12px",
+              }}
+              >
+                <NotebookWithPencil />
+              </IconButton>
+              :
+              <Button
+                sx={{
+                  color: "#7E2AEA",
+                  p: "10px 14px",
+                }}
+                onClick={sendRequest}
+              >
+                Запросить
+              </Button>
+            }
+          </Box>
        )}
      </Box>
    </Box >
--- a/src/pages/Tariffs/tariffsUtils/createTariffElements.tsx
+++ b/src/pages/Tariffs/tariffsUtils/createTariffElements.tsx
@ -3,8 +3,9 @@ import TariffCard from "./TariffCard";
 import NumberIcon from "@icons/NumberIcon";
 import { currencyFormatter } from "./currencyFormatter";
 import FreeTariffCard from "./FreeTariffCard";
-import { Typography } from "@mui/material";
+import { Box, Icon, Typography } from "@mui/material";
 import { startCC } from "@/stores/cc";
+import { FC, ReactNode } from "react";

 export const createTariffElements = (
  filteredTariffs: Tariff[],
@ -12,8 +13,9 @@ export const createTariffElements = (
  user: any,
  discounts: any,
  onclick: any,
-  sendRequestToCreate?: () => void,
-  cc?: boolean
+  sendRequest?: () => void,
+  cc?: boolean,
+  icon?: ReactNode
 ) => {
  const tariffElements = filteredTariffs
    .filter((tariff) => tariff.privileges.length > 0)
@ -39,11 +41,26 @@ export const createTariffElements = (
              : ""
          }
          icon={
-            <NumberIcon
-              number={index + 1}
-              color={"#7e2aea"}
-              backgroundColor={"#EEE4FC"}
-            />
+            icon ?
+              <Box
+                sx={{
+                  backgroundColor: "#EEE4FC",
+                  width: "36px",
+                  height: "36px",
+                  borderRadius: "6px",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  flexShrink: 0,
+                }}>
+                {icon}
+              </Box>
+              :
+              <NumberIcon
+                number={index + 1}
+                color={"#7e2aea"}
+                backgroundColor={"#EEE4FC"}
+              />
          }
          buttonProps={{
            text: "Купить",
@ -55,7 +72,7 @@ export const createTariffElements = (
              })
            }
          }}
-          sendRequestToCreate={sendRequestToCreate}
+          sendRequest={sendRequest}
          headerText={tariff.name}
          text={tariff.description}
          price={