Skip to content

Commit 1575f42

Browse files
LogannfordLogannford
committed
fix: user feedback
1 parent 4a66586 commit 1575f42

File tree

2 files changed

+75
-82
lines changed

2 files changed

+75
-82
lines changed

‎src/components/questions/question-card.tsx

Lines changed: 60 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import { QuestionWithoutAnswers } from '@/types/Questions';
22
import { Button } from '@/components/ui/button';
33
import { ArrowUpRight } from 'lucide-react';
4-
import Chip from '../global/chip';
4+
import Chip from '@/components/global/chip';
55
import { capitalise, getQuestionDifficultyColor } from '@/utils';
6-
import { Grid } from '../ui/grid';
76
import TagDisplay from './previous/tag-display';
87
import { getQuestionStats } from '@/actions/questions/get-question-stats';
98
import Link from 'next/link';
@@ -17,85 +16,67 @@ export default async function QuestionCard(opts: {
1716
const questionStats = await getQuestionStats(questionData.uid);
1817

1918
return (
20-
<>
21-
<Link
22-
href={`/question/${questionData.uid}`}
23-
key={questionData.uid}
24-
className="space-y-5 items-start border border-black-50 p-5 rounded-lg group w-full h-auto flex flex-col relative overflow-hidden"
25-
>
26-
<div className="flex flex-col w-full">
27-
<div className="flex w-full justify-between">
28-
<h6 className="text-base text-wrap text-start">
29-
{questionData.question}
30-
</h6>
31-
<Button
32-
variant="accent"
33-
className="size-10"
34-
padding="none"
35-
>
36-
<ArrowUpRight className="size-5 group-hover:rotate-45 duration-300" />
37-
</Button>
38-
</div>
39-
<div className="text-start text-[10px]">
40-
<p className="font-ubuntu text-sm">
41-
Submissions:{' '}
42-
<span className="font-medium underline">
43-
{questionStats?.totalSubmissions}
44-
</span>
45-
</p>
46-
<p className="font-ubuntu text-sm">
47-
Correct submissions:{' '}
48-
<span className="font-medium underline">
49-
{questionStats?.percentageCorrect}%
50-
</span>
51-
</p>
52-
</div>
19+
<Link
20+
href={`/question/${questionData.uid}`}
21+
key={questionData.uid}
22+
className="space-y-5 items-start border border-black-50 p-5 rounded-lg group w-full h-auto flex flex-col relative overflow-hidden"
23+
>
24+
<div className="flex flex-col gap-y-2 w-full">
25+
<div className="flex w-full justify-between">
26+
<h6 className="text-base text-wrap text-start">
27+
{questionData?.question?.length > 100
28+
? `${questionData.question.slice(0, 100)}...`
29+
: questionData?.question}
30+
</h6>
31+
<Button
32+
variant="accent"
33+
className="size-10"
34+
padding="none"
35+
>
36+
<ArrowUpRight className="size-5 group-hover:rotate-45 duration-300" />
37+
</Button>
5338
</div>
54-
<div className="mt-5 w-full flex justify-between items-end z-10 relative">
55-
<div className="flex gap-4 items-end">
56-
{questionData?.tags?.length
57-
? questionData?.tags?.length > 0 && (
58-
<div className="space-y-0.5 text-start">
59-
<div className="flex items-center gap-1">
60-
<TagDisplay tags={questionData?.tags || []} />
61-
</div>
39+
<div className="text-start text-[10px]">
40+
<p className="font-ubuntu text-sm">
41+
Submissions:{' '}
42+
<span className="font-medium underline">
43+
{questionStats?.totalSubmissions}
44+
</span>
45+
</p>
46+
</div>
47+
</div>
48+
<div className="mt-5 w-full flex justify-between items-end z-10 relative">
49+
<div className="flex gap-4 items-end">
50+
{questionData?.tags?.length
51+
? questionData?.tags?.length > 0 && (
52+
<div className="space-y-0.5 text-start">
53+
<div className="flex items-center gap-1">
54+
<TagDisplay tags={questionData?.tags || []} />
6255
</div>
63-
)
64-
: ''}
65-
</div>
66-
<div className="flex items-center gap-x-3">
67-
{questionData?.difficulty && (
68-
<Chip
69-
text={capitalise(questionData.difficulty)}
70-
color={getQuestionDifficultyColor(questionData.difficulty)}
71-
textColor={getQuestionDifficultyColor(questionData.difficulty)}
72-
ghost
73-
small
74-
/>
75-
)}
76-
{/** question date */}
77-
{questionData?.questionDate && (
78-
<Chip
79-
color="black-100"
80-
text={questionData.questionDate}
81-
border="black-50"
82-
/>
83-
)}
84-
</div>
56+
</div>
57+
)
58+
: ''}
59+
</div>
60+
<div className="flex items-center gap-x-3">
61+
{questionData?.difficulty && (
62+
<Chip
63+
text={capitalise(questionData.difficulty)}
64+
color={getQuestionDifficultyColor(questionData.difficulty)}
65+
textColor={getQuestionDifficultyColor(questionData.difficulty)}
66+
ghost
67+
small
68+
/>
69+
)}
70+
{/** question date */}
71+
{questionData?.questionDate && questionData?.dailyQuestion && (
72+
<Chip
73+
color="black-100"
74+
text={questionData.questionDate}
75+
border="black-50"
76+
/>
77+
)}
8578
</div>
86-
<Grid
87-
size={20}
88-
position="bottom-right"
89-
/>
90-
</Link>
91-
{/* {showAnswerModal && (
92-
<PreviousQuestionAnswerModal
93-
isOpen={showAnswerModal !== undefined}
94-
onClose={() => setShowAnswerModal(undefined)}
95-
userAnswer={showAnswerModal}
96-
questionData={questionData}
97-
/>
98-
)} */}
99-
</>
79+
</div>
80+
</Link>
10081
);
10182
}

‎src/components/statistics/total-question-chart.tsx

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {
99
Card,
1010
CardContent,
1111
CardDescription,
12-
CardFooter,
1312
CardHeader,
1413
CardTitle
1514
} from '@/components/ui/card';
@@ -76,6 +75,15 @@ export default function QuestionChart({
7675
return 'months';
7776
}, [questionData]);
7877

78+
const maxQuestions = useMemo(() => {
79+
return Math.max(...chartData.map((data) => data.questions));
80+
}, [chartData]);
81+
82+
const yAxisDomain = useMemo(() => {
83+
const maxY = Math.ceil(maxQuestions * 1.1); // Add 10% padding
84+
return [0, maxY];
85+
}, [maxQuestions]);
86+
7987
return (
8088
<Card
8189
className="border-black-50 max-h-[28rem]"
@@ -107,15 +115,18 @@ export default function QuestionChart({
107115
config={chartConfig}
108116
className="max-h-80"
109117
style={{
110-
aspectRatio: '9 / 2'
118+
aspectRatio: '10 / 4',
119+
width: '100%'
111120
}}
112121
>
113122
<LineChart
114123
accessibilityLayer
115124
data={chartData}
116125
margin={{
117126
left: 12,
118-
right: 12
127+
right: 12,
128+
top: 20,
129+
bottom: 10
119130
}}
120131
>
121132
<CartesianGrid vertical={false} />
@@ -132,6 +143,7 @@ export default function QuestionChart({
132143
tickFormatter={(value) => `${value}`}
133144
width={30}
134145
tick={{ fill: 'hsl(var(--muted-foreground))' }}
146+
domain={yAxisDomain}
135147
/>
136148
<ChartTooltip
137149
cursor={false}

0 commit comments

Comments
 (0)