Desktop poll code clean up and refinements (#120)

components/poll/desktop-poll/poll-header.tsx

@@ -0,0 +1,80 @@
+import clsx from "clsx";
+import * as React from "react";
+
+import DateCard from "@/components/date-card";
+import { usePoll } from "@/components/poll-context";
+
+import ControlledScrollArea from "./controlled-scroll-area";
+import { usePollContext } from "./poll-context";
+import Score from "./score";
+
+const TimeRange: React.VoidFunctionComponent<{
+  startTime: string;
+  endTime: string;
+  className?: string;
+}> = ({ startTime, endTime, className }) => {
+  return (
+    <div
+      className={clsx(
+        "relative inline-block pr-2 text-right text-xs font-semibold after:absolute after:top-2 after:right-0 after:h-4 after:w-1 after:border-t after:border-r after:border-b after:border-slate-300 after:content-['']",
+        className,
+      )}
+    >
+      <div>{startTime}</div>
+      <div className="text-slate-400">{endTime}</div>
+    </div>
+  );
+};
+
+const PollHeader: React.VoidFunctionComponent = () => {
+  const { options, getParticipantsWhoVotedForOption, highScore } = usePoll();
+  const { activeOptionId, setActiveOptionId, columnWidth } = usePollContext();
+
+  return (
+    <ControlledScrollArea>
+      {options.map((option) => {
+        const { optionId } = option;
+        const numVotes = getParticipantsWhoVotedForOption(optionId).length;
+        return (
+          <div
+            key={optionId}
+            className={clsx(
+              "shrink-0 pt-4 pb-3 text-center transition-colors",
+              {
+                "bg-slate-50": activeOptionId === optionId,
+              },
+            )}
+            style={{ width: columnWidth }}
+            onMouseOver={() => setActiveOptionId(optionId)}
+            onMouseOut={() => setActiveOptionId(null)}
+          >
+            <div>
+              <DateCard
+                day={option.day}
+                dow={option.dow}
+                month={option.month}
+                annotation={
+                  numVotes > 0 ? (
+                    <Score
+                      count={numVotes}
+                      highlight={numVotes > 1 && highScore === numVotes}
+                    />
+                  ) : null
+                }
+              />
+            </div>
+            {option.type === "timeSlot" ? (
+              <TimeRange
+                className="mt-3"
+                startTime={option.startTime}
+                endTime={option.endTime}
+              />
+            ) : null}
+          </div>
+        );
+      })}
+    </ControlledScrollArea>
+  );
+};
+
+export default PollHeader;