- implement awards section

src/components/builder/lists/double/DoubleFieldListItem.js

@@ -65,8 +65,8 @@ const DoubleFieldListItem = ({
   return (
     <div className={styles.container}>
       <div className="flex flex-col">
-        <span className="font-medium">{title}</span>
-        <span className="mt-1 text-sm opacity-75">{subtitle}</span>
+        <span className="font-medium truncate">{title}</span>
+        <span className="mt-1 text-sm opacity-75 truncate">{subtitle}</span>
       </div>
 
       <div className={styles.menu}>

src/components/builder/lists/double/DoubleFieldListItem.module.css

@@ -1,5 +1,5 @@
 .container {
-  @apply flex items-center justify-between border-t border-secondary px-8 py-5;
+  @apply flex items-center justify-between border-t border-secondary px-6 py-5;
 }
 
 .container:first-child {

src/components/builder/lists/triple/TripleFieldListItem.js

@@ -66,10 +66,10 @@ const TripleFieldListItem = ({
   return (
     <div className={styles.container}>
       <div className="grid">
-        <span className="font-medium">{title}</span>
-        <span className="mt-1 text-sm opacity-75">{subtitle}</span>
+        <span className="font-medium truncate">{title}</span>
+        <span className="mt-1 text-sm opacity-75 truncate">{subtitle}</span>
 
-        <span className="w-4/5 mt-6 text-sm opacity-75 truncate">{text}</span>
+        <span className="w-4/5 mt-5 text-sm opacity-75 truncate">{text}</span>
       </div>
 
       <div className={styles.menu}>

src/components/builder/lists/triple/TripleFieldListItem.module.css

@@ -1,5 +1,5 @@
 .container {
-  @apply flex items-center justify-between border-t border-secondary px-8 py-5;
+  @apply flex items-center justify-between border-t border-secondary px-6 py-5;
 }
 
 .container:first-child {

src/components/builder/sections/Awards.js

@@ -0,0 +1,28 @@
+import { get } from "lodash";
+import React from "react";
+import Heading from "../../shared/Heading";
+import List from "../lists/List";
+import TripleFieldListItem from "../lists/triple/TripleFieldListItem";
+
+const Awards = ({ id, name, event, state }) => {
+  const path = `${id}.items`;
+  const items = get(state, path, []);
+
+  return (
+    <section>
+      <Heading>{name}</Heading>
+
+      <List
+        path={path}
+        items={items}
+        event={event}
+        titlePath="title"
+        subtitlePath="awarder"
+        textPath="summary"
+        listItemComponent={TripleFieldListItem}
+      />
+    </section>
+  );
+};
+
+export default Awards;

src/components/shared/Input.js

@@ -18,6 +18,7 @@ const Input = ({
   checked,
   onChange,
   className,
+  isRequired,
   placeholder,
   onDeleteItem,
   showDeleteItemButton,
@@ -42,7 +43,13 @@ const Input = ({
   return (
     <div className={cx(styles.container, className)}>
       <label htmlFor={uuid}>
-        <span>{label}</span>
+        <span>
+          {label}{" "}
+          {isRequired && (
+            <span className="opacity-75 font-normal lowercase">(Required)</span>
+          )}
+        </span>
+
         {type === "textarea" ? (
           <div className="flex flex-col">
             <textarea