Skip to content

Commit e43ef82

Browse files
missopmissop
committed
feat: add quiz-list-item component
1 parent ffa0fe3 commit e43ef82

File tree

6 files changed

+109
-73
lines changed

6 files changed

+109
-73
lines changed

‎src/app/quiz/[id]/questions/[version]/page.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818

1919
import QuizQuestionListView from '#/domain/quiz/views/quiz-question-list';
2020

21-
export default function QuizDetails({ params }) {
21+
export default function QuizVersion({ params }) {
2222
return (
2323
<QuizQuestionListView id={params.id} version={params.version} />
2424
);

‎src/app/quiz/[id]/questions/page.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818

1919
import QuizQuestionListView from '#/domain/quiz/views/quiz-question-list';
2020

21-
export default function QuizDetails({ params }) {
21+
export default function QuizQuestions({ params }) {
2222
return (
2323
<QuizQuestionListView id={params.id} />
2424
);

‎src/domain/quiz/views/quiz/Quiz.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,12 @@ import QuizBannerPic from 'public/images/quiz-banner.svg';
2020
import QuizS1 from 'public/images/quiz-s-1.svg';
2121
import QuizS2 from 'public/images/quiz-s-2.svg';
2222
import QuizS3 from 'public/images/quiz-s-3.svg';
23-
import { useEffect, useState } from 'react';
23+
import { useState } from 'react';
2424

2525
import { ArrowRightIcon } from '@/components/Icons';
2626

2727
import StartOnOpenBuild from '#/domain/learn/widgets/start-on-open-build';
28+
import useMounted from '#/shared/hooks/useMounted';
2829

2930
import QuizList from '../../widgets/quiz-list';
3031

@@ -46,12 +47,12 @@ const Steps = [
4647
export default function Quiz() {
4748
const [activeStep, setActiveStep] = useState(0);
4849

49-
useEffect(() => {
50+
useMounted(() => {
5051
Aos.init({
5152
delay: 100, // values from 0 to 3000, with step 50ms
5253
duration: 800, // values from 0 to 3000, with step 50ms
5354
});
54-
}, []);
55+
});
5556
return (
5657
<div>
5758
<div className="md:flex bg-white md:justify-center pb-14">

‎src/domain/quiz/widgets/quiz-list-item/QuizListItem.js‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
/**
2+
* Copyright 2024 OpenBuild
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import Image from 'next/image';
18+
import Link from 'next/link';
19+
import TrophiesSvg from 'public/images/trophies.svg';
20+
21+
import { markdownToPlainText } from '#/shared/utils/markdown';
22+
import { useMediaUrl } from '#/state/application/hooks';
23+
export default function QuizListItem({ data }) {
24+
const mediaUrl = useMediaUrl();
25+
26+
return (
27+
<Link
28+
href={`/quiz/${data.id}`}
29+
className="p-6 bg-white flex max-md:flex-col gap-4 md:gap-9 mb-4 rounded-xl transition-all hover:shadow-[0_4px_24px_rgba(0,0,0,0.08)]"
30+
>
31+
<div className="relative">
32+
<Image width={370} height={200} src={mediaUrl + data?.img} alt="" className="rounded-xl" />
33+
</div>
34+
<div className="flex flex-col justify-between flex-1">
35+
<div>
36+
<h3 className="text-2xl mb-2">{data?.title}</h3>
37+
<p className="text-base md:mb-2 opacity-60 md:line-clamp-2">{markdownToPlainText(data?.describe)}</p>
38+
{data?.reward_text && (
39+
<div className="flex w-fit pr-2 items-center h-6 bg-[rgba(239,78,22,0.1)] rounded-full max-md:mt-4">
40+
<div className="w-6 h-6 rounded-full flex items-center justify-center bg-[#EF4E16] mr-2">
41+
<Image width={16} height={16} src={TrophiesSvg} alt="Trophies" />
42+
</div>
43+
<p className="text-sm text-[#EF4E16]">{data?.reward_text}</p>
44+
</div>
45+
)}
46+
</div>
47+
<span className="md:hidden -mx-6 h-[1px] bg-[#1A1A1A] opacity-[.06] mt-6 mb-4 scale-y-50" />
48+
<div className="flex justify-between items-center">
49+
<div className="flex items-center text-sm">
50+
<p className="flex items-center">
51+
<Image
52+
width={32}
53+
height={32}
54+
src={mediaUrl + data?.quiz_user.user_avatar}
55+
alt=""
56+
className="rounded-full mr-3"
57+
/>
58+
by&nbsp;
59+
<a href={`/u/${data?.quiz_user?.user_handle}`}>
60+
<strong>{data?.quiz_user.user_nick_name}</strong>
61+
</a>
62+
</p>
63+
<span className="mx-2 opacity-10 text-xl font-light">|</span>
64+
<p>
65+
<strong>{data?.user_num}</strong> builders
66+
</p>
67+
</div>
68+
<span className={'hidden md:inline-flex h-10 w-10 justify-center items-center rounded bg-gray'}>
69+
<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
70+
<path d="M1 12L12 1" stroke={'white'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
71+
<path
72+
d="M2.57143 1H12V10.4286"
73+
stroke={'white'}
74+
strokeWidth="2"
75+
strokeLinecap="round"
76+
strokeLinejoin="round"
77+
/>
78+
</svg>
79+
</span>
80+
</div>
81+
</div>
82+
</Link>
83+
);
84+
}

‎src/domain/quiz/widgets/quiz-list-item/index.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/**
2+
* Copyright 2024 OpenBuild
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
export { default } from './QuizListItem';

‎src/domain/quiz/widgets/quiz-list/QuizList.js‎

Lines changed: 2 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,7 @@
1414
* limitations under the License.
1515
*/
1616

17-
import Image from 'next/image';
18-
import Link from 'next/link';
1917
import { useSearchParams, useRouter } from 'next/navigation';
20-
import TrophiesSvg from 'public/images/trophies.svg';
2118
import { useState } from 'react';
2219
import useSWR from 'swr';
2320
import { useDebouncedCallback } from 'use-debounce';
@@ -27,74 +24,11 @@ import Input from '@/components/Input';
2724
import { OPagination } from '@/components/Pagination';
2825
import { ReactSelect } from '@/components/Select/ReactSelect';
2926
import useMounted from '@/hooks/useMounted';
30-
import { markdownToPlainText } from '@/utils/markdown';
3127
import { fetcher } from '@/utils/request';
3228

3329
import { fetchTeamList } from '#/domain/quiz/repository';
34-
import { useMediaUrl } from '#/state/application/hooks';
3530

36-
function List({ data }) {
37-
const mediaUrl = useMediaUrl();
38-
39-
return (
40-
<Link
41-
href={`/quiz/${data.id}`}
42-
className="p-6 bg-white flex max-md:flex-col gap-4 md:gap-9 mb-4 rounded-xl transition-all hover:shadow-[0_4px_24px_rgba(0,0,0,0.08)]"
43-
>
44-
<div className="relative">
45-
<Image width={370} height={200} src={mediaUrl + data?.img} alt="" className="rounded-xl" />
46-
</div>
47-
<div className="flex flex-col justify-between flex-1">
48-
<div>
49-
<h3 className="text-2xl mb-2">{data?.title}</h3>
50-
<p className="text-base md:mb-2 opacity-60 md:line-clamp-2">{markdownToPlainText(data?.describe)}</p>
51-
{data?.reward_text && (
52-
<div className="flex w-fit pr-2 items-center h-6 bg-[rgba(239,78,22,0.1)] rounded-full max-md:mt-4">
53-
<div className="w-6 h-6 rounded-full flex items-center justify-center bg-[#EF4E16] mr-2">
54-
<Image width={16} height={16} src={TrophiesSvg} alt="Trophies" />
55-
</div>
56-
<p className="text-sm text-[#EF4E16]">{data?.reward_text}</p>
57-
</div>
58-
)}
59-
</div>
60-
<span className="md:hidden -mx-6 h-[1px] bg-[#1A1A1A] opacity-[.06] mt-6 mb-4 scale-y-50" />
61-
<div className="flex justify-between items-center">
62-
<div className="flex items-center text-sm">
63-
<p className="flex items-center">
64-
<Image
65-
width={32}
66-
height={32}
67-
src={mediaUrl + data?.quiz_user.user_avatar}
68-
alt=""
69-
className="rounded-full mr-3"
70-
/>
71-
by&nbsp;
72-
<a href={`/u/${data?.quiz_user?.user_handle}`}>
73-
<strong>{data?.quiz_user.user_nick_name}</strong>
74-
</a>
75-
</p>
76-
<span className="mx-2 opacity-10 text-xl font-light">|</span>
77-
<p>
78-
<strong>{data?.user_num}</strong> builders
79-
</p>
80-
</div>
81-
<span className={'hidden md:inline-flex h-10 w-10 justify-center items-center rounded bg-gray'}>
82-
<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
83-
<path d="M1 12L12 1" stroke={'white'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
84-
<path
85-
d="M2.57143 1H12V10.4286"
86-
stroke={'white'}
87-
strokeWidth="2"
88-
strokeLinecap="round"
89-
strokeLinejoin="round"
90-
/>
91-
</svg>
92-
</span>
93-
</div>
94-
</div>
95-
</Link>
96-
);
97-
}
31+
import QuizListItem from '../quiz-list-item';
9832

9933
const pageSize = 10;
10034

@@ -190,7 +124,7 @@ export default function QuizList() {
190124
) : (
191125
<>
192126
{data?.list.map((i, k) => (
193-
<List key={`quiz-list-${k}`} data={i} />
127+
<QuizListItem key={`quiz-list-${k}`} data={i} />
194128
))}
195129
<OPagination page={page} pageSize={pageSize} total={data?.total} changeCallback={handlePageChange} />
196130
</>

0 commit comments

Comments
 (0)