Add new events page initial

app/components/Label.tsx

@@ -11,12 +11,20 @@ type LabelProps = Pick<
     current: number;
     max: number;
   };
+  required?: boolean;
 };
 
-export function Label({ valueLimits, children, htmlFor }: LabelProps) {
+export function Label({
+  valueLimits,
+  required,
+  children,
+  htmlFor,
+}: LabelProps) {
   return (
     <div className="label__container">
-      <label htmlFor={htmlFor}>{children}</label>
+      <label htmlFor={htmlFor}>
+        {children} {required && <span className="text-error">*</span>}
+      </label>
       {valueLimits ? (
         <div className={clsx("label__value", lengthWarning(valueLimits))}>
           {valueLimits.current}/{valueLimits.max}

app/constants.ts

@@ -4,6 +4,7 @@ export const DISCORD_MESSAGE_MAX_LENGTH = 2000;
 export const USER_BIO_MAX_LENGTH = DISCORD_MESSAGE_MAX_LENGTH;
 export const PlUS_SUGGESTION_FIRST_COMMENT_MAX_LENGTH = 500;
 export const PlUS_SUGGESTION_COMMENT_MAX_LENGTH = TWEET_LENGTH_MAX_LENGTH;
+export const CALENDAR_EVENT_DESCRIPTION_MAX_LENGTH = DISCORD_MESSAGE_MAX_LENGTH;
 
 export const PLUS_TIERS = [1, 2, 3];
 

app/routes/calendar/index.tsx

@@ -11,6 +11,7 @@ import { z } from "zod";
 import { LinkButton } from "~/components/Button";
 import { db } from "~/db";
 import { useIsMounted } from "~/hooks/useIsMounted";
+import { useUser } from "~/modules/auth";
 import { i18next } from "~/modules/i18n";
 import styles from "~/styles/calendar.css";
 import { joinListToNaturalString } from "~/utils/arrays";
@@ -118,11 +119,17 @@ function fetchEventsOfWeek(args: { week: number; year: number }) {
 }
 
 export default function CalendarPage() {
+  const user = useUser();
   const isMounted = useIsMounted();
 
   return (
     <main className="stack lg">
       <WeekLinks />
+      {user && (
+        <LinkButton to="new" className="calendar__add-new-button">
+          Add new
+        </LinkButton>
+      )}
       {isMounted ? <EventsList /> : <div className="calendar__placeholder" />}
     </main>
   );

app/routes/calendar/new.tsx

@@ -0,0 +1,57 @@
+import { Form } from "@remix-run/react";
+import { Label } from "~/components/Label";
+import { Main } from "~/components/Main";
+import * as React from "react";
+import { CalendarEvent } from "~/db/types";
+import { CALENDAR_EVENT_DESCRIPTION_MAX_LENGTH } from "~/constants";
+
+export default function CalendarNewEventPage() {
+  return (
+    <Main>
+      <Form className="stack md" method="post">
+        <NameInput />
+        <DescriptionTextarea />
+      </Form>
+    </Main>
+  );
+}
+
+function NameInput() {
+  return (
+    <div>
+      <Label htmlFor="country" required>
+        Name
+      </Label>
+      <input name="name" />
+    </div>
+  );
+}
+
+function DescriptionTextarea({
+  initialValue,
+}: {
+  initialValue?: CalendarEvent["description"];
+}) {
+  const [value, setValue] = React.useState(initialValue ?? "");
+
+  return (
+    <div>
+      <Label
+        htmlFor="description"
+        valueLimits={{
+          current: value.length,
+          max: CALENDAR_EVENT_DESCRIPTION_MAX_LENGTH,
+        }}
+      >
+        Description
+      </Label>
+      <textarea
+        id="description"
+        name="description"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        maxLength={CALENDAR_EVENT_DESCRIPTION_MAX_LENGTH}
+      />
+    </div>
+  );
+}

app/routes/u.$identifier/edit.tsx

@@ -132,7 +132,6 @@ function BioTextarea({ initialValue }: { initialValue: User["bio"] }) {
       <textarea
         id="bio"
         name="bio"
-        className="u-edit__bio-textarea"
         data-cy="bio-textarea"
         value={value}
         onChange={(e) => setValue(e.target.value)}

app/styles/calendar.css

@@ -2,6 +2,11 @@
   height: 48rem;
 }
 
+.calendar__add-new-button {
+  margin-inline-start: auto;
+  margin-inline-end: var(--s-8);
+}
+
 .calendar__weeks {
   display: flex;
   align-items: center;

app/styles/common.css

@@ -144,6 +144,9 @@ textarea:not(.plain) {
   overflow-wrap: normal;
   overflow-x: scroll;
   white-space: pre;
+  width: 18rem;
+  max-width: 100%;
+  height: 8rem;
 }
 
 progress {

app/styles/u-edit.css

@@ -8,9 +8,3 @@
 .u-edit__country-select {
   max-width: 10rem;
 }
-
-.u-edit__bio-textarea {
-  width: 18rem;
-  max-width: 100%;
-  height: 8rem;
-}