done simple FE for home page

eren1106 · Oct 29, 2023 · 1f8d69c · 1f8d69c
1 parent 16c539d
commit 1f8d69c
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 8 deletions.
diff --git a/app/(root)/page.tsx b/app/(root)/page.tsx
@@ -3,7 +3,7 @@
 import HabitCard from '@/components/HabitCard'
 import TaskCard from '@/components/TaskCard'
 import { mockHabits, mockTasks } from '@/constants/mockData'
-import { AddIcon } from '@chakra-ui/icons'
+import { AddIcon, ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons'
 import { Button, Grid, GridItem } from '@chakra-ui/react'
 import React from 'react'
 
@@ -106,24 +106,55 @@ const TodoListContent = () => {
 
 const GoalsContent = () => {
   return (
-    <div>
-      goals
+    <div className='flex flex-col gap-3'>
+      <h2 className='text-lg font-bold'>Goals</h2>
+      <ul className='list-disc list-inside'>
+        <li>Complete reading two books</li>
+        <li>Make shoulder wider</li>
+        <li>Start making short videos</li>
+        <li>Complete Atobits</li>
+        <li>Develop a mobile app and publish to google play</li>
+      </ul>
     </div>
   );
 }
 
 const DoingContent = () => {
   return (
-    <div>
-      doing
+    <div className='flex flex-col gap-3'>
+      <h2 className='text-lg font-bold'>Doing</h2>
+      <p>Doing Atobits Home Page FE</p>
+      <div className='flex justify-end gap-3'>
+        <Button
+          colorScheme=""
+          className='btn-accent'
+          size='sm'
+        >
+          Stop
+        </Button>
+        <Button
+          colorScheme=""
+          className='btn'
+          size='sm'
+        >
+          Done
+        </Button>
+      </div>
     </div>
   );
 }
 
 const NotesContent = () => {
   return (
-    <div>
-      notes
+    <div className='flex flex-col gap-3'>
+      <div className='flex justify-between items-center'>
+        <h2 className='text-lg font-bold'>Notes to yourself</h2>
+        <div className='flex gap-1'>
+          <ChevronLeftIcon className='cursor-pointer' boxSize={5} />
+          <ChevronRightIcon className='cursor-pointer' boxSize={5} />
+        </div>
+      </div>
+      <p>You dont have too many fucks to give about</p>
     </div>
   );
 }

diff --git a/app/globals.css b/app/globals.css
@@ -2,11 +2,21 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer components {
+/* @layer components {
   .btn {
     @apply bg-tertiary;
     @apply hover:bg-tertiary-hover;
   }
+} */
+
+.btn {
+  @apply bg-tertiary;
+  @apply hover:bg-tertiary-hover;
+}
+
+.btn-accent {
+  @apply bg-accent;
+  @apply hover:bg-accent-hover;
 }
 
 .home-card {

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -14,6 +14,7 @@ const config: Config = {
       'primary': '#f7ca88',
       'secondary': '#f9d9a9',
       'accent': '#753422',
+      'accent-hover': '#542515',
       'gray': colors.gray['300'],
       'white': '#ffffff',
       'tertiary': '#ee9611',