feat(app): add question item (#385)

* feat(app): add question item

* feat(app): add intl utils

* refactor(app): QuestionItem refactor

* refactor(app): change creationDate type to Date

* refactor(app): change prop name

* refactor(app): move date formatting into utility function

* refactor(app): change heading level

* feat(app): add QuestionItem story

Author: AdiPol1359

apps/app/src/app/foo/page.tsx

@@ -1,3 +1,32 @@
+import { QuestionItem } from "../../components/QuestionItem/QuestionItem";
+
 export default function FooPage() {
-	return <div>siema</div>;
+	return (
+		<div className="flex flex-col gap-y-10 p-10">
+			<QuestionItem
+				title="Co się stanie gdy EventEmitter wyemituje event 'error', a nic na niego nie
+				nasłuchuje?"
+				level="junior"
+				creationDate={new Date("2023-01-01")}
+				votes={1}
+				voted={false}
+			/>
+			<QuestionItem
+				title="Co się stanie gdy EventEmitter wyemituje event 'error', a nic na niego nie
+				nasłuchuje?"
+				level="mid"
+				creationDate={new Date("2023-01-01")}
+				votes={2}
+				voted={true}
+			/>
+			<QuestionItem
+				title="Co się stanie gdy EventEmitter wyemituje event 'error', a nic na niego nie
+				nasłuchuje?"
+				level="senior"
+				creationDate={new Date("2023-01-01")}
+				votes={3}
+				voted={true}
+			/>
+		</div>
+	);
 }

apps/app/src/components/QuestionItem/QuestionItem.stories.ts

@@ -0,0 +1,35 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { QuestionItem } from "./QuestionItem";
+
+const meta: Meta<typeof QuestionItem> = {
+	title: "QuestionItem",
+	component: QuestionItem,
+	args: {
+		title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+		creationDate: new Date(),
+		votes: 1,
+		voted: true,
+	},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof QuestionItem>;
+
+export const Junior: Story = {
+	args: {
+		level: "junior",
+	},
+};
+
+export const Mid: Story = {
+	args: {
+		level: "mid",
+	},
+};
+
+export const Senior: Story = {
+	args: {
+		level: "senior",
+	},
+};

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

@@ -0,0 +1,26 @@
+import Link from "next/link";
+import { format } from "../../utils/intl";
+import { QuestionLevel } from "./QuestionLevel";
+import { QuestionVoting } from "./QuestionVoting";
+import type { Level } from "./QuestionLevel";
+
+type QuestionItemProps = Readonly<{
+	title: string;
+	votes: number;
+	voted: boolean;
+	level: Level;
+	creationDate: Date;
+}>;
+
+export const QuestionItem = ({ title, votes, voted, level, creationDate }: QuestionItemProps) => (
+	<article className="flex h-36 bg-white p-5 text-sm text-gray-500 shadow-md">
+		<QuestionVoting votes={votes} voted={voted} />
+		<h3 className="grow">{title}</h3>
+		<div className="ml-4 flex min-w-max flex-col items-end">
+			<QuestionLevel level={level} />
+			<Link href="#" className="mt-3 text-xs underline">
+				<time dateTime={creationDate.toISOString()}>{format(creationDate)}</time>
+			</Link>
+		</div>
+	</article>
+);

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

@@ -0,0 +1,20 @@
+import { twMerge } from "tailwind-merge";
+
+const levelStyles = {
+	junior: "bg-[#499dff]",
+	mid: "bg-[#27be31]",
+	senior: "bg-[#ffb90b]",
+};
+
+export type Level = keyof typeof levelStyles;
+
+export const QuestionLevel = ({ level }: { readonly level: Level }) => (
+	<span
+		className={twMerge(
+			"w-20 rounded-full text-center capitalize leading-8 text-white",
+			levelStyles[level],
+		)}
+	>
+		{level}
+	</span>
+);

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

@@ -0,0 +1,36 @@
+import { twMerge } from "tailwind-merge";
+import { pluralize } from "../../utils/intl";
+
+type QuestionVotingProps = Readonly<{
+	votes: number;
+	voted: boolean;
+}>;
+
+const votesPluralize = pluralize("głos", "głosy", "głosów");
+
+export const QuestionVoting = ({ votes, voted }: QuestionVotingProps) => {
+	return (
+		<button
+			className={twMerge(
+				"mr-4 flex h-fit items-center gap-x-1.5 text-gray-300 transition-colors",
+				voted && "text-primary",
+			)}
+			type="button"
+			aria-label={`To pytanie ma ${votes} ${votesPluralize(votes)}. Kliknij, aby ${
+				voted ? "usunąć" : "dodać"
+			} swój głos.`}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				version="1.1"
+				width="15"
+				height="13"
+				fill="currentColor"
+				className={twMerge("transition-transform duration-300", voted ? "rotate-180" : "rotate-0")}
+			>
+				<polygon points="7.5,0 15,13 0,13" />
+			</svg>
+			{votes}
+		</button>
+	);
+};

apps/app/src/utils/intl.ts

@@ -0,0 +1,23 @@
+const LOCALE = "pl-PL";
+
+const dateFormat = new Intl.DateTimeFormat(LOCALE, {
+	day: "numeric",
+	month: "long",
+	year: "numeric",
+});
+const rules = new Intl.PluralRules(LOCALE);
+
+export const pluralize = (one: string, few: string, many: string) => (count: number) => {
+	return {
+		zero: many,
+		one,
+		two: few,
+		few,
+		many,
+		other: many,
+	}[rules.select(count)];
+};
+
+export const format = (date: Date) => {
+	return dateFormat.format(date);
+};