feat(app): add technology to question item (#485)

* feat(app): add technology to question item

* feat(app): add right section to question item

Author: AdiPol1359

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

@@ -2,6 +2,7 @@ import { memo, use } from "react";
 import { serializeQuestionToMarkdown } from "../../lib/question";
 import { QuestionItem } from "../QuestionItem/QuestionItem";
 import type { APIQuestion } from "../../types";
+import { QuestionTechnology } from "../QuestionItem/QuestionTechnology";
 import { AdminPanelQuestionLeftSection } from "./AdminPanelQuestionLeftSection";
 
 type AdminPanelQuestionsListProps = Readonly<{
@@ -33,6 +34,7 @@ export const AdminPanelQuestionsList = memo(
 									refetchQuestions={refetchQuestions}
 								/>
 							}
+							rightSection={<QuestionTechnology technology={question._categoryId} />}
 							{...question}
 						/>
 					</li>

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

@@ -13,6 +13,7 @@ type QuestionItemProps = Readonly<{
 	technology: Technology;
 	acceptedAt?: string;
 	leftSection?: ReactNode;
+	rightSection?: ReactNode;
 }>;
 
 export const QuestionItem = ({
@@ -22,6 +23,7 @@ export const QuestionItem = ({
 	technology,
 	acceptedAt,
 	leftSection,
+	rightSection,
 }: QuestionItemProps) => {
 	const creationDate = acceptedAt ? new Date(acceptedAt) : null;
 
@@ -33,6 +35,7 @@ export const QuestionItem = ({
 			{leftSection}
 			<MarkdownContent source={mdxContent} />
 			<div className="mt-1 flex min-w-max flex-col items-center md:ml-4 md:items-end">
+				{rightSection}
 				<QuestionLevel level={level} />
 				<meta itemProp="keywords" content={[level, technology].join(", ")} />
 				{creationDate && (

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

@@ -0,0 +1,15 @@
+import { technologiesLabels, Technology } from "../../lib/technologies";
+import { TechnologyIcon } from "../TechnologyIcon";
+
+type QuestionTechnologyProps = Readonly<{
+	technology: Technology;
+}>;
+
+export const QuestionTechnology = ({ technology }: QuestionTechnologyProps) => (
+	<div className="mb-3 flex flex-col items-center">
+		<span className="text-sm text-neutral-600 dark:text-neutral-200">
+			{technologiesLabels[technology]}
+		</span>
+		<TechnologyIcon technology={technology} className="mt-0.5 h-8 w-8" />
+	</div>
+);

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

@@ -1,20 +1,20 @@
 import { ReactElement } from "react";
 import { twMerge } from "tailwind-merge";
+import { technologiesLabels, Technology as TechnologyType } from "../../../lib/technologies";
 import { ActiveLink } from "../../ActiveLink";
+import { TechnologyIcon } from "../../TechnologyIcon";
 
 type TechnologyProps = Readonly<{
-	technology: string;
-	technologyTitle: string;
-	icon: ReactElement;
+	technology: TechnologyType;
 }>;
 
-export const Technology = ({ technology, technologyTitle, icon }: TechnologyProps) => (
+export const Technology = ({ technology }: TechnologyProps) => (
 	<TechnologyLink
-		label={technologyTitle}
-		title={`Wyświetl pytania z kategorii ${technologyTitle}`}
+		label={technologiesLabels[technology]}
+		title={`Wyświetl pytania z kategorii ${technologiesLabels[technology]}`}
 		href={`/questions/${technology}/1`}
 		activeHref={`/questions/${technology}`}
-		icon={icon}
+		icon={<TechnologyIcon technology={technology} />}
 	/>
 );
 

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

@@ -1,33 +1,15 @@
-import { twMerge } from "tailwind-merge";
 import { QuestionsSidebarSection } from "../QuestionsSidebarSection";
-import HTMLLogo from "../../../../public/icons/html5-logo.svg";
-import CSSLogo from "../../../../public/icons/css3-logo.svg";
-import JavaScriptLogo from "../../../../public/icons/javascript-logo.svg";
-import AngularLogo from "../../../../public/icons/angularjs-logo.svg";
-import ReactLogo from "../../../../public/icons/reactjs-logo.svg";
-import GitLogo from "../../../../public/icons/git-logo.svg";
-import OtherLogo from "../../../../public/icons/other-logo.svg";
 import AddIcon from "../../../../public/icons/add-icon.svg";
-
+import { technologies } from "../../../lib/technologies";
 import { Technology, TechnologyLink } from "./Technology";
 
-const technologyFilters = [
-	{ technology: "html", technologyTitle: "HTML", icon: <HTMLLogo /> },
-	{ technology: "css", technologyTitle: "CSS", icon: <CSSLogo /> },
-	{ technology: "js", technologyTitle: "JS", icon: <JavaScriptLogo /> },
-	{ technology: "angular", technologyTitle: "Angular", icon: <AngularLogo /> },
-	{ technology: "react", technologyTitle: "React", icon: <ReactLogo /> },
-	{ technology: "git", technologyTitle: "Git", icon: <GitLogo /> },
-	{ technology: "other", technologyTitle: "Inne", icon: <OtherLogo /> },
-] as const;
-
 export const TechnologyFilter = () => {
 	return (
 		<QuestionsSidebarSection title="Wybierz technologię">
 			<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">
-				{technologyFilters.map((tech) => (
-					<li key={tech.technology} className="pt-1">
-						<Technology {...tech} />
+				{technologies.map((technology) => (
+					<li key={technology} className="pt-1">
+						<Technology technology={technology} />
 					</li>
 				))}
 				<li className="pt-1">

apps/app/src/components/SingleQuestion.tsx

@@ -4,6 +4,7 @@ import { Question } from "../types";
 import { useGetQuestionVotesById } from "../hooks/useGetQuestionVotesById";
 import { QuestionItem } from "./QuestionItem/QuestionItem";
 import { QuestionVoting } from "./QuestionsList/QuestionVoting";
+import { QuestionTechnology } from "./QuestionItem/QuestionTechnology";
 
 type SingleQuestionProps = Readonly<{
 	question: Question;
@@ -31,6 +32,7 @@ export const SingleQuestion = ({
 					}}
 				/>
 			}
+			rightSection={<QuestionTechnology technology={_categoryId} />}
 		/>
 	);
 };

apps/app/src/components/TechnologyIcon.tsx

@@ -0,0 +1,31 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+import { ComponentType, HTMLAttributes } from "react";
+import { Technology } from "../lib/technologies";
+import HTMLLogo from "../../public/icons/html5-logo.svg";
+import CSSLogo from "../../public/icons/css3-logo.svg";
+import JavaScriptLogo from "../../public/icons/javascript-logo.svg";
+import AngularLogo from "../../public/icons/angularjs-logo.svg";
+import ReactLogo from "../../public/icons/reactjs-logo.svg";
+import GitLogo from "../../public/icons/git-logo.svg";
+import OtherLogo from "../../public/icons/other-logo.svg";
+
+const icons: Record<Technology, ComponentType<HTMLAttributes<HTMLElement>>> = {
+	html: HTMLLogo,
+	css: CSSLogo,
+	js: JavaScriptLogo,
+	angular: AngularLogo,
+	react: ReactLogo,
+	git: GitLogo,
+	other: OtherLogo,
+};
+
+type TechnologyIconProps = Readonly<{
+	technology: Technology;
+	className?: string;
+}>;
+
+export const TechnologyIcon = ({ technology, className }: TechnologyIconProps) => {
+	const Icon = icons[technology];
+
+	return <Icon className={className} />;
+};