-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathProblemCard.tsx
More file actions
82 lines (73 loc) · 2.16 KB
/
ProblemCard.tsx
File metadata and controls
82 lines (73 loc) · 2.16 KB
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
import { Icon } from '@iconify/react'
import { Card } from 'antd'
import cx from 'classnames'
import { useEffect, useState } from 'react'
import { useProblemContext } from '@/context/problem'
import { Problem } from '@/lib/schema'
import { Checkbox } from '../Checkbox'
import { ProblemSourceBadge } from '../ProblemSourceBadge'
type ProblemCardProps = {
className?: string
problem: Problem
}
export const ProblemCard = ({ problem, className }: ProblemCardProps) => {
const { addProblem, removeProblem, selectedProblemIds } = useProblemContext()
const [isSelected, setIsSelected] = useState(false)
useEffect(() => {
setIsSelected((selectedProblemIds || []).includes(problem?.id))
}, [problem?.id, selectedProblemIds])
const onChange = () => {
if (!isSelected) {
addProblem(problem?.id)
} else {
removeProblem(problem?.id)
}
setIsSelected(!isSelected)
}
return (
<Card
className={cx('!rounded-none border-neutral-200 bg-white', className)}
extra={
<Checkbox
checked={isSelected}
checkedLabel="Exclude Problem"
label="Include Problem"
mobileCheckedLabel="Exclude"
mobileLabel="Include"
rtl
onChange={onChange}
/>
}
headStyle={{
borderColor: 'rgb(229, 231, 235)',
}}
title={
<div className="flex gap-2 items-center justify-start">
<span className="truncate">{problem?.name}</span>
<a
href={`problem/${problem.id}/submit`}
// href={problem?.url}
rel="noreferrer"
target="_blank"
>
<Icon
className="shrink-0 text-base text-neutral-500 hover:text-neutral-400 transition-colors duration-300"
icon="la:external-link-alt"
/>
</a>
</div>
}
>
<ProblemSourceBadge
className="mb-1.5 w-max"
source={problem?.source_type}
/>
<p>
<b className="!font-bold !text-xs">Rating:</b> {problem?.rating}
</p>
<p>
<b className="!font-bold !text-xs">Contest:</b> {problem?.contest_name}
</p>
</Card>
)
}