Skip to content

Commit

Permalink
[beta] update ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@picascaz
picascaz committed Jan 14, 2025
1 parent c4b7746 commit 2283a08
Show file tree
Hide file tree
Showing 6 changed files with 94 additions and 93 deletions.
110 changes: 54 additions & 56 deletions src/components/Main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { AutoFlip } from "./auto-flip";
import { fmtBerry } from "./fmtData";
import { levels } from "./level";
import { SocialButtons } from "./social-buttons";
import { MAvatar } from "./avatar";

function Menus() {
const mc = useMenusCtx();
Expand All @@ -27,58 +28,62 @@ function Menus() {
]
return (
<>
<AutoFlip className="flex bg-[#404040] flex-col justify-between sticky top-0 h-screen overflow-y-auto">
<div className="flex-col justify-start items-center flex-grow-0 flex-shrink-0 w-[3.75rem] lg:w-60 py-3 lg:px-3 transition-width">
<div className="flex items-center justify-center h-36 lg:h-[7.5rem]">
<img src="/logo.svg" className={`h-12 min-w-36 shrink-0 rotate-90 lg:ml-0 lg:rotate-0 lg:h-[7.375rem] lg:w-[9.375rem]`} alt="Logo" />
<AutoFlip >
<div className=" flex h-[3.75rem] flex-row w-full justify-between items-center py-5 bg-[#404040] px-[50px] ">
<div className="flex items-center gap-5 smd:flex-col">
<img src="/logo.svg" className={`shrink-0 rotate-90 lg:ml-0 max-w-[9.375rem] h-[2.375rem] lg:rotate-0 `} alt="Logo" />
<div className="rounded-[.625rem] cursor-default border p-[.625rem] border-[#999999] text-[#999999] font-normal text-xs leading-3">
Season 1
</div>
</div>
<div className="flex pb-8 gap-3 w-full justify-start flex-wrap">
{list.map((item, index) => {
return <div key={`list_${index}`} onClick={item.onClick} className="flex-1 basis-0 mx-1.5 lg:mx-0 cursor-pointer h-[4.4375rem] gap-1 bg-white/10 hover:bg-white/20 rounded-[.9375rem] flex flex-col justify-center items-center">
<div className=" mt-1 text-xl lg:text-2xl" >
{item.svg}
</div>
<label className=" font-medium text-xs lg:text-base">
{item.label}
</label>
</div>
})}


</div>
<div className=" flex flex-col gap-3 px-1.5 lg:px-0">
{menus.map((m) => {
const Micon: React.FC<SVGProps<SVGElement>> = m.icon as any;
const selected = m.name === mc.current.name;
return (
<div
key={m.name}
className={cn("flip_item flex justify-start items-center self-stretch flex-grow-0 flex-shrink-0 h-12 gap-2.5 lg:px-5 px-3 rounded-[1.875rem] cursor-pointer select-none", {
"bg-primary text-white ": selected,
"text-white/50 hover:bg-default": !selected,
})}
onClick={() => {
mc.toMenu(m.name);
}}
>
<div className={cn("flex justify-center items-center flex-grow-0 flex-shrink-0 w-6 h-6 relative gap-2.5 rounded-full", { "bg-blue-400": selected })}>
<Micon className={cn("text-base")} />
<div className="flex gap-[1.875rem] items-center">
<div className="flex gap-[.625rem] h-8">
{list.map((item, index) => {
return <div key={`list_${index}`} onClick={item.onClick} className="flex-1 basis-0 mx-1.5 lg:mx-0 cursor-pointer gap-1 bg-white/10 hover:bg-white/20 rounded-[.625rem] h-8 flex justify-center items-center py-[.375rem] px-3">
<div className="text-xl lg:text-2xl" >
{item.svg}
</div>
<div className="text-xs font-medium text-left whitespace-nowrap hidden lg:block">{m.name}</div>
<label className=" font-medium text-base leading-8">
{item.label}
</label>
</div>
);
})}
</div>
</div>
<div className="flex pb-[1.875rem] flex-col items-center gap-5">
<SocialButtons />
<div className=" font-normal text-xs leading-[.9rem] text-[#999999] flex flex-col items-center lg:flex-row gap-6 ">
<a href="https://enreach.network/" target="_blank" className="underline-offset-4 hover:text-[#4281FF] underline ">WebSite</a>
<a href="https://docs.enreach.network/berry-season-1" target="_blank" className="underline-offset-4 hover:text-[#4281FF] underline">Guide</a>
})}
</div>

<div className="flex items-center gap-5">
<SocialButtons />
<div className=" font-normal text-xs leading-[.9rem] text-[#999999] flex flex-col items-center lg:flex-row gap-6 ">
<a href="https://enreach.network/" target="_blank" className="underline-offset-4 hover:text-[#4281FF] rounded-[.625rem] border p-[.625rem] border-[#999999]">WebSite</a>
<a href="https://docs.enreach.network/berry-season-1" target="_blank" className="underline-offset-4 hover:text-[#4281FF] rounded-[.625rem] border p-[.625rem] border-[#999999]">Guide</a>
</div>
</div>
<MAvatar name={user?.email} size={32} />
</div>
</div>

</AutoFlip>
<div className=" flex flex-row gap-3 px-[3.125rem] py-[.625rem] border-b border-[#404040]">
{menus.map((m) => {
const Micon: React.FC<SVGProps<SVGElement>> = m.icon as any;
const selected = m.name === mc.current.name;
return (
<div
key={m.name}
className={cn("flip_item flex justify-start items-center self-stretch flex-grow-0 flex-shrink-0 gap-2.5 p-1 lg:px-5 px-3 rounded-[1.875rem] cursor-pointer select-none", {
"bg-[#404040] text-white ": selected,
"text-white/50 hover:bg-default": !selected,
})}
onClick={() => {
mc.toMenu(m.name);
}}
>

<div className="text-xs font-medium text-left whitespace-nowrap hidden lg:block">{m.name}</div>
</div>
);
})}
</div>


</>
Expand All @@ -88,20 +93,13 @@ function Menus() {
const Main = () => {
const mc = useMenusCtx();
return (
<div className="flex flex-col h-screen">
<div className="flex-1 flex ">
<Menus />
{menus.map((item, mi) => (
<div className="h-screen flex-1 flex flex-col overflow-hidden">
<Menus />
<div className="h-full">
{menus.map((item) => (
<Fragment key={item.name}>
{mc.current.name === item.name && (
<AutoFlip className="flex-1 p-5 flex flex-col w-full gap-[2.125rem] min-h-full overflow-y-auto">
{/* <h2 className="flip_item text-[2rem] font-medium">{mc.current.name}</h2> */}
{mi > 0 && <div className=" relative pl-5 pt-28">
<div className="bg-tit absolute z-0 right-0 top-[.3125rem] h-[14.5rem] w-[31.25rem] bg-cover" />
<div className="text-3xl font-medium z-10 relative">
{mc.current.contentName}
</div>
</div>}
<AutoFlip className=" p-10 px-[6.5rem] flex flex-col w-full h-full gap-[2.125rem]">
{mc.current.content}
</AutoFlip>
)}
Expand Down
2 changes: 1 addition & 1 deletion src/components/cards.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ export function TitCard(p: PropsWithChildren & { tit?: string; right?: ReactNode

export function BgCard(p: PropsWithChildren & { className?: string, wrapClassName?: string }) {
return <div className={cn("relative overflow-visible flip_item", p.wrapClassName)}>
<div style={{ backgroundSize: '100% 100%' }} className="bg-s1 bg-no-repeat animate-pulse w-[calc(100%_+_2.5rem)] h-[calc(100%_+_2.5rem)] absolute -left-5 -top-5 z-0" />
<div style={{ backgroundSize: '100% 100%' }} className="bg-s1 bg-no-repeat animate-pulse w-[calc(100%_+_1.1rem)] h-[calc(100%_+_2.2rem)] absolute -left-[0.5rem] -top-5 z-0" />
<Card className={cn("bg-[#2E2E2E] border border-[#007AFF] flex flex-col justify-start items-center p-6 gap-6 w-full h-full rounded-3xl", p.className)}>{p.children}</Card>
</div>
}
58 changes: 30 additions & 28 deletions src/components/my-dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ export function TrendingChart({ className }: { className?: string }) {
return (
<TitCard
tit="Trending"
className={cn("col-span-1 lg:col-span-2 h-full gap-4", className)}
className={cn("col-span-1 lg:col-span-2 gap-4", className)}
right={
<Select
className="w-[9.375rem]"
Expand Down Expand Up @@ -244,7 +244,7 @@ export function ExpProgress() {
console.info('percent:', _.round(percent, 4))
const expRotate = Math.min(_.round(percent * 180), 180)
const transition = `all 0.8s ease`
return <div className="flip_item p-[2.875rem] flex flex-col items-center gap-2 relative">
return <div className="flip_item p-5 flex flex-col items-center gap-2 relative">
<div className="w-full max-w-[15.625rem] relative">
<svg width="100%" height="auto" viewBox="0 0 250 140" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 125A110 110 0,0,1,235 125" strokeLinecap="round" strokeWidth="30" stroke="#616161" />
Expand Down Expand Up @@ -281,41 +281,27 @@ export default function MyDashboard() {
const connectedNodes = user?.node.connected || 0;

return (
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-5 ">
<div className="flip_item title lg:col-span-2 px-5 overflow-visible flex flex-col gap-[1.5625rem] text-white relative mt-16 ">
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-5 h-full ">
<TrendingChart className="flip_item" />

{/* <div className="flip_item title lg:col-span-2 px-5 overflow-visible flex flex-col gap-[1.5625rem] text-white relative mt-16 ">
<div className="absolute -right-5 -bottom-[2.1875rem] bg-overview w-[20.3125rem] h-[16.4375rem] bg-cover z-0 hidden lg:block" />
<div className="font-medium text-sm z-10 relative font-Alexandria">Dashboard Overview</div>
<div className="font-semibold text-3xl mb-20 z-10 relative font-Alexandria">
Hello,<br /><div title={user?.email}>{truncateEmail(user?.email)} 👋</div>
</div>
</div>
<div className="flip_item flex flex-col justify-between lg:col-span-2 lg:flex-row xl:col-span-1 xl:row-span-2 xl:flex-col rounded-[1.25rem] bg-[#373737]">
</div> */}
<div className="flip_item flex flex-col justify-between xl:flex-col rounded-[1.25rem] bg-[#373737]">
<ExpProgress />
<IconCard
className=" min-h-[11.875rem]"
icon={SVGS.SvgBerry}
iconSize={24}
tit={
<div className="flex justify-between gap-2 items-center flex-1">
<span className="text-xl font-Alexandria">BERRY</span>
<Booster />
</div>
}
content={
<div className="flex flex-1 items-center gap-[10%] min-w-[11.25rem]">
<DupleInfo tit={`${fmtBerry(user?.point.today)}`} sub="Today" />
<DupleSplit />
<DupleInfo tit={`${fmtBerry(user?.point.total)}`} sub="Season 1" subTip="You are currently on Season 1 stage." />
</div>
}
/>
<CurrentTask wrapClassName="lg:col-span-2 xl:col-span-1" />

</div>
{/* */}


{/* */}
<IconCard
className="flip_item h-[11.875rem] self-end"
className="flip_item "
icon={SVGS.SvgReferral}
iconSize={24}
tit={
Expand Down Expand Up @@ -353,7 +339,7 @@ export default function MyDashboard() {


<IconCard
className="flip_item h-[11.875rem] self-end"
className="flip_item"
icon={SVGS.SvgNodes}
iconSize={24}
tit={<span className="text-xl font-Alexandria">My Nodes</span>}
Expand All @@ -373,9 +359,25 @@ export default function MyDashboard() {
</div>
}
/>
<IconCard
className=""
icon={SVGS.SvgBerry}
iconSize={24}
tit={
<div className="flex justify-between gap-2 items-center flex-1">
<span className="text-xl font-Alexandria">BERRY</span>
<Booster />
</div>
}
content={
<div className="flex flex-1 items-center gap-[10%] min-w-[11.25rem]">
<DupleInfo tit={`${fmtBerry(user?.point.today)}`} sub="Today" />
<DupleSplit />
<DupleInfo tit={`${fmtBerry(user?.point.total)}`} sub="Season 1" subTip="You are currently on Season 1 stage." />
</div>
}
/>

<TrendingChart className="flip_item" />
<CurrentTask wrapClassName="lg:col-span-2 xl:col-span-1" />
</div>
);
}
4 changes: 2 additions & 2 deletions src/components/my-rewards.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function MyRewards() {
<div className="grid grid-cols-10 gap-4">
<IconCard
icon={SVGS.SvgBerry}
className="flip_item col-span-10 xl:col-span-4 justify-between gap-8"
className="flip_item col-span-10 xl:col-span-4 justify-between gap-8"
tit={
<div className="flex justify-between items-center w-full">
<span className="text-xl font-Alexandria">BERRY</span>
Expand Down Expand Up @@ -41,7 +41,7 @@ export default function MyRewards() {
}
/>
<div className="flip_item col-span-10 xl:col-span-6">
<TrendingChart />
<TrendingChart className="h-full" />
</div>
<TaskList />
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/social-buttons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export function SocialButtons() {
socialLinks.map((item) => {
return <a
key={item.href}
className="border text-lg items-center justify-center flex hover:text-[#4281FF] hover:border-[#4281FF] w-[1.9375rem] h-[1.9375rem] mo:h-6 border-white rounded-full "
className="border text-lg items-center justify-center flex hover:text-[#4281FF] hover:border-[#4281FF] w-8 h-8 mo:h-6 border-white rounded-full "
href={item.href}
target="_blank"
rel="noreferrer"
Expand Down
11 changes: 6 additions & 5 deletions src/components/tasks.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { cn } from "@nextui-org/react";
import { ReactNode, useMemo } from "react";
import { CircularProgressbar } from "react-circular-progressbar";
import { IoIosCheckmarkCircle } from "react-icons/io";
import { GoArrowUpRight } from "react-icons/go";
import { Btn } from "./btns";
import { BgCard, TitCard } from "./cards";

Expand Down Expand Up @@ -178,17 +179,17 @@ export function CurrentTask(p: { wrapClassName?: string }) {
return (
<>
{cTask ? (
<BgCard className="justify-between px-5 py-7" wrapClassName={p.wrapClassName}>
<div className="flex items-center justify-center mt-6 text-[3rem]">
<BgCard className="justify-between px-5 py-7 flex-row items-center" wrapClassName={p.wrapClassName}>
<div className="flex items-center justify-center text-[3rem]">
<div className="shadow-2 rounded-full">{cTask.icon}</div>
<div className="shadow-2 rounded-full w-12 h-12 flex justify-center items-center -ml-3 bg-white text-2xl">{cTask.rewardIcon}</div>
</div>
<div className="flex flex-col justify-start items-center relative gap-1">
<p className="flex-grow-0 flex-shrink-0 text-4xl font-bold text-center uppercase text-white gap-2">Get {cTask.reward}</p>
<p className="flex-grow-0 flex-shrink-0 text-sm font-normal text-center uppercase text-white gap-2">Get {cTask.reward}</p>
<p className="flex-grow-0 flex-shrink-0 h-7 opacity-60 text-sm text-center text-white">{cTask.sub}</p>
</div>
<Btn className="flex-grow-0 flex-shrink-0 w-full max-w-[14.125rem] h-[2.125rem]" onClick={cTask.onGoTo}>
{cTask.btn}
<Btn className=" !min-h-8 !min-w-8 !text-base" onClick={cTask.onGoTo}>
<GoArrowUpRight />
</Btn>
</BgCard>
) : (
Expand Down

0 comments on commit 2283a08

Please sign in to comment.