First public commit

2025-05-17 02:46:22 +02:00 · 2022-04-12 07:14:28 +01:00 · 2022-04-12 07:14:28 +01:00 · e05cd62e53
commit e05cd62e53
228 changed files with 17717 additions and 0 deletions
--- a/components/home/poll-demo.tsx
+++ b/components/home/poll-demo.tsx
@ -0,0 +1,121 @@
+import { format } from "date-fns";
+import { useTranslation } from "next-i18next";
+import * as React from "react";
+import { useTimeoutFn } from "react-use";
+import DateCard from "../date-card";
+import Score from "../poll/score";
+import UserAvater from "../poll/user-avatar";
+import VoteIcon from "../poll/vote-icon";
+
+const sidebarWidth = 180;
+const participants = [
+  {
+    name: "Reed",
+    color: "bg-sky-400",
+    votes: [0, 2],
+  },
+  {
+    name: "Susan",
+    color: "bg-blue-400",
+    votes: [0, 1, 2],
+  },
+  {
+    name: "Johnny",
+    color: "bg-indigo-400",
+    votes: [2, 3],
+  },
+  {
+    name: "Ben",
+    color: "bg-purple-400",
+    votes: [0, 1, 2, 3],
+  },
+];
+
+const options = ["2022-12-14", "2022-12-15", "2022-12-16", "2022-12-17"];
+
+const PollDemo: React.VoidFunctionComponent = () => {
+  const { t } = useTranslation("app");
+  const [bestOption, setBestOption] = React.useState<number>();
+  useTimeoutFn(() => {
+    setBestOption(2);
+  }, 1500);
+
+  return (
+    <div
+      className="rounded-lg bg-white border shadow-md"
+      style={{ width: 600 }}
+    >
+      <div className="flex border-b shadow-sm">
+        <div
+          className="flex items-center pl-4 pr-2 py-4 shrink-0 font-medium"
+          style={{ width: sidebarWidth }}
+        >
+          <div className="grow h-full flex items-end">
+            {t("participantCount", { count: participants.length })}
+          </div>
+        </div>
+        {options.map((option, i) => {
+          const d = new Date(option);
+          let score = 0;
+          participants.forEach((participant) => {
+            if (participant.votes.includes(i)) {
+              score++;
+            }
+          });
+          return (
+            <div
+              key={i}
+              className="py-4 text-center shrink-0 transition-colors"
+              style={{ width: 100 }}
+            >
+              <DateCard
+                day={format(d, "dd")}
+                dow={format(d, "E")}
+                month={format(d, "MMM")}
+                annotation={
+                  <Score count={score} highlight={i === bestOption} />
+                }
+              />
+            </div>
+          );
+        })}
+      </div>
+      {participants.map((participant, i) => (
+        <div className="flex h-14" key={i}>
+          <div
+            className="flex items-center px-4 shrink-0"
+            style={{ width: sidebarWidth }}
+          >
+            <UserAvater
+              className="mr-2"
+              color={participant.color}
+              name={participant.name}
+            />
+            <span className="truncate" title={participant.name}>
+              {participant.name}
+            </span>
+          </div>
+          <div className="flex">
+            {options.map((_, i) => {
+              return (
+                <div
+                  key={i}
+                  className="justify-center items-center flex shrink-0"
+                  style={{ width: 100 }}
+                >
+                  {participant.votes.some((vote) => vote === i) ? (
+                    <VoteIcon type="yes" />
+                  ) : (
+                    <VoteIcon type="no" />
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default PollDemo;