Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | 2x 2x | import React from "react";
import { ArrowLeft } from "@assets/icons";
import { Text } from "@common/Text";
import { Box, Stack } from "@mui/material";
import { palette } from "@palette";
import PurchaseKeyValue from "@components/Memberships/MembershipsReport/Table/Mobile/PurchaseKeyValue";
import { RevenuesData } from "./data";
type MobileRevenueDetailsProps = {
setIsSwitchDetails: React.Dispatch<React.SetStateAction<boolean>>;
data: RevenuesData | null;
title: string;
type: string
};
const MobileRevenueDetails = ({
setIsSwitchDetails,
data,
title,
type
}: MobileRevenueDetailsProps) => {
return (
<div>
<Stack
direction="row"
spacing={1}
alignItems="center"
sx={{ mb: "24px" }}
onClick={() => setIsSwitchDetails(prev => !prev)}
>
<ArrowLeft height={20} width={20} />
<Text color={palette.neutral[600]} fontWeight="medium">
Back
</Text>
</Stack>
<PurchaseKeyValue
title={type}
value={title}
highlight
/>
<PurchaseKeyValue
title="Date"
value={data?.details?.date}
/>
<PurchaseKeyValue
title="Revenue Source"
value={data?.details?.revenueSource}
highlight
>
<Box mt="8px" display="flex" justifyContent="flex-end">
<Text
color={palette.primary.main}
fontWeight="medium">{data?.details?.url}
</Text>
</Box>
</PurchaseKeyValue>
<PurchaseKeyValue
title="Amount"
value={
<Text color={palette.neutral[800]} fontWeight="medium">
{data?.details?.amount} <sup style={supStyle}>USD</sup>
</Text>
}
/>
<PurchaseKeyValue
title="Avg Transaction"
value={
<Text color={palette.neutral[800]} fontWeight="medium">
{data?.details?.average} <sup style={supStyle}>USD</sup>
</Text>
}
highlight
/>
<PurchaseKeyValue title="Transactions" value={data?.details?.transaction} />
<PurchaseKeyValue title="Visitors" value={data?.details?.Visitors} highlight />
<PurchaseKeyValue title="Visitors Views" value={data?.details?.VisitorsViews} />
</div>
);
};
const supStyle = {
fontSize: 11,
fontWeight: 400,
}
export default MobileRevenueDetails;
|