Skip to content

Commit 8598044

Browse files
matia-leematia-lee
committed
t2
1 parent 76e47eb commit 8598044

File tree

5 files changed

+645
-22
lines changed

5 files changed

+645
-22
lines changed

‎frontend/src/components/ranking/caregiver-matching-form.tsx‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
import React from 'react';
2+
import { Box, Heading, Button, VStack, HStack, Text } from '@chakra-ui/react';
3+
4+
import { CustomRadio } from '@/components/CustomRadio';
5+
import { COLORS } from '@/constants/form';
6+
7+
8+
9+
interface CaregiverMatchingFormProps {
10+
volunteerType: string;
11+
onVolunteerTypeChange: (type: string) => void;
12+
onNext: () => void;
13+
}
14+
15+
export function CaregiverMatchingForm({
16+
volunteerType,
17+
onVolunteerTypeChange,
18+
onNext
19+
}: CaregiverMatchingFormProps) {
20+
return (
21+
<Box>
22+
<Heading
23+
as="h1"
24+
fontFamily="system-ui, -apple-system, sans-serif"
25+
fontWeight={600}
26+
color={COLORS.veniceBlue}
27+
fontSize="28px"
28+
mb={8}
29+
>
30+
Volunteer Matching Preferences
31+
</Heading>
32+
33+
<Box mb={10}>
34+
<HStack gap={3}>
35+
<Box flex="1">
36+
<Box h="3px" bg={COLORS.teal} borderRadius="full" />
37+
</Box>
38+
<Box flex="1">
39+
<Box h="3px" bg={COLORS.progressGray} borderRadius="full" />
40+
</Box>
41+
<Box flex="1">
42+
<Box h="3px" bg={COLORS.progressGray} borderRadius="full" />
43+
</Box>
44+
</HStack>
45+
</Box>
46+
47+
<Box mb={10}>
48+
<Heading
49+
as="h2"
50+
fontFamily="system-ui, -apple-system, sans-serif"
51+
fontWeight={600}
52+
color={COLORS.veniceBlue}
53+
fontSize="20px"
54+
mb={3}
55+
>
56+
Your volunteer
57+
</Heading>
58+
<Text
59+
color={COLORS.fieldGray}
60+
fontFamily="system-ui, -apple-system, sans-serif"
61+
fontSize="15px"
62+
mb={2}
63+
>
64+
This information will be used in the next step.
65+
</Text>
66+
<Text
67+
color={COLORS.veniceBlue}
68+
fontFamily="system-ui, -apple-system, sans-serif"
69+
fontSize="15px"
70+
fontWeight={600}
71+
mb={8}
72+
>
73+
Note that your volunteer is guaranteed to speak your language and have the same availability.
74+
</Text>
75+
76+
<VStack gap={5}>
77+
<Box w="full">
78+
<Text
79+
color={COLORS.veniceBlue}
80+
fontFamily="system-ui, -apple-system, sans-serif"
81+
fontWeight={500}
82+
fontSize="14px"
83+
mb={4}
84+
>
85+
I would like a volunteer that...
86+
</Text>
87+
88+
<VStack align="start" gap={3}>
89+
<CustomRadio
90+
name="volunteerType"
91+
value="similarDiagnosis"
92+
checked={volunteerType === 'similarDiagnosis'}
93+
onChange={(value) => onVolunteerTypeChange(value)}
94+
>
95+
<Text
96+
fontFamily="system-ui, -apple-system, sans-serif"
97+
fontSize="14px"
98+
color={COLORS.veniceBlue}
99+
>
100+
has a similar diagnosis
101+
</Text>
102+
</CustomRadio>
103+
104+
<CustomRadio
105+
name="volunteerType"
106+
value="caringForLovedOne"
107+
checked={volunteerType === 'caringForLovedOne'}
108+
onChange={(value) => onVolunteerTypeChange(value)}
109+
>
110+
<Text
111+
fontFamily="system-ui, -apple-system, sans-serif"
112+
fontSize="14px"
113+
color={COLORS.veniceBlue}
114+
>
115+
is caring for a loved one with blood cancer
116+
</Text>
117+
</CustomRadio>
118+
</VStack>
119+
</Box>
120+
</VStack>
121+
</Box>
122+
123+
<Box w="full" display="flex" justifyContent="flex-end">
124+
<Button
125+
bg={COLORS.teal}
126+
color="white"
127+
_hover={{ bg: COLORS.teal }}
128+
_active={{ bg: COLORS.teal }}
129+
onClick={onNext}
130+
disabled={!volunteerType}
131+
w="auto"
132+
h="40px"
133+
fontSize="14px"
134+
fontWeight={500}
135+
px={6}
136+
>
137+
Next Section →
138+
</Button>
139+
</Box>
140+
</Box>
141+
);
142+
}

‎frontend/src/components/ranking/caregiver-qualities-form.tsx‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
import React from 'react';
2+
import { Box, Heading, Button, VStack, HStack, Text } from '@chakra-ui/react';
3+
import { Checkbox } from '@/components/ui/checkbox';
4+
import { COLORS } from '@/constants/form';
5+
6+
const CAREGIVER_QUALITIES = [
7+
'the same age as my loved one',
8+
'the same gender identity as my loved one',
9+
'the same diagnosis as my loved one',
10+
'experience with returning to school or work during/after treatment',
11+
'experience with Relapse',
12+
'experience with Anxiety / Depression',
13+
'experience with PTSD',
14+
'experience with Fertility Issues',
15+
];
16+
17+
interface CaregiverQualitiesFormProps {
18+
selectedQualities: string[];
19+
onQualityToggle: (quality: string) => void;
20+
onNext: () => void;
21+
}
22+
23+
export function CaregiverQualitiesForm({
24+
selectedQualities,
25+
onQualityToggle,
26+
onNext
27+
}: CaregiverQualitiesFormProps) {
28+
return (
29+
<Box>
30+
<Heading
31+
as="h1"
32+
fontFamily="system-ui, -apple-system, sans-serif"
33+
fontWeight={600}
34+
color={COLORS.veniceBlue}
35+
fontSize="28px"
36+
mb={8}
37+
>
38+
Volunteer Matching Preferences
39+
</Heading>
40+
41+
<Box mb={10}>
42+
<HStack gap={3}>
43+
<Box flex="1">
44+
<Box h="3px" bg={COLORS.progressGray} borderRadius="full" />
45+
</Box>
46+
<Box flex="1">
47+
<Box h="3px" bg={COLORS.teal} borderRadius="full" />
48+
</Box>
49+
<Box flex="1">
50+
<Box h="3px" bg={COLORS.progressGray} borderRadius="full" />
51+
</Box>
52+
</HStack>
53+
</Box>
54+
55+
<Box mb={10}>
56+
<Heading
57+
as="h2"
58+
fontFamily="system-ui, -apple-system, sans-serif"
59+
fontWeight={600}
60+
color={COLORS.veniceBlue}
61+
fontSize="20px"
62+
mb={3}
63+
>
64+
Relevant Qualities in a Volunteer
65+
</Heading>
66+
<Text
67+
color={COLORS.fieldGray}
68+
fontFamily="system-ui, -apple-system, sans-serif"
69+
fontSize="15px"
70+
mb={2}
71+
>
72+
You will be ranking these qualities in the next step.
73+
</Text>
74+
<Text
75+
color={COLORS.veniceBlue}
76+
fontFamily="system-ui, -apple-system, sans-serif"
77+
fontSize="15px"
78+
fontWeight={600}
79+
mb={8}
80+
>
81+
Note that your volunteer is guaranteed to speak your language and have the same availability.
82+
</Text>
83+
84+
<VStack gap={5}>
85+
<Box w="full">
86+
<Text
87+
color={COLORS.veniceBlue}
88+
fontFamily="system-ui, -apple-system, sans-serif"
89+
fontWeight={500}
90+
fontSize="14px"
91+
mb={2}
92+
>
93+
I would prefer a volunteer with...
94+
</Text>
95+
<Text
96+
color={COLORS.fieldGray}
97+
fontFamily="system-ui, -apple-system, sans-serif"
98+
fontSize="12px"
99+
mb={4}
100+
>
101+
You can select a maximum of 5. Please select at least one quality.
102+
</Text>
103+
104+
<VStack align="start" gap={3}>
105+
{CAREGIVER_QUALITIES.map((quality) => (
106+
<Checkbox
107+
key={quality}
108+
checked={selectedQualities.includes(quality)}
109+
onChange={() => onQualityToggle(quality)}
110+
disabled={!selectedQualities.includes(quality) && selectedQualities.length >= 5}
111+
>
112+
<Text
113+
fontFamily="system-ui, -apple-system, sans-serif"
114+
fontSize="14px"
115+
color={COLORS.veniceBlue}
116+
>
117+
{quality}
118+
</Text>
119+
</Checkbox>
120+
))}
121+
</VStack>
122+
</Box>
123+
</VStack>
124+
</Box>
125+
126+
<Box w="full" display="flex" justifyContent="flex-end">
127+
<Button
128+
bg={COLORS.teal}
129+
color="white"
130+
_hover={{ bg: COLORS.teal }}
131+
_active={{ bg: COLORS.teal }}
132+
onClick={onNext}
133+
disabled={selectedQualities.length === 0}
134+
w="auto"
135+
h="40px"
136+
fontSize="14px"
137+
fontWeight={500}
138+
px={6}
139+
>
140+
Next Section →
141+
</Button>
142+
</Box>
143+
</Box>
144+
);
145+
}

0 commit comments

Comments
 (0)