Skip to content

MVP2 Frontend basically completed by Tiny_Rabbit. #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Sun-Shine0217 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

MVP2 Frontend basically completed by Tiny_Rabbit. #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ea15207
MVP2 frontend basically completed by Tiny_Rabbit
Sun-Shine0217 Aug 22, 2024
3f9e1ec
Merge pull request #2 from Sun-Shine0217/tiny_rabbit
Sun-Shine0217 Aug 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14,304 changes: 8,052 additions & 6,252 deletions pnpm-lock.yaml
View file
Open in desktop

Large diffs are not rendered by default.

Binary file added public/avatars/avatar-0.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/avatars/image.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 3 additions & 2 deletions src/app/dashboard/components/emptyRepo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@ import Image from 'next/image'
import Emptyimg from '@public/magnify.png'
export default function EmptyRepository() {
return (
<div className="flex flex-col justify-center items-center h-full">
<div className="flex flex-col justify-center items-center gap-2">
<div className="mb-2">
<Image src={Emptyimg} className="grayscale" height={136} width={171.67} alt="" />
<Image src={Emptyimg} className="grayscale sm:w-[170px] sm:h-[135px] w-[120px] h-[90px]" alt="" />
</div>
<span className="text-center text-xs ">No models created yet.</span>
<button className="rounded-full flex justify-center items-center px-4 py-2 bg-primary_11">Create new model</button>
</div>
)
}
114 changes: 68 additions & 46 deletions src/app/dashboard/dashLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,64 +55,65 @@ export const DashLayout = ({ children }: { children: React.ReactNode }) => {
}
const userStore = useUserStore()
return (
<div className={`w-screen h-screen flex bg-primary_12 relative `}>
<div className={`w-screen h-screen flex bg-primary_12 relative overflow-y-auto`}>
{showBackdrop && (
<div
className="fixed inset-0 bg-black/50 z-40 backdrop-blur-sm"
onClick={closeNotification}
/>
)}
<aside className="w-[10%] border-r border-primary_8 h-screen">
<aside className="w-[10%] max-w-[100px] flex flex-col h-full min-w-[60px] border-r border-primary_8 h-screen overflow-y-auto">
<Link href="/">
<div className="w-full h-[10%] flex flex-col gap-2 pt-2 items-center justify-center">
<div className="w-full flex flex-col gap-2 pt-2 items-center justify-center h-[60px] sm:h-[100px]">
<Image
src={imageDecenterLogoWhite}
alt="DECENTER Icon"
width={50}
height={150}
className="max-w-[25%] max-h-[50%]"
className="w-[30px] h-[30px]"
/>
<Image
src={imageDecenterLogoSubtitle}
alt="DECENTER Icon"
width={100}
height={150}
style={{ maxWidth: '100%' }}
className="hidden sm:block"
/>
</div>
</Link>
<div className="w-full h-[90%] overflow-y-auto font-archivo ">
<div className="w-full flex-1 font-archivo ">
<Link href="/dashboard">
<div
className={`flex flex-col items-center cursor-pointer justify-center gap-3 w-full py-4 hover:bg-primary_11 text-primary_8 hover:text-primary_1 ${pathname === '/dashboard' ? 'bg-primary_11 text-white' : ''
}`}
>
className={`flex flex-col items-center cursor-pointer justify-center gap-3 w-full py-4 hover:bg-primary_11 text-primary_8 hover:text-primary_1 ${
pathname === '/dashboard' ? 'bg-primary_11 text-white' : ''
}`}>
<div className="flex justify-center ">
<RxDashboard size={25} />
</div>
<p className="text-sm">Dashboard</p>
<p className="text-sm hidden sm:block">Dashboard</p>
</div>
</Link>
<Link href="/dashboard/train">
<div
className={`flex flex-col items-center cursor-pointer justify-center gap-3 w-full py-4 hover:bg-primary_11 text-primary_8 hover:text-primary_1 ${pathname === '/dashboard/train' ? 'bg-primary_11 text-white' : ''
}`}
>
className={`flex flex-col items-center cursor-pointer justify-center gap-3 w-full py-4 hover:bg-primary_11 text-primary_8 hover:text-primary_1 ${
pathname === '/dashboard/train' ? 'bg-primary_11 text-white' : ''
}`}>
<div className="flex justify-center ">
<HiOutlineChip size={25} />
</div>
<p className="text-sm">Train</p>
<p className="text-sm hidden sm:block">Train</p>
</div>
</Link>
<Link href="/dashboard/repository">
<div
className={`flex flex-col items-center cursor-pointer justify-center gap-3 w-full py-4 hover:bg-primary_11 text-primary_8 hover:text-primary_1 ${pathname === '/dashboard/repository' ? 'bg-primary_11 text-white' : ''
}`}
>
className={`flex flex-col items-center cursor-pointer justify-center gap-3 w-full py-4 hover:bg-primary_11 text-primary_8 hover:text-primary_1 ${
pathname === '/dashboard/repository' ? 'bg-primary_11 text-white' : ''
}`}>
<div className="flex justify-center ">
<BsDatabase size={25} />
</div>
<p className="text-sm">Repository</p>
<p className="text-sm hidden sm:block">Repository</p>
</div>
</Link>
{/* <div className="flex flex-col items-center cursor-pointer justify-center gap-3 w-full py-4 text-primary_8 hover:bg-primary_11 hover:text-primary_1">
Expand All @@ -135,22 +136,22 @@ export const DashLayout = ({ children }: { children: React.ReactNode }) => {
</div> */}
<Link href="/dashboard/settings">
<div
className={`flex flex-col items-center cursor-pointer justify-center gap-3 w-full py-4 hover:bg-primary_11 text-primary_8 hover:text-primary_1 ${pathname === '/dashboard/settings' ? 'bg-primary_11 text-white' : ''
}`}
>
className={`flex flex-col items-center cursor-pointer justify-center gap-3 w-full py-4 hover:bg-primary_11 text-primary_8 hover:text-primary_1 ${
pathname === '/dashboard/settings' ? 'bg-primary_11 text-white' : ''
}`}>
<div className="flex justify-center ">
<BsGear size={25} />
</div>
<p className="text-sm">Settings</p>
<p className="text-sm hidden sm:block">Settings</p>
</div>
</Link>
</div>
</aside>

<main className=" w-[90%] h-screen ">
<div className="w-full h-[10%] flex items-center border-b border-primary_8 px-10">
<div className="h-full w-[50%] flex items-center">
<div className="rounded-full h-[60%] max-h-[50px] w-[80%] max-w-[500px] bg-primary_11 relative text-primary_8 pb-1">
<main className=" w-[90%] h-screen flex flex-col flex-1">
<div className="w-full h-[10%] min-h-[60px] max-h-[80px] flex items-center border-b border-primary_8 px-10">
<div className="h-full flex-1 flex items-center">
<div className="rounded-full h-[60%] max-h-[50px] w-[100%] bg-primary_11 relative text-primary_8 pb-1">
<div className="absolute top-0 left-5 h-full flex items-center">
<GoSearch size={20} />
</div>
Expand All @@ -160,7 +161,7 @@ export const DashLayout = ({ children }: { children: React.ReactNode }) => {
/>
</div>
</div>
<div className="h-full w-[50%] flex gap-6 items-center justify-end font-archivo ">
<div className="h-full flex flex-1 gap-6 items-center justify-end font-archivo hidden lg:flex">
<div className="text-primary_8 cursor-pointer">
<GoBell size={25} onClick={openNotification} />
</div>
Expand All @@ -169,23 +170,45 @@ export const DashLayout = ({ children }: { children: React.ReactNode }) => {
</button> */}

{user ? (
<div className="flex items-center bg-primary_11 text-primary_1 font-semibold font-primaryArchivo py-2 px-3 cursor-pointer rounded-xl relative">
<div></div>
<button onClick={openProfile} className="flex flex-row items-center ">
<Image
src={user?.profileImage}
alt="profile pic"
loader={myImageLoader}
unoptimized
width={40}
height={40}
className="max-w-[100%] max-h-[100%] rounded-full mr-3"
/>
<div className="flex gap-4">
<div>
<button className="flex items-center rounded-full bg-primary_11 text-primary_1 font-semibold font-primaryArchivo py-2 px-4 cursor-pointer h-[100%]">
Connect Wallet
</button>
</div>
<div className="flex items-center rounded-full bg-primary_11 text-primary_1 font-semibold font-primaryArchivo py-2 px-4 cursor-pointer relative overflow-visible">
<div></div>
<button
onClick={openProfile}
className="flex flex-row items-center gap-3">
<Image
src={'/avatars/image.png'}
alt="profile pic"
loader={myImageLoader}
unoptimized
width={40}
height={40}
className="max-w-[100%] max-h-[100%] rounded-full mr-3"
/>

<span className="flex items-center font-semibold font-primaryArchivo">
{user.userName.charAt(0).toUpperCase() + user.userName.slice(1)}
</span>
</button>
<span className="flex items-center font-semibold font-primaryArchivo">
{user.userName.charAt(0).toUpperCase() + user.userName.slice(1)}
</span>
<span>
<svg
width="10"
height="18"
viewBox="0 0 10 18"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M9.19254 12.3078C9.25065 12.3659 9.29675 12.4348 9.3282 12.5107C9.35965 12.5865 9.37584 12.6679 9.37584 12.75C9.37584 12.8321 9.35965 12.9135 9.3282 12.9893C9.29675 13.0652 9.25065 13.1341 9.19254 13.1922L5.44254 16.9422C5.38449 17.0003 5.31556 17.0464 5.23969 17.0779C5.16381 17.1093 5.08248 17.1255 5.00035 17.1255C4.91821 17.1255 4.83688 17.1093 4.76101 17.0779C4.68514 17.0464 4.61621 17.0003 4.55816 16.9422L0.80816 13.1922C0.690884 13.0749 0.625 12.9159 0.625 12.75C0.625 12.5842 0.690884 12.4251 0.80816 12.3078C0.925435 12.1905 1.0845 12.1247 1.25035 12.1247C1.4162 12.1247 1.57526 12.1905 1.69254 12.3078L5.00035 15.6164L8.30816 12.3078C8.36621 12.2497 8.43514 12.2036 8.51101 12.1722C8.58688 12.1407 8.66821 12.1245 8.75035 12.1245C8.83248 12.1245 8.91381 12.1407 8.98969 12.1722C9.06556 12.2036 9.13449 12.2497 9.19254 12.3078ZM1.69254 5.69219L5.00035 2.3836L8.30816 5.69219C8.42544 5.80947 8.5845 5.87535 8.75035 5.87535C8.9162 5.87535 9.07526 5.80947 9.19254 5.69219C9.30981 5.57492 9.3757 5.41586 9.3757 5.25C9.3757 5.08415 9.30981 4.92509 9.19254 4.80782L5.44254 1.05782C5.38449 0.999706 5.31556 0.953606 5.23969 0.922153C5.16381 0.890701 5.08248 0.874512 5.00035 0.874512C4.91821 0.874512 4.83688 0.890701 4.76101 0.922153C4.68514 0.953606 4.61621 0.999706 4.55816 1.05782L0.80816 4.80782C0.690884 4.92509 0.625 5.08415 0.625 5.25C0.625 5.41586 0.690885 5.57492 0.80816 5.69219C0.925436 5.80947 1.0845 5.87535 1.25035 5.87535C1.4162 5.87535 1.57526 5.80947 1.69254 5.69219Z"
fill="#5D5D5D"
/>
</svg>
</span>
</button>
</div>
</div>
) : (
<div className="bg-primary_11 text-primary_1 font-semibold font-primaryArchivo py-2 px-3 cursor-pointer rounded-xl relative">
Expand All @@ -196,7 +219,7 @@ export const DashLayout = ({ children }: { children: React.ReactNode }) => {
)}
</div>
</div>
<div className="w-full h-[90%] px-10 ">{children}</div>
<div className="w-full h-[90%] sm:px-10 overflow-y-auto flex-1">{children}</div>
</main>
{isProfileOpen && (
<div className=" bg-primary_11 px-4 w-[200px] text-primary_6 py-2 rounded-xl top-20 absolute z-50 right-10">
Expand All @@ -205,7 +228,7 @@ export const DashLayout = ({ children }: { children: React.ReactNode }) => {
<div className="text-primary_8">
<AiFillSetting size={22} />
</div>
Account settings
Profile settings
</Link>
</div>
<div className="py-4">
Expand All @@ -221,8 +244,7 @@ export const DashLayout = ({ children }: { children: React.ReactNode }) => {

{isNotificationOpen && (
<aside
className={`absolute z-50 right-8 mt-14 rounded-3xl max-w-[450px] shadow-xl bg-primary_11 flex flex-col px-4 py-6 gap-6 max-h-screen `}
>
className={`absolute z-50 right-8 mt-14 rounded-3xl max-w-[450px] shadow-xl bg-primary_11 flex flex-col px-4 py-6 gap-6 max-h-screen `}>
<div className="flex justify-between items-center ">
<Image src={notIcon} alt="notification" className="w-[30%]" />
<Link href="/dashboard/notifications" className="text-sm text-[#C1C1C1]">
Expand Down
28 changes: 14 additions & 14 deletions src/app/dashboard/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,16 @@ export default function Page() {
}
return (
<DashLayout>
<div className="h-full w-full flex flex-col gap-6 px-2 py-2 text-white ">
<div className="border h-[30%] border-primary_9 0 px-4 rounded-xl py-4 flex max-w-[90%] mx-auto ">
<div className="h-full w-full flex flex-col gap-6 px-2 py-2 text-white">
<div className="border border-primary_9 0 px-4 rounded-xl py-4 flex max-w-[90%] mx-auto ">
<div className="h-full">
<div className="h-[50%] flex items-center ">
<h1 className="font-logirentBold text-3xl">
<h1 className="font-logirentBold text-xl leading-tight xl:text-3xl md:text-2xl xl:leading-normal">
Train your AI model to the stars instantly.
</h1>
</div>
<div className=" h-[50%] flex items-center ">
<span className="text-sm overflow-hidden">
<span className="text-sm overflow-hidden leading-tight">
Launch your AI project into orbit with our instant training platform. We
use the latest AI technology to help you train your model quickly and
efficiently.
Expand All @@ -45,24 +45,24 @@ export default function Page() {
</div>
</div>

<div className="grid grid-cols-4 gap-5 h-[20%] ">
<div className=" rounded-xl flex flex-col justify-between gap-2 border border-primary_9 h-full px-4 py-4">
<div className="h-[15%] flex items-center">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-5 ">
<div className=" rounded-xl flex flex-col justify-between gap-2 border border-primary_9 h-full px-4 py-4 min-w-[200px] h-[10rem]">
<div className="flex items-center">
<p className="text-sm">Total trained models</p>
</div>
<div>
<span className="text-xl font-bold">0</span>
</div>
</div>
<div className=" rounded-xl flex flex-col justify-between gap-2 border border-primary_9 h-full px-4 py-4">
<div className="h-[15%] flex items-center">
<div className=" rounded-xl flex flex-col justify-between gap-2 border border-primary_9 h-full px-4 py-4 min-w-[200px] h-[10rem]">
<div className="flex items-center">
<p className="text-sm">New models</p>
</div>
<div>
<span className="text-xl font-bold">0</span>
</div>
</div>
<div className=" rounded-xl flex flex-col justify-between gap-2 border border-primary_9 h-full px-4 py-4">
{/* <div className=" rounded-xl flex flex-col justify-between gap-2 border border-primary_9 h-full px-4 py-4">
<div className="h-[15%] flex items-center">
<p className="text-sm">Fine-tune models</p>
</div>
Expand All @@ -77,15 +77,15 @@ export default function Page() {
<div>
<span className="text-xl font-bold">0</span>
</div>
</div>
</div> */}
</div>

<div className=" h-[40%] ">
<div className="flex gap-2 h-[10%] bg-inherit">
<div>
<div className="flex gap-2 bg-inherit">
<span className="text-lg">Recently created models</span>
<input type="checkbox" onClick={handleToggle} />
</div>
<div className="w-full overflow-auto h-[90%] pr-2 pt-6 ">
<div className="w-full h-[90%] pr-2 pt-6 ">
{!toggle ? (
<EmptyRepository />
) : (
Expand Down
38 changes: 24 additions & 14 deletions src/app/dashboard/repository/[id]/components/right_side.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,48 @@
import React from 'react'
import img from '@public/Rectangle75.png'
import Image from 'next/image'
import { GoDownload } from 'react-icons/go'

// import Modal from './modal'
function RightSide() {
return (
<div className=" h-[100%] max-h-screen overflow-y-scroll px-4 ">
<div className="mb-4">
<div className="h-[100%] max-h-screen overflow-y-auto">
<div className="mb-4 flex justify-center">
<Image className=" justify-center grid" src={img} alt="" />
</div>
<div className="px-4 py-2 mb-4 text-center bg-primary_11 rounded-full">
<span className="text-xs">Edit Model</span>
</div>
<div className="px-4 py-2 mb-4 bg-primary_11 rounded-2xl">
<button className="border border-[#494949] py-2 mb-4 text-center bg-primary_11 rounded-full w-full text-xs">
Fine_tune
</button>
<button className="border border-[#494949] py-2 mb-4 text-center bg-primary_11 rounded-full w-full text-xs">
Download
</button>
<button className="border border-[#494949] py-2 mb-4 text-center bg-primary_11 rounded-full w-full text-xs">
Share
</button>
<div className="py-2 mb-4 bg-primary_11 rounded-2xl">
<ul>
<li className="text-xs px-3 py-3 hover:bg-black hover:rounded-full">Model</li>
<li className="text-xs text-[#5D5D5D] px-3 py-3 hover:bg-black hover:rounded-full">
Description
<li className="text-xs text-xs text-[#5D5D5D] px-3 py-3 hover:bg-black hover:rounded-full cursor-pointer hover:bg-primary_13 hover:text-primary_1">
Model description
</li>
<li className="text-xs text-[#5D5D5D] px-3 py-3 hover:bg-black hover:rounded-full">
<li className="text-xs text-[#5D5D5D] px-3 py-3 hover:bg-black hover:rounded-full cursor-pointer hover:bg-primary_13 hover:text-primary_1">
Version history
</li>
<li className="text-xs text-[#5D5D5D] px-3 py-3 hover:bg-black hover:rounded-full">
Datasety
<li className="text-xs text-[#5D5D5D] px-3 py-3 hover:bg-black hover:rounded-full cursor-pointer hover:bg-primary_13 hover:text-primary_1">
Uploaded files
</li>
</ul>
</div>
<div className="px-4 py-2 mb-4 bg-primary_11 rounded-2xl">
<ul>
<li className="text-xs px-3 text-[#5D5D5D] py-3 hover:bg-black hover:rounded-full">
<li className="text-xs px-3 text-[#5D5D5D] py-3">
Created Sep, 12 2023
</li>
<li className="text-xs px-3 text-[#5D5D5D] py-3 hover:bg-black hover:rounded-full">
<li className="text-xs px-3 text-[#5D5D5D] py-3 flex gap-4">
Downloads
<span className="flex gap-1">
<GoDownload />
12K
</span>
</li>
</ul>
</div>
Expand Down
Loading