Skip to content

Commit b1a4b95

Browse files
mhenriettemhenriette
committed
refactor: bounty card component make it responsive
1 parent 668ba5d commit b1a4b95

File tree

1 file changed

+89
-64
lines changed

1 file changed

+89
-64
lines changed

‎src/components/cards/Bounty.tsx‎

Lines changed: 89 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -52,83 +52,108 @@ export default function BountyCard({ bounty }: BountyProps): ReactElement {
5252
if (bounty.submissions?.link) return `/${bounty.submissions?.link}`;
5353
if (isChallenge) return navigation.community.challengePath(bounty.challenge, bounty?.slug);
5454
return navigation.community.submissionsPath(bounty.challenge, bounty?.slug);
55-
}, [bounty.challenge, bounty.course?.slug, bounty.slug, bounty.submissions?.link, bounty.url, isChallenge, navigation.community]);
55+
}, [bounty.challenge, bounty.slug, bounty.submissions?.link, bounty.url, isChallenge, navigation.community]);
5656

5757
const Component = link.startsWith("http") ? "a" : Link;
5858

5959
return (
60-
<div className="p-5 flex md:flex-row-reverse= flex-col md:space-x-5 px-5 min-h-32 md:h-auto md:w-full justify-between hover:bg-secondary relative">
61-
<div className="flex md:flex-row-reverse">
62-
<div className="bg-theme-accent flex-col w-full h-full justify-between md:-space-y-1 pl-3 pr-5 mt-7 mb-5">
63-
<Component className="relative w-full block" href={link}>
64-
<div className="font-medium text-md md:pt-1.5 md:w-3/4">{bounty.course ? bounty.course.name : bounty.name}</div>
65-
</Component>
60+
<div className="p-5 flex md:flex-row-reverse md:space-x-5 px-5 min-h-32 md:h-auto md:w-full justify-between hover:bg-secondary relative">
61+
<div className="bg-theme-accent flex-col w-full h-full justify-between md:-space-y-1 pl-3 pr-5 mt-7 mb-5 ">
62+
<Component className="relative w-full block" href={link}>
63+
<div className="font-medium text-md md:pt-1.5">{bounty.course ? bounty.course.name : bounty.name}</div>
64+
</Component>
65+
<div className="flex justify-between w-full md:block">
6666
<Component className="inline-flex md:flex h-2/3 md:flex-row flex-col-reverse justify-between" href={link}>
67-
<div className="text-sm pt-8- md:pt-2 md:pb-4 text-gray-600">{type()}</div>
67+
<div className="text-sm pt-8 md:pt-2 md:pb-4 text-gray-600">{type()}</div>
6868
<div>
6969
<Reward type="gray" reward={bounty.reward}></Reward>
7070
</div>
7171
</Component>
72-
</div>
73-
<Component className="self-start relative mt-15 md:mt-7" href={link}>
74-
<Avatar
75-
icon={bounty.icon}
76-
image={bounty.image}
77-
color={bounty.colors?.cover?.background || bounty.colors?.primary}
78-
size="medium-fixed"
79-
shape="rounded"
80-
className="w-15 h-15 rounded-xl overflow-hidden"
81-
user={null}
82-
useLink={false}
83-
/>
84-
{bounty?.submissions && (
85-
<Badge
86-
customStyle={{
87-
bottom: "-4px",
88-
right: "-4px",
89-
fontSize: 14,
90-
backgroundColor: bounty.colors.accent,
91-
}}
92-
size="medium"
93-
value={bounty?.unreviewedSubmissionsCount}
94-
className="bottom-0 -right-1 absolute p-4"
72+
<Component className="self-end relative mt-15 md:mt-7 md:hidden" href={link}>
73+
<Avatar
74+
icon={bounty.icon}
75+
image={bounty.image}
76+
color={bounty.colors?.cover?.background || bounty.colors?.primary}
77+
size="medium-fixed"
78+
shape="rounded"
79+
className="w-15 h-15 rounded-xl overflow-hidden"
80+
user={null}
81+
useLink={false}
9582
/>
96-
)}
97-
</Component>
98-
</div>
99-
{bounty.submissions?.length ? (
100-
<div className="mt-4 space-y-0 divide-y divide-gray-200 border-t border-t-solid border-gray-200 md:w-10/12 md:self-center mx-2">
101-
{bounty.submissions.map((submission) => (
102-
<div className="flex space-x-1 relative text-sm font-medium py-3" key={submission.id}>
103-
<div className="flex justify-between w-full pr-0 gap-1 sm:gap-0">
104-
<div className="flex space-x-1">
105-
<Avatar user={submission.user} size="mini" />
106-
<Link
107-
className="text-ellipsis overflow-hidden w-17 sm:w-auto whitespace-nowrap"
108-
href={navigation.community.submissionPath(submission.id, bounty.challenge, bounty?.slug)}
109-
>
110-
{submission.user.displayName}
111-
</Link>
112-
<div className="flex align-middle text-gray-500 text-middle bg-gray-200 px-2 text-xxs rounded-xl m-0 h-5">
113-
{submission.metadata && submission.metadata.feedbacks ? submission.metadata.feedbacks : 0}
83+
{bounty?.submissions && (
84+
<Badge
85+
customStyle={{
86+
bottom: "-4px",
87+
right: "-4px",
88+
fontSize: 14,
89+
backgroundColor: bounty.colors.accent,
90+
}}
91+
size="medium"
92+
value={bounty?.unreviewedSubmissionsCount}
93+
className="bottom-0 -right-1 absolute p-4"
94+
/>
95+
)}
96+
</Component>
97+
</div>
98+
{bounty.submissions?.length ? (
99+
<div className="mt-4 space-y-0 divide-y divide-gray-200 border-t border-t-solid border-gray-200">
100+
{bounty.submissions.map((submission) => (
101+
<div className="flex space-x-1 relative text-sm font-medium py-3" key={submission.id}>
102+
<div className="flex justify-between w-full pr-0 gap-1 sm:gap-0">
103+
<div className="flex space-x-1">
104+
<Avatar user={submission.user} size="mini" />
105+
<Link
106+
className="text-ellipsis overflow-hidden w-17 sm:w-auto whitespace-nowrap"
107+
href={navigation.community.submissionPath(submission.id, bounty.challenge, bounty?.slug)}
108+
>
109+
{submission.user.displayName}
110+
</Link>
111+
<div className="flex align-middle text-gray-500 text-middle bg-gray-200 px-2 text-xxs rounded-xl m-0 h-5">
112+
{submission.metadata && submission.metadata.feedbacks ? submission.metadata.feedbacks : 0}
113+
</div>
114+
</div>
115+
<div className="text-gray-500 text-base font-normal whitespace-nowrap">
116+
{submission.reviewable ? (
117+
<span>
118+
{t("bounties.prefix.closes")} {convertDate(submission.reviewDeadline)}
119+
</span>
120+
) : (
121+
<span>{t("bounties.closes-soon")}</span>
122+
)}
114123
</div>
115-
</div>
116-
<div className="text-gray-500 text-base font-normal whitespace-nowrap">
117-
{submission.reviewable ? (
118-
<span>
119-
{t("bounties.prefix.closes")} {convertDate(submission.reviewDeadline)}
120-
</span>
121-
) : (
122-
<span>{t("bounties.closes-soon")}</span>
123-
)}
124124
</div>
125125
</div>
126-
</div>
127-
))}
128-
</div>
129-
) : (
130-
<></>
131-
)}
126+
))}
127+
</div>
128+
) : (
129+
<></>
130+
)}
131+
</div>
132+
<Component className="self-start relative mt-15 md:mt-7 hidden md:block" href={link}>
133+
<Avatar
134+
icon={bounty.icon}
135+
image={bounty.image}
136+
color={bounty.colors?.cover?.background || bounty.colors?.primary}
137+
size="medium-fixed"
138+
shape="rounded"
139+
className="w-15 h-15 rounded-xl overflow-hidden"
140+
user={null}
141+
useLink={false}
142+
/>
143+
{bounty?.submissions && (
144+
<Badge
145+
customStyle={{
146+
bottom: "-4px",
147+
right: "-4px",
148+
fontSize: 14,
149+
backgroundColor: bounty.colors.accent,
150+
}}
151+
size="medium"
152+
value={bounty?.unreviewedSubmissionsCount}
153+
className="bottom-0 -right-1 absolute p-4"
154+
/>
155+
)}
156+
</Component>
132157
</div>
133158
);
134159
}

0 commit comments

Comments
 (0)