wip implemented results page layout with ResultCard component and moc…

…kupdata

apps/web/app/abc/vysledky/fallBackResults.tsx

@@ -0,0 +1,3 @@
+export default function FallBackResults() {
+  return <h1>Fallback results</h1>;
+}

apps/web/app/abc/vysledky/page.tsx

@@ -1,3 +1,128 @@
+"use client";
+import {
+  ArrowIconLeft,
+  ArrowIconRight,
+  ShareIcon,
+} from "@repo/design-system/icons";
+import { Button } from "@repo/design-system/ui";
+import Link from "next/link";
+import ResultCard from "./resultCard";
+
+interface Result {
+  partyShort: string;
+  partyLong: string;
+  result: number;
+}
+
+interface Results {
+  results: Result[];
+}
+
+const data: Results[] = [
+  {
+    results: [
+      {
+        partyShort: "STAN+SOL",
+        partyLong: "STAROSTOVÉ PRO JIŽNÍ MORAVU",
+        result: 89,
+      },
+      {
+        partyShort: "Piráti",
+        partyLong: "Česká pirátská strana",
+        result: 89,
+      },
+      {
+        partyShort: "SOM+Nestran2024",
+        partyLong: "STAROSTOVÉ PRO JIŽNÍ MORAVU",
+        result: 30,
+      },
+      {
+        partyShort: "SOM+Nestran2024",
+        partyLong: "STAROSTOVÉ PRO JIŽNÍ MORAVU",
+        result: 15,
+      },
+      {
+        partyShort: "KDU+ODS+TOP 09",
+        partyLong: "SPOLU - ODS, KDU-ČSL, TOP 09",
+        result: 6,
+      },
+    ],
+  },
+];
+
 export default function Page() {
-  return <h1>Výsledky</h1>;
+  return (
+    <div className="flex min-h-screen flex-col">
+      <header className="sticky top-0 z-10 grid w-full grid-cols-[auto_1fr_auto] items-center gap-2 bg-white p-2  sm:gap-8 sm:p-8">
+        {/* fix link wrap, should be link in style of a button! */}
+        {/*Link to the last question "current quesiton" */}
+        <div className="flex items-center  justify-self-start">
+          <Link className="flex items-center" href="/abc/rekapitulace">
+            <Button
+              hasIcon
+              icon={ArrowIconLeft}
+              iconPosition="left"
+              kind="link"
+              fitContent
+              size="auto"
+            />
+          </Link>
+        </div>
+
+        {/* replace with typo compoment */}
+        <div className="justify-self-center sm:mr-auto">
+          <h2 className="text-3xl font-bold tracking-snug text-neutral-strong sm:text-5xl">
+            Moje shoda
+          </h2>
+        </div>
+
+        {/* twmerge button fix here */}
+        <div className="flex items-center gap-4 sm:justify-self-end">
+          <Button
+            hasIcon
+            size="auto"
+            kind="link"
+            iconPosition="left"
+            fitContent
+            icon={ShareIcon}
+          >
+            Sdílet
+          </Button>
+          {/* fix link wrap, should be link in style of a button! */}
+          <div></div>
+          <Link className="hidden sm:inline" href="/abc/vysledky">
+            <Button
+              hasIcon
+              kind="filled"
+              size="default"
+              color="primary"
+              iconPosition="right"
+              fitContent
+              icon={ArrowIconRight}
+            >
+              {/* margin or gap? */}
+              Porovnat odpovědi
+            </Button>
+          </Link>
+        </div>
+      </header>
+      <main className="grid grid-cols-1 justify-center gap-4 p-4 min-[701px]:grid-cols-[clamp(32rem,50vw,48rem)]">
+        {/* cards wrapper */}
+        <div className="flex flex-col gap-4 ">
+          {data[0]?.results.map((result, index) => (
+            <ResultCard
+              key={index}
+              cardNumber={index + 1}
+              isFirst={index === 0}
+              results={result}
+            />
+          ))}
+        </div>
+      </main>
+    </div>
+  );
 }
+
+// TODO
+// 1. Main layout
+// 2. Fallback layout

apps/web/app/abc/vysledky/resultCard.tsx

@@ -0,0 +1,64 @@
+import { Card, ProgressBar } from "@repo/design-system/ui";
+
+type Props = {
+  cardNumber?: number;
+  isFirst?: boolean;
+  results?: any;
+};
+
+export default function ResultCard({ cardNumber, isFirst, results }: Props) {
+  const { partyShort, partyLong, result } = results;
+
+  return (
+    <Card
+      shadow="default"
+      corner="topLeft"
+      className="flex max-w-full items-center gap-2 p-customMobile sm:p-customDesktop"
+    >
+      {/* avatar */}
+      <div className="flex items-center justify-center">
+        {/* circle */}
+        <div
+          className={` ${isFirst ? "size-10 bg-primary-strong min-[700px]:size-[calc(3*1.5rem)]" : "size-[calc(2*1rem)] bg-primary min-[700px]:size-14"} flex items-center justify-center rounded-full`}
+        >
+          <p
+            className={`${isFirst ? "text-base text-white min-[700px]:text-xl" : "text-sm text-neutral min-[700px]:text-base"} font-semibold min-[700px]:text-xl`}
+          >
+            {cardNumber}.
+          </p>
+        </div>
+      </div>
+      {/* party, percents wrapper */}
+      <div className="flex flex-col gap-4">
+        {/* name short */}
+        <div>
+          <strong>
+            <p
+              className={`${isFirst ? "text-base min-[700px]:text-3xl " : "text-sm min-[700px]:text-base"} font-bold text-neutral  min-[700px]:text-black`}
+            >
+              {partyShort}
+            </p>
+          </strong>
+        </div>
+        {/* progress bar */}
+        <ProgressBar progress={result} />
+        {/* party wrapper */}
+        <div>
+          <p className="text-neutral">{partyLong}</p>
+        </div>
+      </div>
+
+      {/* percent wrapper */}
+      <p
+        className={`${isFirst ? "text-3xl min-[700px]:text-5xl " : "text-base min-[700px]:text-3xl"} ml-auto  font-bold text-neutral-strong`}
+      >
+        {result}%
+      </p>
+    </Card>
+  );
+}
+
+// TODO:
+// 1. Fix custom paddings behaviour on card (desktop)
+// 2. Simplify structure (toggle behaviour content order), if possible
+// 3. Percentage problem fix!

packages/design-system/src/icons/index.ts

@@ -18,3 +18,4 @@ export * from "./blueCheckIcon";
 export * from "./redCrossIcon";
 export * from "./percentageIcon";
 export * from "./closeIcon";
+export * from "./shareIcon";

packages/design-system/src/icons/shareIcon.tsx

@@ -0,0 +1,18 @@
+export function ShareIcon(
+  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>,
+) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      {props.children}
+      <path
+        d="M18 16.08C17.24 16.08 16.56 16.38 16.04 16.85L8.91 12.7C8.96 12.47 9 12.24 9 12S8.96 11.53 8.91 11.3L15.96 7.19C16.5 7.69 17.21 8 18 8C19.66 8 21 6.66 21 5S19.66 2 18 2 15 3.34 15 5C15 5.24 15.04 5.47 15.09 5.7L8.04 9.81C7.5 9.31 6.79 9 6 9C4.34 9 3 10.34 3 12S4.34 15 6 15C6.79 15 7.5 14.69 8.04 14.19L15.16 18.34C15.11 18.55 15.08 18.77 15.08 19C15.08 20.61 16.39 21.91 18 21.91S20.92 20.61 20.92 19C20.92 17.39 19.61 16.08 18 16.08M18 4C18.55 4 19 4.45 19 5S18.55 6 18 6 17 5.55 17 5 17.45 4 18 4M6 13C5.45 13 5 12.55 5 12S5.45 11 6 11 7 11.45 7 12 6.55 13 6 13M18 20C17.45 20 17 19.55 17 19S17.45 18 18 18 19 18.45 19 19 18.55 20 18 20Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+}

packages/design-system/src/ui/progress/progressBar.tsx

@@ -23,7 +23,7 @@ const ProgressBar = ({ progress, color }: Props): JSX.Element => {
 
   return (
     <div
-      className="k1-h-0.5 k1-w-full k1-overflow-hidden k1-rounded-full k1-bg-neutral lg:k1-h-1.5"
+      className="k1-h-1.5 k1-w-full k1-overflow-hidden k1-rounded-full k1-bg-neutral"
       role="progressbar"
       aria-valuenow={width}
       aria-valuemin={0}