Merge pull request #75 from LucianPetri/prettier-userchoice

Prettier User Choice on index page

website/src/components/TaskSelection/TaskOption.tsx

@@ -0,0 +1,39 @@
+import { Card, CardBody, Flex, Heading } from "@chakra-ui/react";
+import Image from "next/image";
+import Link from "next/link";
+
+export type OptionProps = {
+  img: string;
+  alt: string;
+  title: string;
+  link: string;
+};
+
+export const TaskOption = (props: OptionProps) => {
+  const { alt, img, title, link } = props;
+  return (
+    <Link href={link}>
+      <Card
+        maxW="300"
+        minW="300"
+        minH="300"
+        maxH="300"
+        className="transition ease-in-out duration-500 sm:grayscale hover:grayscale-0"
+      >
+        <CardBody width="full" height="full">
+          <Flex direction="column" alignItems="center" justifyContent="center">
+            <Image src={img} alt={alt} width={200} height={200} />
+            <Heading
+              mt={-10}
+              className="bg-gradient-to-r from-indigo-600 via-sky-400 to-indigo-700 bg-clip-text tracking-tight text-transparent"
+              textAlign="center"
+              fontSize="3xl"
+            >
+              {title}
+            </Heading>
+          </Flex>
+        </CardBody>
+      </Card>
+    </Link>
+  );
+};

website/src/components/TaskSelection/TaskOptions.tsx

@@ -0,0 +1,23 @@
+import { Divider, Flex, Heading } from "@chakra-ui/react";
+import React from "react";
+
+export type TaskOptionsProps = {
+  title: string;
+  children: JSX.Element | JSX.Element[];
+};
+
+export const TaskOptions = (props: TaskOptionsProps) => {
+  const { title, children } = props;
+  return (
+    <Flex gap={10} wrap="wrap" justifyContent="center">
+      <Heading
+        className="bg-gradient-to-r from-indigo-600 via-sky-400 to-indigo-700 bg-clip-text tracking-tight text-transparent"
+        fontSize="5xl"
+      >
+        {title}
+      </Heading>
+      <Divider mt={-8} />
+      {children}
+    </Flex>
+  );
+};

website/src/components/TaskSelection/TaskSelection.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { TaskOptions } from "./TaskOptions";
+import { Flex } from "@chakra-ui/react";
+import { TaskOption } from "./TaskOption";
+
+export const TaskSelection = () => {
+  return (
+    <Flex gap={10} wrap="wrap" justifyContent="space-evenly" width="full" height="full" alignItems={"center"}>
+      <TaskOptions key="create" title="Create">
+        <TaskOption
+          alt="Summarize Stories"
+          img="/images/logos/logo.svg"
+          title="Summarize stories"
+          link="/summarize/story"
+        />
+        <TaskOption alt="Reply as User" img="/images/logos/logo.svg" title="Reply as User" link="/create/user_reply" />
+        <TaskOption
+          alt="Reply as Assistant"
+          img="/images/logos/logo.svg"
+          title="Reply as Assistant"
+          link="/create/assistant_reply"
+        />
+      </TaskOptions>
+      <TaskOptions key="evaluate" title="Evaluate">
+        <TaskOption alt="Rate Prompts" img="/images/logos/logo.svg" title="Rate Prompts" link="/grading/grade-output" />
+      </TaskOptions>
+    </Flex>
+  );
+};

website/src/components/TaskSelection/index.ts

@@ -0,0 +1,3 @@
+export { TaskSelection } from "./TaskSelection";
+export { TaskOptions } from "./TaskOptions";
+export { TaskOption } from "./TaskOption";

website/src/pages/index.tsx

@@ -1,16 +1,11 @@
 import { useSession } from "next-auth/react";
-
 import Head from "next/head";
-import Link from "next/link";
-import { Button, Input, Stack } from "@chakra-ui/react";
-
 import { CallToAction } from "../components/CallToAction";
 import { Faq } from "../components/Faq";
 import { Footer } from "../components/Footer";
 import { Header } from "../components/Header";
 import { Hero } from "../components/Hero";
-
-import styles from "../styles/Home.module.css";
+import { TaskSelection } from "../components/TaskSelection";
 
 export default function Home() {
   const { data: session } = useSession();
@@ -46,19 +41,8 @@ export default function Home() {
         />
       </Head>
       <Header />
-      <main className="h-3/4  z-0 bg-white flex flex-col items-center justify-center gap-2">
-        <Button size="lg" colorScheme="blue" className="drop-shadow">
-          <Link href="/grading/grade-output">Rate a prompt and output now</Link>
-        </Button>
-        <Button size="lg" colorScheme="blue" className="drop-shadow">
-          <Link href="/summarize/story">Summarize a story</Link>
-        </Button>
-        <Button size="lg" colorScheme="blue" className="drop-shadow">
-          <Link href="/create/user_reply">Reply as a user</Link>
-        </Button>
-        <Button size="lg" colorScheme="blue" className="drop-shadow">
-          <Link href="/create/assistant_reply">Reply as the assistant</Link>
-        </Button>
+      <main className="h-3/4 m-20 z-0 bg-white flex flex-col items-center justify-center gap-2">
+        <TaskSelection />
       </main>
       <Footer />
     </>