Skip to content

Commit b61161f

Browse files
authored
feat(app): add technology to question item (#485)
* feat(app): add technology to question item * feat(app): add right section to question item
1 parent 43cd4bc commit b61161f

File tree

7 files changed

+64
-29
lines changed

7 files changed

+64
-29
lines changed

apps/app/src/components/AdminPanel/AdminPanelQuestionsList.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { memo, use } from "react";
22
import { serializeQuestionToMarkdown } from "../../lib/question";
33
import { QuestionItem } from "../QuestionItem/QuestionItem";
44
import type { APIQuestion } from "../../types";
5+
import { QuestionTechnology } from "../QuestionItem/QuestionTechnology";
56
import { AdminPanelQuestionLeftSection } from "./AdminPanelQuestionLeftSection";
67

78
type AdminPanelQuestionsListProps = Readonly<{
@@ -33,6 +34,7 @@ export const AdminPanelQuestionsList = memo(
3334
refetchQuestions={refetchQuestions}
3435
/>
3536
}
37+
rightSection={<QuestionTechnology technology={question._categoryId} />}
3638
{...question}
3739
/>
3840
</li>

apps/app/src/components/QuestionItem/QuestionItem.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ type QuestionItemProps = Readonly<{
1313
technology: Technology;
1414
acceptedAt?: string;
1515
leftSection?: ReactNode;
16+
rightSection?: ReactNode;
1617
}>;
1718

1819
export const QuestionItem = ({
@@ -22,6 +23,7 @@ export const QuestionItem = ({
2223
technology,
2324
acceptedAt,
2425
leftSection,
26+
rightSection,
2527
}: QuestionItemProps) => {
2628
const creationDate = acceptedAt ? new Date(acceptedAt) : null;
2729

@@ -33,6 +35,7 @@ export const QuestionItem = ({
3335
{leftSection}
3436
<MarkdownContent source={mdxContent} />
3537
<div className="mt-1 flex min-w-max flex-col items-center md:ml-4 md:items-end">
38+
{rightSection}
3639
<QuestionLevel level={level} />
3740
<meta itemProp="keywords" content={[level, technology].join(", ")} />
3841
{creationDate && (
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { technologiesLabels, Technology } from "../../lib/technologies";
2+
import { TechnologyIcon } from "../TechnologyIcon";
3+
4+
type QuestionTechnologyProps = Readonly<{
5+
technology: Technology;
6+
}>;
7+
8+
export const QuestionTechnology = ({ technology }: QuestionTechnologyProps) => (
9+
<div className="mb-3 flex flex-col items-center">
10+
<span className="text-sm text-neutral-600 dark:text-neutral-200">
11+
{technologiesLabels[technology]}
12+
</span>
13+
<TechnologyIcon technology={technology} className="mt-0.5 h-8 w-8" />
14+
</div>
15+
);

apps/app/src/components/QuestionsSidebar/TechnologyFilter/Technology.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
import { ReactElement } from "react";
22
import { twMerge } from "tailwind-merge";
3+
import { technologiesLabels, Technology as TechnologyType } from "../../../lib/technologies";
34
import { ActiveLink } from "../../ActiveLink";
5+
import { TechnologyIcon } from "../../TechnologyIcon";
46

57
type TechnologyProps = Readonly<{
6-
technology: string;
7-
technologyTitle: string;
8-
icon: ReactElement;
8+
technology: TechnologyType;
99
}>;
1010

11-
export const Technology = ({ technology, technologyTitle, icon }: TechnologyProps) => (
11+
export const Technology = ({ technology }: TechnologyProps) => (
1212
<TechnologyLink
13-
label={technologyTitle}
14-
title={`Wyświetl pytania z kategorii ${technologyTitle}`}
13+
label={technologiesLabels[technology]}
14+
title={`Wyświetl pytania z kategorii ${technologiesLabels[technology]}`}
1515
href={`/questions/${technology}/1`}
1616
activeHref={`/questions/${technology}`}
17-
icon={icon}
17+
icon={<TechnologyIcon technology={technology} />}
1818
/>
1919
);
2020

apps/app/src/components/QuestionsSidebar/TechnologyFilter/TechnologyFilter.tsx

Lines changed: 4 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,15 @@
1-
import { twMerge } from "tailwind-merge";
21
import { QuestionsSidebarSection } from "../QuestionsSidebarSection";
3-
import HTMLLogo from "../../../../public/icons/html5-logo.svg";
4-
import CSSLogo from "../../../../public/icons/css3-logo.svg";
5-
import JavaScriptLogo from "../../../../public/icons/javascript-logo.svg";
6-
import AngularLogo from "../../../../public/icons/angularjs-logo.svg";
7-
import ReactLogo from "../../../../public/icons/reactjs-logo.svg";
8-
import GitLogo from "../../../../public/icons/git-logo.svg";
9-
import OtherLogo from "../../../../public/icons/other-logo.svg";
102
import AddIcon from "../../../../public/icons/add-icon.svg";
11-
3+
import { technologies } from "../../../lib/technologies";
124
import { Technology, TechnologyLink } from "./Technology";
135

14-
const technologyFilters = [
15-
{ technology: "html", technologyTitle: "HTML", icon: <HTMLLogo /> },
16-
{ technology: "css", technologyTitle: "CSS", icon: <CSSLogo /> },
17-
{ technology: "js", technologyTitle: "JS", icon: <JavaScriptLogo /> },
18-
{ technology: "angular", technologyTitle: "Angular", icon: <AngularLogo /> },
19-
{ technology: "react", technologyTitle: "React", icon: <ReactLogo /> },
20-
{ technology: "git", technologyTitle: "Git", icon: <GitLogo /> },
21-
{ technology: "other", technologyTitle: "Inne", icon: <OtherLogo /> },
22-
] as const;
23-
246
export const TechnologyFilter = () => {
257
return (
268
<QuestionsSidebarSection title="Wybierz technologię">
279
<ul className="flex justify-between gap-x-4 overflow-x-auto px-4 pb-4 sm:flex-wrap sm:gap-x-0 sm:gap-y-5 sm:overflow-x-visible sm:p-0 small-filters:gap-y-2">
28-
{technologyFilters.map((tech) => (
29-
<li key={tech.technology} className="pt-1">
30-
<Technology {...tech} />
10+
{technologies.map((technology) => (
11+
<li key={technology} className="pt-1">
12+
<Technology technology={technology} />
3113
</li>
3214
))}
3315
<li className="pt-1">

apps/app/src/components/SingleQuestion.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Question } from "../types";
44
import { useGetQuestionVotesById } from "../hooks/useGetQuestionVotesById";
55
import { QuestionItem } from "./QuestionItem/QuestionItem";
66
import { QuestionVoting } from "./QuestionsList/QuestionVoting";
7+
import { QuestionTechnology } from "./QuestionItem/QuestionTechnology";
78

89
type SingleQuestionProps = Readonly<{
910
question: Question;
@@ -31,6 +32,7 @@ export const SingleQuestion = ({
3132
}}
3233
/>
3334
}
35+
rightSection={<QuestionTechnology technology={_categoryId} />}
3436
/>
3537
);
3638
};
Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
2+
import { ComponentType, HTMLAttributes } from "react";
3+
import { Technology } from "../lib/technologies";
4+
import HTMLLogo from "../../public/icons/html5-logo.svg";
5+
import CSSLogo from "../../public/icons/css3-logo.svg";
6+
import JavaScriptLogo from "../../public/icons/javascript-logo.svg";
7+
import AngularLogo from "../../public/icons/angularjs-logo.svg";
8+
import ReactLogo from "../../public/icons/reactjs-logo.svg";
9+
import GitLogo from "../../public/icons/git-logo.svg";
10+
import OtherLogo from "../../public/icons/other-logo.svg";
11+
12+
const icons: Record<Technology, ComponentType<HTMLAttributes<HTMLElement>>> = {
13+
html: HTMLLogo,
14+
css: CSSLogo,
15+
js: JavaScriptLogo,
16+
angular: AngularLogo,
17+
react: ReactLogo,
18+
git: GitLogo,
19+
other: OtherLogo,
20+
};
21+
22+
type TechnologyIconProps = Readonly<{
23+
technology: Technology;
24+
className?: string;
25+
}>;
26+
27+
export const TechnologyIcon = ({ technology, className }: TechnologyIconProps) => {
28+
const Icon = icons[technology];
29+
30+
return <Icon className={className} />;
31+
};

0 commit comments

Comments
 (0)