wip: rekapitulace page, added PercentageIcon component to design syst…

…em/icons

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

@@ -1,12 +1,17 @@
 "use client";
-import { ArrowIconLeft } from "@repo/design-system/icons";
+import {
+  ArrowIconLeft,
+  ArrowIconRight,
+  PercentageIcon,
+} from "@repo/design-system/icons";
 import { Blobs, Button } from "@repo/design-system/ui";
 
 export default function Page() {
   return (
     <>
       <Blobs />
-      <header className="sticky top-0 flex h-20 items-center justify-center bg-white">
+      {/* header */}
+      <header className="sticky top-0 grid grid-cols-[auto_1fr_auto] items-center gap-8 bg-white p-4 sm:justify-center sm:p-8">
         <Button
           hasIcon
           icon={ArrowIconLeft}
@@ -15,146 +20,57 @@ export default function Page() {
           fitContent
           size="auto"
         />
-        <h2>Rekapitulace</h2>
+        {/* replace with typo compoment */}
+        <h2 className="text-5xl  font-bold tracking-snug text-neutral-strong sm:mr-auto">
+          Rekapitulace
+        </h2>
+        {/* twmerge button fix here */}
+        <div className="hidden sm:block">
+          <Button
+            hasIcon
+            kind="filled"
+            size="default"
+            color="primary"
+            iconPosition="right"
+            fitContent
+            icon={ArrowIconRight}
+          >
+            <div className="flex">
+              {/* margin or gap? */}
+              <PercentageIcon className="mr-4 size-6" />
+              Zobrazit výsledky
+            </div>
+          </Button>
+        </div>
       </header>
-      <main>
-        <p>
-          The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum
-          dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-          commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-          velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-          occaecat cupidatat non proident, sunt in culpa qui officia deserunt
-          mollit anim id est laborum." Section 1.10.32 of "de Finibus Bonorum et
-          Malorum", written by Cicero in 45 BC "Sed ut perspiciatis unde omnis
-          iste natus error sit voluptatem accusantium doloremque laudantium,
-          totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et
-          quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-          voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
-          consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
-          Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
-          consectetur, adipisci velit, sed quia non numquam eius modi tempora
-          incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut
-          enim ad minima veniam, quis nostrum exercitationem ullam corporis
-          suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
-          autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
-          nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
-          voluptas nulla pariatur?" 1914 translation by H. Rackham "But I must
-          explain to you how all this mistaken idea of denouncing pleasure and
-          praising pain was born and I will give you a complete account of the
-          system, and expound the actual teachings of the great explorer of the
-          truth, the master-builder of human happiness. No one rejects,
-          dislikes, or avoids pleasure itself, because it is pleasure, but
-          because those who do not know how to pursue pleasure rationally
-          encounter consequences that are extremely painful. Nor again is there
-          anyone who loves or pursues or desires to obtain pain of itself,
-          because it is pain, but because occasionally circumstances occur in
-          which toil and pain can procure him some great pleasure. To take a
-          trivial example, which of us ever undertakes laborious physical
-          exercise, except to obtain some advantage from it? But who has any
-          right to find fault with a man who chooses to enjoy a pleasure that
-          has no annoying consequences, or one who avoids a pain that produces
-          no resultant pleasure?" Section 1.10.33 of "de Finibus Bonorum et
-          Malorum", written by Cicero in 45 BC "At vero eos et accusamus et
-          iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
-          deleniti atque corrupti quos dolores et quas molestias excepturi sint
-          occaecati cupiditate non provident, similique sunt in culpa qui
-          officia deserunt mollitia animi, id est laborum et dolorum fuga. Et
-          harum quidem rerum facilis est et expedita distinctio. Nam libero
-          tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo
-          minus id quod maxime placeat facere possimus, omnis voluptas assumenda
-          est, omnis dolor repellendus. Temporibus autem quibusdam et aut
-          officiis debitis aut rerum necessitatibus saepe eveniet ut et
-          voluptates repudiandae sint et molestiae non recusandae. Itaque earum
-          rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
-          maiores alias consequatur aut perferendis doloribus asperiores
-          repellat." 1914 translation by H. Rackham "On the other hand, we
-          denounce with righteous indignation and dislike men who are so
-          beguiled and demoralized by the charms of pleasure of the moment, so
-          blinded by desire, that they cannot foresee the pain and trouble that
-          are bound to ensue; and equal blame belongs to those who fail in their
-          duty through weakness of will, which is the same as saying through
-          shrinking from toil and pain. These cases are perfectly simple and
-          easy to distinguish. In a free hour, when our power of choice is
-          untrammelled and when nothing prevents our being able to do what we
-          like best, every pleasure is to be welcomed and every pain avoided.
-          But in certain circumstances and owing to the claims of duty or the
-          obligations of business it will frequently occur that pleasures have
-          to be repudiated and annoyances accepted. The wise man therefore
-          always holds in these matters to this principle of selection: he
-          rejects pleasures to secure other greater pleasures, or else he
-          endures pains to avoid worse pains."
-        </p>
-        <p>
-          The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum
-          dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-          commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-          velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-          occaecat cupidatat non proident, sunt in culpa qui officia deserunt
-          mollit anim id est laborum." Section 1.10.32 of "de Finibus Bonorum et
-          Malorum", written by Cicero in 45 BC "Sed ut perspiciatis unde omnis
-          iste natus error sit voluptatem accusantium doloremque laudantium,
-          totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et
-          quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-          voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
-          consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
-          Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
-          consectetur, adipisci velit, sed quia non numquam eius modi tempora
-          incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut
-          enim ad minima veniam, quis nostrum exercitationem ullam corporis
-          suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
-          autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
-          nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
-          voluptas nulla pariatur?" 1914 translation by H. Rackham "But I must
-          explain to you how all this mistaken idea of denouncing pleasure and
-          praising pain was born and I will give you a complete account of the
-          system, and expound the actual teachings of the great explorer of the
-          truth, the master-builder of human happiness. No one rejects,
-          dislikes, or avoids pleasure itself, because it is pleasure, but
-          because those who do not know how to pursue pleasure rationally
-          encounter consequences that are extremely painful. Nor again is there
-          anyone who loves or pursues or desires to obtain pain of itself,
-          because it is pain, but because occasionally circumstances occur in
-          which toil and pain can procure him some great pleasure. To take a
-          trivial example, which of us ever undertakes laborious physical
-          exercise, except to obtain some advantage from it? But who has any
-          right to find fault with a man who chooses to enjoy a pleasure that
-          has no annoying consequences, or one who avoids a pain that produces
-          no resultant pleasure?" Section 1.10.33 of "de Finibus Bonorum et
-          Malorum", written by Cicero in 45 BC "At vero eos et accusamus et
-          iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
-          deleniti atque corrupti quos dolores et quas molestias excepturi sint
-          occaecati cupiditate non provident, similique sunt in culpa qui
-          officia deserunt mollitia animi, id est laborum et dolorum fuga. Et
-          harum quidem rerum facilis est et expedita distinctio. Nam libero
-          tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo
-          minus id quod maxime placeat facere possimus, omnis voluptas assumenda
-          est, omnis dolor repellendus. Temporibus autem quibusdam et aut
-          officiis debitis aut rerum necessitatibus saepe eveniet ut et
-          voluptates repudiandae sint et molestiae non recusandae. Itaque earum
-          rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
-          maiores alias consequatur aut perferendis doloribus asperiores
-          repellat." 1914 translation by H. Rackham "On the other hand, we
-          denounce with righteous indignation and dislike men who are so
-          beguiled and demoralized by the charms of pleasure of the moment, so
-          blinded by desire, that they cannot foresee the pain and trouble that
-          are bound to ensue; and equal blame belongs to those who fail in their
-          duty through weakness of will, which is the same as saying through
-          shrinking from toil and pain. These cases are perfectly simple and
-          easy to distinguish. In a free hour, when our power of choice is
-          untrammelled and when nothing prevents our being able to do what we
-          like best, every pleasure is to be welcomed and every pain avoided.
-          But in certain circumstances and owing to the claims of duty or the
-          obligations of business it will frequently occur that pleasures have
-          to be repudiated and annoyances accepted. The wise man therefore
-          always holds in these matters to this principle of selection: he
-          rejects pleasures to secure other greater pleasures, or else he
-          endures pains to avoid worse pains."
-        </p>
+      <main className="grid grid-cols-[1fr_clamp(32rem,_50vw,_48rem)_1fr] justify-center p-4">
+        {/* grid col 1 */}
+        <div></div>
+        {/* grid col 2 */}
+        <div>
+          {/* replace with typo compoment */}
+          <p className="text-sm leading-tight text-neutral">
+            Zde si můžete projít a případně upravit svoje odpovědi a jejich
+            váhu.
+          </p>
+        </div>
+
+        {/* grid col 3 */}
+        <div></div>
       </main>
+      {/* bottom bar */}
+      <div className="sticky bottom-0 bg-white p-4 sm:hidden">
+        <Button
+          hasIcon
+          kind="filled"
+          size="default"
+          color="primary"
+          iconPosition="right"
+          icon={ArrowIconRight}
+        >
+          Zobrazit výsledky
+        </Button>
+      </div>
     </>
   );
 }

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

@@ -16,3 +16,4 @@ export * from "./detailUpIcon";
 export * from "./forwardIcon";
 export * from "./blueCheckIcon";
 export * from "./redCrossIcon";
+export * from "./percentageIcon";

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

@@ -0,0 +1,18 @@
+export function PercentageIcon(
+  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 2.1 2.1 18l3.7 3.7 15.9-16L18 2.1zm-10 3c0 1.7-1.4 3-3 3s-2.9-1.3-2.9-3S3.4 2.2 5 2.2s3 1.3 3 2.9zm13.7 13.8c0 1.6-1.3 2.9-2.9 2.9-1.6 0-2.9-1.3-2.9-2.9 0-1.6 1.3-2.9 2.9-2.9 1.6-.1 2.9 1.2 2.9 2.9z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+}