From b2a2e39e1650af06b629371077b5044a4a1c7334 Mon Sep 17 00:00:00 2001 From: DeveshPatel-14 Date: Sat, 7 Oct 2023 23:46:07 +0530 Subject: [PATCH 1/3] updated lofi UI --- .env | 26 ++++++ components/lofi/MusicPlayer/Controls.tsx | 90 +++++++++++-------- components/lofi/MusicPlayer/index.tsx | 109 ++++++++++++++++------- pages/lofi.tsx | 20 +++-- 4 files changed, 167 insertions(+), 78 deletions(-) create mode 100644 .env diff --git a/.env b/.env new file mode 100644 index 0000000..4eddc0e --- /dev/null +++ b/.env @@ -0,0 +1,26 @@ +NEXT_PUBLIC_SANITY_DATASET=production +NEXT_PUBLIC_SANITY_PROJECT_ID=mlxdtup8 +NEXT_PUBLIC_BASE_URL=http://localhost:3000/ +SANITY_API_TOKEN=skT2G7wl4BFGvOLkELSIrcnFEBG3MyrXC71IJgv5iBOj5yxJx75MjgBzbbTvIwUtckXFIluhN2iEHiV37jNA0EcJmbTkMT1LJKwCNWH3ddJnof3mPQWDoVNggRM4ZCNgTDpbGqvjf4FE7xb5TkkTVUX5Rf1Fp4Z3IWZmlmwkSR2Fa8UdcikH +NEXTAUTH_SECRET=k3yf4g3h2u1t4sr5eh6s7i +NEXTAUTH_URL=http://localhost:3000/ +GOOGLE_CLIENT_ID=618426972732-a7fqd0fdg2aoa8iagu0vb7f6m0sl2hhs.apps.googleusercontent.com +GOOGLE_CLIENT_SECRET=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 +TRACING_ENABLED=false +NEXT_PUBLIC_SOCKET_URL="http://localhost:4000/" +NEXT_PUBLIC_SOCKETIO_URL_2=http://localhost:5000/ +NEXT_PUBLIC_SHAZAM_CORE_RAPID_API_KEY='2d7b7a8dfcmsh5d7d9d777fe58aap127c50jsn3b17984aa2a3' +NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_c2FjcmVkLWdhcmZpc2gtNy5jbGVyay5hY2NvdW50cy5kZXYk +CLERK_SECRET_KEY=sk_test_LPEsuGh4YWMmMpL3t18rOw08KDjht3lBIsCgRq0Hl6 +NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in +NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up +NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/ +NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/ +NEXT_PUBLIC_RAPID_API_KEY=0e8903e27emsh2333e866a960be6p1d76cbjsn8250ba0b208d +NEXT_PUBLIC_TINY=limjfdlb66u3w96h1skw5m93kdvmf55zt4ohb3ol4jeb3q6m +NEXT_PUBLIC_CLIENT_SECRET=505a9fece5074f17b4b9a5edee644089 +NEXT_PUBLIC_CLIENT_ID=db6947afde104dbc94f707562b9c20fc +JWT_SECRET=BQBjHQZbyyIZW-WjQ0TxejxcA9dO4v-CRE3zsHabyeowEWKGhepBwAbAPX1B1cnzZkV15J7KEZXA2pUfAmtc8Hms9TTXuAyQxsCB__qKtHDUteEoTsoipMzsiDXTi2kx9Vz0S1cInDyNsevceq29ivhfV-U3oFCWFtRyknTaEQsH1mCigpn-uXZ5AVD5gSqqPt3mK0Z2e5G40r0HpCJtCLgi1Ld2OufzmzagXiKcv9MY7unDjo5hjthV2UF9rmlAy0E6bUH3FcdtCoSsA7JFqAGZyg +NEXT_PUBLIC_CATTO_KEY=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 +NEXT_PUBLIC_CHAT_KEY=8ef40a21-bcb4-47f3-928e-2b83389392b1 +NEXT_PUBLIC_CHAT_KEY=pk-ihWDwESgKjNoJBbORkgfGDrBGEqnBSCIVwftLcSjoEgIYuFK \ No newline at end of file diff --git a/components/lofi/MusicPlayer/Controls.tsx b/components/lofi/MusicPlayer/Controls.tsx index e0becfa..cefed85 100644 --- a/components/lofi/MusicPlayer/Controls.tsx +++ b/components/lofi/MusicPlayer/Controls.tsx @@ -7,6 +7,8 @@ import { BsShuffle, } from "react-icons/bs"; +import "../../Clock/clock.css"; + const Controls = ({ isPlaying, repeat, @@ -18,50 +20,64 @@ const Controls = ({ handlePrevSong, handleNextSong, }: any) => ( -
- setRepeat((prev: any) => !prev)} - className="hidden sm:block cursor-pointer" - /> - {currentSongs?.length && ( - +
+ setRepeat((prev: any) => !prev)} + className="hidden sm:block cursor-pointer" /> +
+ {currentSongs?.length && ( +
+ +
)} {isPlaying ? ( - +
+ +
) : ( - +
+ +
)} {currentSongs?.length && ( - +
+ +
)} - setShuffle((prev: any) => !prev)} - className="hidden sm:block cursor-pointer" - /> +
+ setShuffle((prev: any) => !prev)} + className="hidden sm:block cursor-pointer" + /> +
); diff --git a/components/lofi/MusicPlayer/index.tsx b/components/lofi/MusicPlayer/index.tsx index 2e839ec..b9b366b 100644 --- a/components/lofi/MusicPlayer/index.tsx +++ b/components/lofi/MusicPlayer/index.tsx @@ -12,7 +12,17 @@ import Seekbar from "./Seekbar"; import Track from "./Track"; import VolumeBar from "./VolumeBar"; -const MusicPlayer = () => { +import { + BsArrowRepeat, + BsFillPauseFill, + BsFillPlayFill, + BsShuffle, +} from "react-icons/bs"; + +import "../../Clock/clock.css"; + +//@ts-ignore +const MusicPlayer = ({ sessionStarted }) => { const { activeSong, currentSongs, currentIndex, isActive, isPlaying } = useSelector((state: any) => state.player); const [duration, setDuration] = useState(0); @@ -58,52 +68,85 @@ const MusicPlayer = () => { }; return ( -
- + {sessionStarted ? ( +
+ {isPlaying ? ( +
+ +
+ ) : ( +
+ +
+ )} + +
+
+
+
+ ) : null} + +
+ {/* -
- - */} + +
+ + {/* setSeekTime(event.target.value)} setSeekTime={setSeekTime} appTime={appTime} - /> - setAppTime(event.target.currentTime)} - onLoadedData={(event: any) => setDuration(event.target.duration)} - /> -
- */} + setAppTime(event.target.currentTime)} + onLoadedData={(event: any) => setDuration(event.target.duration)} + /> +
+ {/* setVolume(event.target.value)} setVolume={setVolume} - /> + /> */} +
); }; diff --git a/pages/lofi.tsx b/pages/lofi.tsx index ac62366..cbe460d 100644 --- a/pages/lofi.tsx +++ b/pages/lofi.tsx @@ -132,7 +132,6 @@ const lofi = ({ users, goals, notes, setLoading }: Props) => { const showNote = () => { setShowModal(true); }; - console.log(notess); const [showAddNotesModal, setShowAddNotesModal] = useState(false); const handleAddingNewNote = () => { @@ -209,13 +208,14 @@ const lofi = ({ users, goals, notes, setLoading }: Props) => { <> {seconds > 0 && ( -
+
)} )} - + + {!sessionStarted && }
{
+ {/* {from-white/10 to-[#2a2a80] backdrop-blur-lg rounded-t-3xl } */} + {activeSong?.title && ( -
- -
- )} + +
+ +
)} + + } /> From 298a48d4aea64c1beaca8495e76bfffc51f3e55c Mon Sep 17 00:00:00 2001 From: DeveshPatel-14 Date: Mon, 9 Oct 2023 18:49:41 +0530 Subject: [PATCH 2/3] updated ui components --- components/Notes/LofiNotes.tsx | 18 +++++++++--------- components/lofi/MusicPlayer/Controls.tsx | 2 +- components/lofi/MusicPlayer/index.tsx | 3 ++- components/lofi/components/Discover.tsx | 4 ++-- pages/lofi.tsx | 10 +++++----- pages/select-categories.tsx | 8 +++----- pages/workspace.tsx | 7 +++++++ 7 files changed, 29 insertions(+), 23 deletions(-) diff --git a/components/Notes/LofiNotes.tsx b/components/Notes/LofiNotes.tsx index e681177..3603765 100644 --- a/components/Notes/LofiNotes.tsx +++ b/components/Notes/LofiNotes.tsx @@ -155,9 +155,9 @@ const LofiNotes = ({ notes, user, setNotes }: any) => {
- -
- + +
+ { {filteredNotes.map((note: any) => ( <> - -
+ +
setShowModal(false)} className="flex justify-end right-2 text-white/30 text-sm font-light cursor-pointer absolute top-2" @@ -227,14 +227,14 @@ const LofiNotes = ({ notes, user, setNotes }: any) => {
{notesshow && ( - +
{ setShowModal(true); setSelectedNote(note.topic); setSelectedNoteData(note.note); }} - className=" bg-white bg-opacity-30 rounded-md border w-64 h-56 overflow-y-scroll border-white border-opacity-50 backdrop-blur-xl p-4 space-y-5 text-neutral-200" + className="btn bg-white bg-opacity-30 rounded-md border w-64 h-56 overflow-y-scroll border-white border-opacity-50 backdrop-blur-xl p-4 space-y-5 text-neutral-200" >

{note.topic}

@@ -252,8 +252,8 @@ const LofiNotes = ({ notes, user, setNotes }: any) => { {showTaskInput && (
{" "} - -
+ +
( -
+
{ }; return ( -
+ // flex-col items-center justify-center w-3/5 h-full ml-[4vw] md:justify-center md:space-y-32 +
{sessionStarted ? (
{isPlaying ? ( diff --git a/components/lofi/components/Discover.tsx b/components/lofi/components/Discover.tsx index 11f4e1d..982d38f 100644 --- a/components/lofi/components/Discover.tsx +++ b/components/lofi/components/Discover.tsx @@ -45,9 +45,9 @@ const Discover = () => {
- +
-
+
{filteredSongs?.map((song: any, i: any) => (
{ {!sessionStarted && } - +
@@ -241,8 +241,8 @@ const lofi = ({ users, goals, notes, setLoading }: Props) => { )}
- -
+ +
{ +const Home = ({ users,next,setNext }: any) => { const router = useRouter(); const { isLoaded, isSignedIn, user } = useUser(); const match = users.filter( - (userss) => userss.email == user?.emailAddresses[0].emailAddress + (userss:any) => userss.email == user?.emailAddresses[0].emailAddress ); const [isNewUser, setIsNewUser] = useState(false); @@ -102,7 +102,6 @@ const Home = ({ users }: Props) => { -
Hi There! @@ -154,13 +153,12 @@ const Home = ({ users }: Props) => {
router.push("/dashboard")} + onClick={() => {router.push("/workspace"); setNext(!next)}} className="bg-cyan-500 p-3 text-white font-semibold rounded-lg mt-20 cursor-pointer" >

Return To User Dashboard

-
); diff --git a/pages/workspace.tsx b/pages/workspace.tsx index 8241740..d906845 100644 --- a/pages/workspace.tsx +++ b/pages/workspace.tsx @@ -39,6 +39,9 @@ import CustomLoader from "../components/CustomLoader"; import Notes from "../components/Notes/Notes"; import { DeleteIcon, XIcon } from "lucide-react"; +import Category from '../pages/select-categories' +import { nextSong } from "../redux/features/playerSlice"; + const ReactQuill = dynamic(import("react-quill"), { ssr: false }); interface Props { users: User[]; @@ -416,8 +419,11 @@ const Home = ({ users, goals, notes, setLoading }: Props) => { // const notes = [1,2,2,3,3,3,3,3,3,3,3,3] + const [onboard,setOnboard] = useState(false); + const [next,setNext] = useState(true); return ( <> + { !onboard ? next?

Welcome to Ownboon ... before going to app we woild lile u to select some categories u follow

: :
{
+} ); }; From adc37e28fec83f49bb91d2e8adc1bd10ea06d1a8 Mon Sep 17 00:00:00 2001 From: DeveshPatel-14 Date: Tue, 10 Oct 2023 22:53:57 +0530 Subject: [PATCH 3/3] updated workspace onboarding --- pages/select-categories.tsx | 21 +- pages/workspace.tsx | 849 +++++++++++++++++++----------------- 2 files changed, 459 insertions(+), 411 deletions(-) diff --git a/pages/select-categories.tsx b/pages/select-categories.tsx index 1e79c71..dedb20e 100644 --- a/pages/select-categories.tsx +++ b/pages/select-categories.tsx @@ -102,10 +102,10 @@ const Home = ({ users,next,setNext }: any) => { -
-
+
+
Hi There! - + Before You continue your experience with{" "} Ownboon , we would like you to follow some categories{" "} @@ -118,7 +118,7 @@ const Home = ({ users,next,setNext }: any) => { placeholder="Search categories..." value={searchInput} onChange={handleSearchInputChange} - className="px-2 py-1 border border-gray-300 rounded" + className="px-2 py-1 border rounded active:border-gray-400 text-md text-white bg-transparent backdrop-blur-3xl font-poppins pageentry border-b border-t-0 border-r-0 border-l-0 border-gray-400" />
@@ -138,15 +138,18 @@ const Home = ({ users,next,setNext }: any) => { )}
-
+

Some of our popular categories

-
+ {/*flex w-full space-x-5*/ } +
{fiveCate.map((cateogry) => (
addCategory(cateogry.name, cateogry.value!)} - className="bg-blue-200/20 cursor-pointer px-1 rounded-lg " + + className="first w-full flex-col bg-[#191919] inline-block md:inline-flex items-center justify-between p-4 rounded-md" >

{cateogry.name}

+

some description if needed

))}
@@ -154,9 +157,9 @@ const Home = ({ users,next,setNext }: any) => {
{router.push("/workspace"); setNext(!next)}} - className="bg-cyan-500 p-3 text-white font-semibold rounded-lg mt-20 cursor-pointer" + className="p-3 text-white font-medium rounded-lg mt-20 cursor-pointer" > -

Return To User Dashboard

+

Lets GO!

diff --git a/pages/workspace.tsx b/pages/workspace.tsx index d906845..48c24a2 100644 --- a/pages/workspace.tsx +++ b/pages/workspace.tsx @@ -14,6 +14,7 @@ import { fetchNotes } from "../utils/fetchNotes"; import toast from "react-hot-toast"; import { UserButton, useUser } from "@clerk/nextjs"; import Head from "next/head"; +import { Modal } from "@nextui-org/react"; import { Button, @@ -39,7 +40,7 @@ import CustomLoader from "../components/CustomLoader"; import Notes from "../components/Notes/Notes"; import { DeleteIcon, XIcon } from "lucide-react"; -import Category from '../pages/select-categories' +import Category from "../pages/select-categories"; import { nextSong } from "../redux/features/playerSlice"; const ReactQuill = dynamic(import("react-quill"), { ssr: false }); @@ -419,449 +420,493 @@ const Home = ({ users, goals, notes, setLoading }: Props) => { // const notes = [1,2,2,3,3,3,3,3,3,3,3,3] - const [onboard,setOnboard] = useState(false); - const [next,setNext] = useState(true); + const [onboard, setOnboard] = useState(false); + const [next, setNext] = useState(true); + //absolute flex justify-center gap-10 p-10 top-20 mt-2 w-[90%] h-[50%] rounded-md shadow-lg bg-[#303030]/10 backdrop-blur-md text-white ring-1 ring-black ring-opacity-5 return ( <> - { !onboard ? next?

Welcome to Ownboon ... before going to app we woild lile u to select some categories u follow

: : -
-
-
-
+ + Welcome to OwnBoon + + + + + + + + + ) : ( + + + + + ) + ) : ( +
+
+
- - -
-
- Ai Schedule Generator -
-
-
- The AI schedule generator analyzes preferences, constraints, - and resources to create optimized schedules, maximizing - efficiency and productivity. -
-
- +
+ + +
+
+ Ai Schedule Generator +
+
+
+ The AI schedule generator analyzes preferences, constraints, + and resources to create optimized schedules, maximizing + efficiency and productivity. +
+
+ +
-
-
-
- Boon Island -
-
load()}> - {/* display the image of the current level of boon island, static image to avoid long loading */} -
- {level < 5 ? ( - - ) : level < 10 ? ( -
+
+
+ Boon Island +
+
load()}> + {/* display the image of the current level of boon island, static image to avoid long loading */} +
+ {level < 5 ? ( -
- ) : level < 21 ? ( - - ) : level < 31 ? ( - - ) : level < 41 ? ( - - ) : level > 51 ? ( - - ) : null} -
-
-
-
-
-
-
-
- + ) : level < 10 ? ( +
+ +
+ ) : level < 21 ? ( + + ) : level < 31 ? ( + + ) : level < 41 ? ( + + ) : level > 51 ? ( + + ) : null}
-
- - +
+
+
+
+
+
+
+ +
+
+ + +
-
- {/*
*/} -
- {filteredNotes.map((note) => ( - <> - -
-
- {selectedNote} - -
-
-
- { - setText(e); - }} - /> - -
handleNoteChange(note._id!)} - className="bg-opacity-30 w-fit mt-16 rounded-lg active:scale-105 bg-white flex p-2 justify-center items-center" - > -
+
+
+ { + setText(e); + }} + /> + +
handleNoteChange(note._id!)} + className="bg-opacity-30 w-fit mt-16 rounded-lg active:scale-105 bg-white flex p-2 justify-center items-center" + > + +
+
+
+
+
{ + setShowModal(true); + console.log("note.topic", note.topic); + setSelectedNote(note.topic); + setSelectedNoteData(note.note); + }} + className="bg-[#212121] w-full h-40 overflow-y-auto p-4 space-y-5 rounded-lg" + > +
+

+ {note.topic} +

+
+
+
- -
{ - setShowModal(true); - console.log("note.topic", note.topic); - setSelectedNote(note.topic); - setSelectedNoteData(note.note); - }} - className="bg-[#212121] w-full h-40 overflow-y-auto p-4 space-y-5 rounded-lg" - > -
-

- {note.topic} -

-
-
-
-
-
- - ))} -
+ + ))} +
- - { - - } - - - -
-
-

- BoonBot -

-
-
-
-
-

- How are you feeling today? -

-
-
- handlechange("Unmotivated")} - color="gradient" - labelColor="warning" - > -

- Unmotivated -

- - handlechange("Great")} - color="gradient" - labelColor="warning" - > -

- Great -

- - + { + + } +
+ + +
+
+

+ BoonBot +

+
+
+
+
+

+ How are you feeling today? +

+
+
+ handlechange("Unmotivated")} + color="gradient" + labelColor="warning" + > +

+ Unmotivated +

+ + handlechange("Great")} + color="gradient" + labelColor="warning" + > +

+ Great +

+ + handlechange("Stressed")} + color="gradient" + labelColor="warning" + > +

+ Stressed +

+ + handlechange("Normal")} + color="gradient" + labelColor="warning" + > +

+ Normal +

+ +
+
+ {empty && "Please Pick one of the options"} +
+
+

+ What do you want to get done? +

+
+ +
+ {empty && "Please enter atleast a sentence"} +
+
+

+ How much time do you have? +

+
+
+ {empty && "Please enter atleast a sentence"}
- {empty && "Please Pick one of the options"} -
-
-

- What do you want to get done? -

-
- +
+

+ Generate Your Roadmap +

+
+
+ + + +
+
- {empty && "Please enter atleast a sentence"} -
-
-

- How much time do you have? -

-
- +
+

+ Here's your schedule +

+ {susdata ? ( +
+
+ <> + {/* @ts-ignore */} + {susdata.roadmap.map((roadmaps: any) => ( +
+ {roadmaps.title} +
+ ))} + +
+
{ + // @ts-ignore + susdata.roadmap.map((roadmaps: any) => { + addGoalDataSchedule(roadmaps.title); + }); + }} + className="mt-5 border w-fit p-2 rounded-lg cursor-pointer" + > + Add to todos +
+
+ ) : null}
- {empty && "Please enter atleast a sentence"}
-
-

- Generate Your Roadmap -

-
-
+
+ {pageposition !== 4 ? ( +
+
+ {pageposition ? ( - + ) : ( -
+ )}
-
-
-

- Here's your schedule -

- {susdata ? ( -
-
- <> - {/* @ts-ignore */} - {susdata.roadmap.map((roadmaps: any) => ( -
- {roadmaps.title} -
- ))} - -
-
{ - // @ts-ignore - susdata.roadmap.map((roadmaps: any) => { - addGoalDataSchedule(roadmaps.title); - }); - }} - className="mt-5 border w-fit p-2 rounded-lg cursor-pointer" - > - Add to todos -
-
- ) : null} -
-
-
- {pageposition !== 4 ? ( -
-
- {pageposition ? ( +
- ) : ( - - )} -
-
- +
-
- ) : ( - "" - )} -
- -
- {boonisland && ( - + ) : ( + "" )} - -
- +
+ +
+ {boonisland && ( + + )} + +
+ +
-
- + +
-
-} + )} ); };