Siddhesh.More/optifii-employee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

card💳

Browse Source
This commit is contained in:
YasinShaikh123
2024-09-05 17:21:47 +05:30
parent 744eb4857d
commit 2cf3f29940
3 changed files with 17 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Components/HeaderMain.jsx
View File

@@ -49,7 +49,7 @@ const HeaderMain = ({
return (
<Box
w={"100%"}
h={{base:"8%", lg:"6%"}}
h={{base:"8%", lg:"8%"}}
position={"relative"}
className={` pt-2 pb-2 fw-400 border-bottom d-flex ${
slideDirecttion ? " ps-2" : ""

3
src/Components/MiniHeader.jsx
View File

@@ -7,10 +7,11 @@ const MiniHeader = ({ title, subTitle, backButton }) => {
const navigate = useNavigate();
const [firstPart, secondPart] = title.split(/ (.+)/);
return (
return (
<HStack gap={3} mb={4}>
{backButton && (
<Icon
boxShadow='md'
cursor={"pointer"}
onClick={() => navigate(-1)}
as={ArrowBackIcon}

26
src/Pages/Expenses/Expenses.jsx
View File

@@ -1,9 +1,10 @@
import { Box, Button, HStack, Image, Text, VStack } from "@chakra-ui/react";
import React from "react";
import MiniHeader from "../Components/MiniHeader";
import logo_card from "../assets/logo_card.svg";
import TRANSCORP_LOGO from "../assets/TRANSCORP_LOGO.svg";
import RuPay from '../assets/rupayImg.png'
// import MiniHeader from "../Components/MiniHeader";
import logo_card from "../../assets/logo_card.svg";
import TRANSCORP_LOGO from "../../assets/TRANSCORP_LOGO.svg";
import RuPay from '../../assets/rupayImg.png'
import MiniHeader from "../../Components/MiniHeader";
const Expenses = () => {
return (
@@ -13,22 +14,22 @@ const Expenses = () => {
subTitle={"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
/>
<HStack justifyContent={"start"} w={"100%"} h={"500px"} gap={4}>
<HStack justifyContent={"start"} w={"100%"} h={"65%"} gap={4}>
<VStack
// bg="linear-gradient(230deg, #6311CB, #481566, #851d70, #a71c71, #df2274)"
bg="linear-gradient(230deg, purple, #390A74, #390A74, #390A74, #390A74)"
alignItems={"start"}
justifyContent={"space-between"}
height={"100%"}
w={320}
w={240}
rounded={"xl"}
p={4}
boxShadow={"md"}
position={"relative"}
>
<Box width={"100%"} display={"flex"} justifyContent={"space-between"}>
<Image w={28} src={logo_card} />
<Image w={28} src={TRANSCORP_LOGO} me={0.5} />
<Image w={20} src={logo_card} />
<Image w={24} src={TRANSCORP_LOGO} me={0.5} />
</Box>
<VStack
@@ -37,7 +38,7 @@ const Expenses = () => {
alignItems={"start"}
justifyContent={"space-between"}
>
<Text color={"#fff"}>1234 5678 1234 5678</Text>
<Text color={"#fff"} fontSize={"sm"}>1234 5678 1234 5678</Text>
<Button
size={"sm"}
rounded={"full"}
@@ -48,6 +49,7 @@ const Expenses = () => {
_hover={{ opacity: 0.8 }}
_active={{ opacity: 1 }}
color={"#fff"}
fontWeight={500}
>
Tap to view details
</Button>
@@ -55,15 +57,15 @@ const Expenses = () => {
<Box width={"100%"} display={"flex"} justifyContent={"end"}>
{/* <Image w={32} src={logo_card} /> */}
<Image w={28} src={RuPay} me={0.5} />
<Image w={24} src={RuPay} me={0.5} />
</Box>
<Text
position={"absolute"}
top={28}
top={24}
right={-6}
transform="rotate(270deg)"
fontSize={'sm'}
fontSize={'xs'}
color={"#9E9E9E"}
>