feat: add technology button

Author: typeofweb

apps/app/public/icons/add-icon.svg

@@ -1,24 +1,61 @@
 import { ReactElement } from "react";
+import { twMerge } from "tailwind-merge";
 import { ActiveLink } from "../../ActiveLink";
 
 type TechnologyProps = Readonly<{
+	technology: string;
+	technologyTitle: string;
+	icon: ReactElement;
+}>;
+
+export const Technology = ({ technology, technologyTitle, icon }: TechnologyProps) => (
+	<TechnologyLink
+		label={technologyTitle}
+		title={`Wyświetl pytania z kategorii ${technologyTitle}`}
+		href={`/questions/${technology}/1`}
+		activeHref={`/questions/${technology}`}
+		icon={icon}
+	/>
+);
+
+type TechnologyLinkProps = Readonly<{
 	href: string;
 	title: string;
+	label: string;
 	icon: ReactElement;
+	transparent?: boolean;
+	activeHref?: string;
+	target?: string;
 }>;
 
-export const Technology = ({ href, title, icon }: TechnologyProps) => (
-	<ActiveLink
-		className="flex min-h-[85px] min-w-[85px] cursor-pointer flex-col items-center justify-center rounded-lg bg-white shadow-[0px_1px_4px] shadow-neutral-400 transition-colors hover:bg-violet-50 dark:bg-white-dark dark:shadow-neutral-900 hover:dark:bg-violet-900 small-filters:h-14 small-filters:min-h-[unset] small-filters:w-14 small-filters:min-w-[unset] small-filters:[&>svg]:h-7 small-filters:[&>svg]:w-7"
-		activeClassName="border border-primary bg-violet-50 dark:bg-violet-900"
-		title={`Wyświetl pytania z kategorii ${title}`}
-		href={`/questions/${href}/1`}
-		activeHref={`/questions/${href}`}
-		mergeQuery
-	>
-		<span className="text-sm text-neutral-600 dark:text-neutral-200 small-filters:text-xs">
-			{title}
-		</span>
-		{icon}
-	</ActiveLink>
-);
+export const TechnologyLink = ({
+	href,
+	title,
+	label,
+	transparent,
+	activeHref,
+	icon,
+	target,
+}: TechnologyLinkProps) => {
+	return (
+		<ActiveLink
+			className={twMerge(
+				`flex min-h-[85px] min-w-[85px] cursor-pointer flex-col items-center justify-center rounded-lg transition hover:bg-violet-50 hover:dark:bg-violet-900 small-filters:h-14 small-filters:min-h-[unset] small-filters:w-14 small-filters:min-w-[unset] small-filters:[&>svg]:h-7 small-filters:[&>svg]:w-7`,
+				transparent
+					? `hover:shadow-[0px_1px_4px] hover:shadow-neutral-400 hover:dark:bg-white-dark hover:dark:shadow-neutral-900`
+					: `bg-white shadow-[0px_1px_4px] shadow-neutral-400 dark:bg-white-dark dark:shadow-neutral-900`,
+			)}
+			activeClassName="border border-primary bg-violet-50 dark:bg-violet-900"
+			title={title}
+			href={href}
+			activeHref={activeHref}
+			target={target}
+			mergeQuery
+		>
+			<span className="text-sm text-neutral-600 dark:text-neutral-200 small-filters:text-xs">
+				{label}
+			</span>
+			{icon}
+		</ActiveLink>
+	);
+};

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

@@ -7,28 +7,39 @@ 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 { Technology } from "./Technology";
+import { Technology, TechnologyLink } from "./Technology";
 
 const technologyFilters = [
-	{ href: "html", title: "HTML", icon: <HTMLLogo /> },
-	{ href: "css", title: "CSS", icon: <CSSLogo /> },
-	{ href: "js", title: "JS", icon: <JavaScriptLogo /> },
-	{ href: "angular", title: "Angular", icon: <AngularLogo /> },
-	{ href: "react", title: "React", icon: <ReactLogo /> },
-	{ href: "git", title: "Git", icon: <GitLogo /> },
-	{ href: "other", title: "Inne", icon: <OtherLogo /> },
+	{ 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.href} className="pt-1">
+					<li key={tech.technology} className="pt-1">
 						<Technology {...tech} />
 					</li>
 				))}
+				<li className="pt-1">
+					<TechnologyLink
+						href="https://github.com/typeofweb/devfaq/issues/new"
+						icon={<AddIcon className="text-green-700" />}
+						title="Czegoś brakuje? Zasugeruj dodanie nowej technologii"
+						label="Dodaj"
+						target="_blank"
+						transparent={true}
+					/>
+				</li>
 			</ul>
 		</QuestionsSidebarSection>
 	);