Skip to content

Commit

Permalink
add reusable icon container
Browse files Browse the repository at this point in the history
  • Loading branch information
@wbglaeser
wbglaeser committed Jul 2, 2024
1 parent b262082 commit 8043fab
Show file tree
Hide file tree
Showing 4 changed files with 127 additions and 61 deletions.
67 changes: 67 additions & 0 deletions src/components/ClickCard.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import React from 'react';
import VStack from "./VStack";
import HStack from "./HStack";
import {Link} from 'react-router-dom';
import {Typography} from '@mui/material';
import InfoCard from "./InfoCard";
import AccessTimeIcon from '@mui/icons-material/AccessTime';

const ClickCard = ({
link,
time,
title,
subtitle,
backgroundImage,
cardHeight = '175px',
titleColor = 'white',
subtitleColor = 'white',
icon = AccessTimeIcon,
iconColor = "green"
}) => {
return (
<VStack data-testid="card-container"
sx={{...styles.card, height: cardHeight, backgroundImage: `url(${backgroundImage})`}}>
<Link to={link} style={{textDecoration: 'none', color: "black", width: '100%'}}>
<VStack justifyContent={'space-between'}>
<HStack justifyContent={'flex-end'} gap={1}>
<InfoCard icon={icon} iconColor={iconColor} text={time}/>
</HStack>
<HStack justifyContent={'flex-start'} gap={1}>
<VStack gap={0} justifyContent={'flex-end'}>
<Typography sx={{...styles.cardContentTitle, color: titleColor}}>
{title}
</Typography>
<Typography sx={{...styles.cardContentSubTitle, color: subtitleColor}}>
{subtitle}
</Typography>
</VStack>
</HStack>
</VStack>
</Link>
</VStack>
);
};

export default ClickCard;

const styles = {
card: {
height: '175px',
padding: '16px',
borderRadius: '15px',
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
},
cardContentTitle: {
fontSize: '36px',
fontWeight: 'bold',
color: "white"
},
cardContentSubTitle: {
fontSize: '16px',
fontWeight: '400',
color: "white"
}
};
42 changes: 42 additions & 0 deletions src/components/InfoCard.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import React from 'react';
import { Card, CardContent, Typography } from '@mui/material';
import HStack from './HStack';

const InfoCard = ({ icon: Icon, iconColor, text }) => {
return (
<Card sx={{ ...styles.infoCard, borderColor: iconColor }}>
<CardContent sx={styles.infoCardContent}>
<HStack gap={1}>
<Icon sx={{...styles.icon, color: iconColor}} />
<Typography variant="body2" sx={styles.infoCardText}>
{text}
</Typography>
</HStack>
</CardContent>
</Card>
);
};

export default InfoCard;

const styles = {
infoCard: {
borderRadius: '15px',
borderStyle: 'solid', // Add this line to define the border style
borderWidth: '1px', // Add this line to define the border width
},
icon: {
height: '20px'
},
infoCardContent: {
padding: "6px 8px 6px 8px",
"&:last-child": {
paddingBottom: '6px',
},
},
infoCardText: {
color: "black",
fontSize: '14px',
fontWeight: '400',
}
};
76 changes: 16 additions & 60 deletions src/screens/OnboardingChoice.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import React from 'react';
import {Card, CardContent, Typography} from '@mui/material';
import {Link} from 'react-router-dom';
import {Typography} from '@mui/material';
import Layout from '../components/Layout';
import VStack from "../components/VStack";
import HStack from "../components/HStack";
import AccessTimeIcon from '@mui/icons-material/AccessTime';
import ClickCard from "../components/ClickCard";

const OnboardingChoice = () => {
return (
Expand All @@ -17,62 +15,20 @@ const OnboardingChoice = () => {
Three ways of discovering benefits for you
</Typography>
</VStack>
<VStack data-testid="card-container" sx={styles.card}>
<Link to="/onboarding-welcome" style={{textDecoration: 'none', color: "black", width: '100%'}}>
<VStack justifyContent={'space-between'}>
<HStack justifyContent={'flex-end'} gap={1}>
<Card sx={styles.infoCard}>
<CardContent sx={styles.infoCardContent}>
<HStack gap={1}>
<AccessTimeIcon sx={{color: "green"}}/>
<Typography variant="body2" sx={styles.infoCardText}>
5 Min.
</Typography>
</HStack>
</CardContent>
</Card>
</HStack>
<HStack justifyContent={'flex-start'} gap={1}>
<VStack gap={0} justifyContent={'flex-end'}>
<Typography sx={styles.cardContentTitle}>
Quick eligibility check
</Typography>
<Typography sx={styles.cardContentSubTitle}>
Based on 10 benefits
</Typography>
</VStack>
</HStack>
</VStack>
</Link>
</VStack>
<VStack data-testid="card-container" sx={styles.card}>
<Link to="/onboarding-welcome" style={{textDecoration: 'none', color: "black", width: '100%'}}>
<VStack justifyContent={'space-between'}>
<HStack justifyContent={'flex-end'} gap={1}>
<Card sx={styles.infoCard}>
<CardContent sx={styles.infoCardContent}>
<HStack gap={1}>
<AccessTimeIcon sx={{color: "green"}}/>
<Typography variant="body2" sx={styles.infoCardText}>
At your own pace
</Typography>
</HStack>
</CardContent>
</Card>
</HStack>
<HStack justifyContent={'flex-start'} gap={1}>
<VStack gap={0} justifyContent={'flex-end'}>
<Typography sx={styles.cardContentTitle}>
Browse all benefits
</Typography>
<Typography sx={styles.cardContentSubTitle}>
Filter by topic and from A-Z
</Typography>
</VStack>
</HStack>
</VStack>
</Link>
</VStack>
<ClickCard
link="/onboarding-welcome"
time="5 Min."
title="Quick eligibility check"
subtitle="Based on 10 benefits"
backgroundImage="foerderfunke-react-app/assets/images/quick-check.jpg"
/>
<ClickCard
link="/onboarding-welcome"
time="At your own pace"
title="Browse all benefits"
subtitle="Filter by topic or from A-Z"
backgroundImage="foerderfunke-react-app/assets/images/quick-check.jpg"
/>
</Layout>
);
};
Expand Down
3 changes: 2 additions & 1 deletion src/screens/onboarding-welcome/OnboardingWelcome.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const OnboardingWelcome = () => {
<Layout>
<Box sx={styles.container}>
<Typography variant="h4" gutterBottom sx={styles.titleText}>
Entdecke personalisierte Leistungen
Quick eligibility check
</Typography>
<Typography variant="body1" gutterBottom sx={styles.subTitleText}>
Answer some questions about you and find out to which benefits you might be eligible to. The more
Expand Down Expand Up @@ -66,6 +66,7 @@ const styles = {
},
titleText: {
fontWeight: 'bold',
fontSize: '28px',
},
subTitleText: {
fontSize: '16px',
Expand Down

0 comments on commit 8043fab

Please sign in to comment.