Merge pull request #749 from rsandb/Welcome-Modal

Basic Welcome Modal
This commit is contained in:
Keith Stevens
2023-01-17 09:34:58 +09:00
committed by GitHub
3 changed files with 46 additions and 7 deletions
@@ -0,0 +1,43 @@
import { Box, Divider, Text, useColorMode } from "@chakra-ui/react";
import { useSession } from "next-auth/react";
export function WelcomeCard() {
const { colorMode } = useColorMode();
const backgroundColor = colorMode === "light" ? "white" : "gray.700";
const titleColor = colorMode === "light" ? "blue.500" : "blue.300";
const { data: session } = useSession();
if (!session) {
return <></>;
}
if (session && session.user && session.user.isNew)
return (
<>
<Box
bgGradient="linear(to-r, blue.300, purple.500)"
borderRadius="xl"
p="1px"
shadow="base"
position="relative"
>
<Box bg={backgroundColor} borderRadius="xl" p="6" pt="4" pr="12">
<Box pb="2">
<Text as="h1" fontWeight="extrabold" fontSize="3xl" color={titleColor}>
Welcome, {session.user.name || "Contributor"}!
</Text>
</Box>
<Box>
<Text>
Open Assistant is an open-source AI assistant that uses and trains advanced language models to
understand and respond to humans.
</Text>
<Divider my="4" />
<Text>Complete tasks to help train the model and earn points.</Text>
</Box>
</Box>
</Box>
</>
);
}
@@ -1,2 +1,3 @@
export { LeaderboardTable } from "./LeaderboardTable";
export { TaskOption } from "./TaskOption";
export { WelcomeCard } from "./WelcomeCard";
+2 -7
View File
@@ -1,16 +1,10 @@
import { Flex } from "@chakra-ui/react";
import Head from "next/head";
import { useSession } from "next-auth/react";
import { LeaderboardTable, TaskOption } from "src/components/Dashboard";
import { LeaderboardTable, TaskOption, WelcomeCard } from "src/components/Dashboard";
import { getDashboardLayout } from "src/components/Layout";
import { TaskCategory } from "src/components/Tasks/TaskTypes";
const Dashboard = () => {
const { data: session } = useSession();
// TODO(#670): Do something more meaningful when the user is new.
console.log(session?.user?.isNew);
return (
<>
<Head>
@@ -18,6 +12,7 @@ const Dashboard = () => {
<meta name="description" content="Chat with Open Assistant and provide feedback." />
</Head>
<Flex direction="column" gap="10">
<WelcomeCard />
<TaskOption displayTaskCategories={[TaskCategory.Tasks]} />
<LeaderboardTable />
</Flex>