add assessment list

app/javascript/pages/assessment/Assessment.tsx

@@ -1,9 +0,0 @@
-import React from 'react'
-
-export const Assessment = () => {
-    return (
-        <div>
-        <h1>Assessment</h1>
-        </div>
-    )
-}

app/javascript/pages/assessment/AssessmentList.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { AssessmentListItem } from './components/AssessmentListItem'
+import { assessmentMocks } from './mock'
+
+export const AssessmentList = () => {
+    return (
+        <div className="m-auto w-full grid gap-4 mt-4" style={{
+            width: '400px',
+        }}>
+            {assessmentMocks.map((assessment) => (
+                <AssessmentListItem key={assessment.id} assessment={assessment} />
+            ))}
+        </div>
+    )
+}

app/javascript/pages/assessment/components/AssessmentListItem.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Assessment } from '../mock'
+
+type AssessmentListItemProps = {
+    assessment: Assessment;
+}
+
+export const AssessmentListItem = ({ assessment }: AssessmentListItemProps) => {
+    return (
+        <div
+            key={`question-${assessment.id}`}
+            className="mx-1 sm:mx-0 mb-4 sm:mb-0 border-l-8 border-primary-light flex bg-white hover:bg-unifeso-50 rounded shadow hover:shadow-md cursor-pointer group transition-all duration-500"
+        >
+            <div
+                className="flex flex-col w-full px-3 py-2"
+            >
+                <h2>
+                    {assessment.title}
+                </h2>
+                <div className="text-sm text-gray-700 flex flex-col flex-wrap justify-between">
+                    <span>
+                        Gerado em:
+                        {" "}
+                        {assessment.updatedAt}
+                    </span>
+                </div>
+            </div>
+        </div>
+    )
+}

app/javascript/pages/assessment/index.ts

@@ -1 +1 @@
-export * from './Assessment'
+export * from './AssessmentList'

app/javascript/pages/assessment/mock.ts

@@ -0,0 +1,30 @@
+
+export type Assessment = {
+    id: string
+    title: string
+    createdAt: string
+    updatedAt: string
+}
+
+export const assessmentsMock1: Assessment = {
+    id: '1',
+    title: 'Assessment 1',
+    createdAt: '2020-01-01',
+    updatedAt: '2020-01-01',
+}
+
+export const assessmentsMock2: Assessment = {
+    id: '2',
+    title: 'Assessment 2',
+    createdAt: '2020-01-01',
+    updatedAt: '2020-01-01',
+}
+
+export const assessmentsMock3: Assessment = {
+    id: '3',
+    title: 'Assessment 3',
+    createdAt: '2020-01-01',
+    updatedAt: '2020-01-01',
+}
+
+export const assessmentMocks = [assessmentsMock1, assessmentsMock2, assessmentsMock3]