New Calendar event DiscordLinkInput

app/components/Input.tsx

@@ -0,0 +1,18 @@
+import clsx from "clsx";
+
+export function Input({
+  name,
+  leftAddon,
+  className,
+}: {
+  name: string;
+  leftAddon?: string;
+  className?: string;
+}) {
+  return (
+    <div className={clsx("input-container", className)}>
+      {leftAddon ? <div className="input-addon">{leftAddon}</div> : null}
+      <input name={name} />
+    </div>
+  );
+}

app/routes/calendar/new.tsx

@@ -10,6 +10,7 @@ import styles from "~/styles/calendar-new.css";
 import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import { TrashIcon } from "~/components/icons/Trash";
+import { Input } from "~/components/Input";
 
 export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: styles }];
@@ -22,6 +23,7 @@ export default function CalendarNewEventPage() {
         <NameInput />
         <DescriptionTextarea />
         <DatesInput />
+        <DiscordLinkInput />
       </Form>
     </Main>
   );
@@ -30,7 +32,7 @@ export default function CalendarNewEventPage() {
 function NameInput() {
   return (
     <div>
-      <Label htmlFor="country" required>
+      <Label htmlFor="name" required>
         Name
       </Label>
       <input name="name" />
@@ -135,3 +137,12 @@ function DatesInput() {
     </div>
   );
 }
+
+function DiscordLinkInput() {
+  return (
+    <div className="stack items-start">
+      <Label htmlFor="discord">Discord server link</Label>
+      <Input name="discord" leftAddon="https://discord.gg/" />
+    </div>
+  );
+}

app/styles/common.css

@@ -317,6 +317,46 @@ dialog::backdrop {
   margin-block-end: 0.125rem;
 }
 
+.input-container {
+  display: flex;
+  border: 1px solid var(--border);
+  accent-color: var(--theme-secondary);
+  background-color: transparent;
+  border-radius: var(--rounded);
+  color: var(--text);
+  font-size: var(--fonts-sm);
+  outline: none;
+}
+
+.input-container:focus-within {
+  border-color: transparent;
+
+  /* TODO: rectangle on Safari */
+  outline: 2px solid var(--theme);
+}
+
+/* stylelint-disable no-descending-specificity */
+.input-container > input {
+  width: 100%;
+  border: none;
+}
+/* stylelint-enable no-descending-specificity */
+
+.input-container > input:focus-within {
+  outline: none;
+}
+
+.input-addon {
+  display: grid;
+  background-color: var(--bg-lighter);
+  border-radius: var(--rounded) 0 0 var(--rounded);
+  color: var(--text-lighter);
+  font-size: var(--fonts-xs);
+  font-weight: var(--semi-bold);
+  padding-inline: var(--s-2);
+  place-items: center;
+}
+
 .sub-nav__container {
   display: flex;
   flex-wrap: wrap;