Skip to content

Commit 1538f60

Browse files
kalidiagnekalidiagne
authored
feat: FE progress v1.1 freeze (#104)
1 parent 8dd5046 commit 1538f60

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+1529
-596
lines changed

‎apps/client/src/components/AuthWrapper.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { ReactNode } from "react";
2+
import { useGlobalContext } from "@/contexts/GlobalContext";
3+
4+
interface AuthWrapperProps {
5+
children?: ReactNode;
6+
fallback?: ReactNode;
7+
}
8+
9+
export const AuthWrapper = ({ children, fallback }: AuthWrapperProps) => {
10+
const { isLoggedIn } = useGlobalContext();
11+
12+
if (!isLoggedIn) {
13+
return fallback ?? null;
14+
}
15+
16+
return <>{children}</>;
17+
};

‎apps/client/src/components/Avatar.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -59,18 +59,17 @@ export const Avatar: FC<AvatarProps> = ({
5959
className,
6060
...props
6161
}) => {
62-
const fallbackBackground = hasRandomBackground
63-
? RandomBackgroundColors[
64-
Math.floor(Math.random() * RandomBackgroundColors.length)
65-
]
66-
: "bg-muted";
62+
const fallbackBackground =
63+
hasRandomBackground && username
64+
? RandomBackgroundColors[
65+
username.charCodeAt(0) % RandomBackgroundColors.length
66+
]
67+
: "bg-base-muted";
6768

6869
return (
6970
<AvatarBase {...props} className={cn(className)}>
7071
<AvatarImage src={src} />
71-
<AvatarFallback className={fallbackBackground}>
72-
{username?.[0].toLocaleUpperCase() || ""}
73-
</AvatarFallback>
72+
<AvatarFallback className={fallbackBackground} />
7473
</AvatarBase>
7574
);
7675
};

‎apps/client/src/components/Content.tsx‎

Lines changed: 97 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,113 @@
11
// import "katex/dist/katex.min.css"
2-
import { detectFormat, Format } from "@/lib/format"
3-
import type { FC } from "react"
4-
import Latex from "react-latex-next"
5-
import ReactMarkdown from "react-markdown"
6-
import rehypeHighlight from "rehype-highlight"
7-
import remarkGfm from "remark-gfm"
2+
import { detectFormat, Format } from "@/lib/format";
3+
import { cn } from "@/lib/utils";
4+
import type { FC } from "react";
5+
import Latex from "react-latex-next";
6+
import ReactMarkdown from "react-markdown";
7+
import rehypeHighlight from "rehype-highlight";
8+
import remarkGfm from "remark-gfm";
89

910
export const Content: FC<{ content: string }> = ({ content }) => {
1011
switch (detectFormat(content)) {
1112
case Format.Markdown:
1213
return (
13-
<div className="prose">
14+
<div>
1415
<ReactMarkdown
1516
remarkPlugins={[remarkGfm]}
1617
rehypePlugins={[rehypeHighlight]}
18+
components={{
19+
h1: ({ children, className }) => (
20+
<h1 className={cn("text-base-foreground", className)}>
21+
{children}
22+
</h1>
23+
),
24+
h2: ({ children, className }) => (
25+
<h2 className={cn("text-base-foreground", className)}>
26+
{children}
27+
</h2>
28+
),
29+
h3: ({ children, className }) => (
30+
<h3 className={cn("text-base-foreground", className)}>
31+
{children}
32+
</h3>
33+
),
34+
h4: ({ children, className }) => (
35+
<h4 className={cn("text-base-foreground", className)}>
36+
{children}
37+
</h4>
38+
),
39+
h5: ({ children, className }) => (
40+
<h5 className={cn("text-base-foreground", className)}>
41+
{children}
42+
</h5>
43+
),
44+
h6: ({ children, className }) => (
45+
<h6 className={cn("text-base-foreground", className)}>
46+
{children}
47+
</h6>
48+
),
49+
strong: ({ children, className }) => (
50+
<strong className={cn("text-base-foreground", className)}>
51+
{children}
52+
</strong>
53+
),
54+
em: ({ children, className }) => (
55+
<em className={cn("text-base-foreground", className)}>
56+
{children}
57+
</em>
58+
),
59+
code: ({ children, className }) => (
60+
<code className={cn("text-base-foreground", className)}>
61+
{children}
62+
</code>
63+
),
64+
blockquote: ({ children, className }) => (
65+
<blockquote className={cn("text-base-foreground", className)}>
66+
{children}
67+
</blockquote>
68+
),
69+
ul: ({ children, className }) => (
70+
<ul className={cn("text-base-foreground", className)}>
71+
{children}
72+
</ul>
73+
),
74+
ol: ({ children, className }) => (
75+
<ol className={cn("text-base-foreground", className)}>
76+
{children}
77+
</ol>
78+
),
79+
p: ({ children, className }) => (
80+
<p className={cn("text-base-foreground", className)}>
81+
{children}
82+
</p>
83+
),
84+
a: ({ children, href, className }) => (
85+
<a
86+
className={cn("text-base-foreground", className)}
87+
href={href}
88+
>
89+
{children}
90+
</a>
91+
),
92+
span: ({ children, className }) => (
93+
<span className={cn("text-base-foreground", className)}>
94+
{children}
95+
</span>
96+
),
97+
div: ({ children, className }) => (
98+
<div className={cn("text-base-foreground", className)}>
99+
{children}
100+
</div>
101+
),
102+
}}
17103
>
18104
{content}
19105
</ReactMarkdown>
20106
</div>
21-
)
107+
);
22108
case Format.Latex:
23-
return <Latex>{content}</Latex>
109+
return <Latex>{content}</Latex>;
24110
case Format.Raw:
25-
return content
111+
return content;
26112
}
27-
}
113+
};

‎apps/client/src/components/Header.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,13 @@ import { LeftSidebar } from "@/components/LeftSidebar";
1212

1313
const DesktopNav = () => {
1414
return (
15-
<div className="hidden lg:flex items-center justify-between gap-5 lg:gap-0 px-4 py-3">
15+
<div className="hidden lg:flex items-center justify-between gap-5 lg:gap-0 px-5 py-3">
1616
<Link to="/" className="hidden lg:flex">
1717
<h1>
18-
<span className="font-space-grotesk font-bold text-black text-[26px] leading-[25px]">
18+
<span className="font-space-grotesk font-bold text-base-logo text-[26px] leading-[25px]">
1919
PSE
2020
</span>
21-
<span className="font-space-grotesk text-black font-normal text-[26px] leading-[25px] tracking-[-1px]">
21+
<span className="font-space-grotesk text-base-logo font-normal text-[26px] leading-[25px] tracking-[-1px]">
2222
forum
2323
</span>
2424
</h1>
@@ -48,18 +48,18 @@ const MobileNav = () => {
4848
/>
4949
<div
5050
className={cn(
51-
"fixed inset-y-0 p-6 left-0 z-50 w-[320px] bg-white transform transition-transform duration-300 ease-in-out lg:hidden",
51+
"fixed inset-y-0 p-6 left-0 z-50 w-[320px] bg-base-background transform transition-transform duration-300 ease-in-out lg:hidden",
5252
isMenuOpen ? "translate-x-0" : "-translate-x-full",
5353
)}
5454
>
5555
<div className="flex flex-col gap-4">
5656
<div className="flex items-center justify-between">
5757
<Link to="/">
5858
<h1 className="flex gap-1">
59-
<span className="font-space-grotesk font-bold text-black text-xl leading-[20px]">
59+
<span className="font-space-grotesk font-bold text-logo-base text-xl leading-[20px]">
6060
PSE
6161
</span>
62-
<span className="font-space-grotesk text-black font-normal text-base leading-[18px] tracking-[-1px] mt-auto">
62+
<span className="font-space-grotesk text-logo-base font-normal text-base leading-[18px] tracking-[-1px] mt-auto">
6363
forum
6464
</span>
6565
</h1>
@@ -99,7 +99,7 @@ const MobileNav = () => {
9999

100100
export function Header() {
101101
return (
102-
<nav className="bg-white border-b-[1px] border-b-gray sticky top-0 z-50">
102+
<nav className="bg-base-background border-b-[1px] border-b-base-border sticky top-0 z-50">
103103
<DesktopNav />
104104
<MobileNav />
105105
</nav>

‎apps/client/src/components/LeftSidebar.tsx‎

Lines changed: 47 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@ import { Accordion } from "@/components/Accordion";
1111
import { membershipMocks } from "mocks/membershipMocks";
1212
import { Avatar } from "@/components/Avatar";
1313
import { Badge } from "@/components/ui/Badge";
14+
import { Switch } from "./inputs/Switch";
15+
import { useGlobalContext } from "@/contexts/GlobalContext";
16+
import { AuthWrapper } from "./AuthWrapper";
1417
const renderNavItems = (
1518
_items: (typeof MAIN_NAV_ITEMS)[keyof typeof MAIN_NAV_ITEMS],
1619
) =>
@@ -45,13 +48,13 @@ const NavItem = ({
4548
to={to}
4649
key={title}
4750
className={cn(
48-
"text-sm font-inter font-medium leading-5 text-black-secondary cursor-pointer outline-none focus:outline-none focus:ring-0 focus:ring-offset-0",
49-
"duration-200 hover:bg-white-light hover:text-black",
51+
"text-sm font-inter font-medium leading-5 text-base-muted-foreground cursor-pointer outline-none focus:outline-none focus:ring-0 focus:ring-offset-0",
52+
"duration-200 hover:bg-muted hover:text-base-primary",
5053
"flex items-center gap-2 rounded-md h-9 py-2 w-full p-2",
5154
)}
5255
>
5356
<div className="flex items-center gap-2">
54-
<Icon className="text-black text-base" size={16} />
57+
<Icon className=" text-base" size={16} />
5558
<span>{title}</span>
5659
</div>
5760
{badge && (
@@ -75,14 +78,13 @@ const SidebarContent = () => {
7578
return (
7679
<nav
7780
aria-label="Sidebar Navigation"
78-
className="flex flex-col divide-y-[1px] divide-[#E5E7EB]"
81+
className="flex flex-col divide-y-[1px] divide-sidebar-border"
7982
>
8083
<div className="space-y-1 py-6">
8184
<NavItem title="Home" to="/" icon={HomeIcon} />
8285
{renderStartItems()}
8386
{auth?.mapSync(renderStartItems)}
8487
</div>
85-
8688
<Accordion
8789
className="py-6"
8890
items={[
@@ -98,8 +100,8 @@ const SidebarContent = () => {
98100
params={{ id: `${id}` }}
99101
>
100102
<Avatar className="!size-[32px] !rounded-lg" src={logo} />
101-
<span className="font-semibold font-inter text-sm text-[#3F3F46] line-clamp-1">
102-
{name}
103+
<span className="font-semibold font-inter text-sm text-sidebar-foreground line-clamp-1">
104+
{name} ss
103105
</span>
104106
</Link>
105107
))}
@@ -108,6 +110,7 @@ const SidebarContent = () => {
108110
},
109111
]}
110112
/>
113+
111114
{user !== undefined && (
112115
<div className="space-y-2 py-6">
113116
<div className="w-full justify-start flex items-center space-x-3 text-sm">
@@ -147,44 +150,52 @@ const LeftSidebar = () => {
147150
const { data: user } = useQuery(["user.read", auth?.inner?.username], {
148151
enabled: auth?.isSome(),
149152
});
153+
const { isDarkMode, setIsDarkMode } = useGlobalContext();
150154

151155
return (
152-
<aside className="w-[264px] p-6 bg-white-dark hidden flex-col sticky top-[60px] z-[49] lg:flex ">
156+
<aside className="w-[264px] p-6 bg-sidebar-background hidden flex-col sticky top-[60px] z-[49] lg:flex ">
153157
<nav
154158
aria-label="Sidebar Navigation"
155-
className="flex flex-col divide-y-[1px] divide-[#E5E7EB]"
159+
className="flex flex-col divide-y-[1px] divide-sidebar-border"
156160
>
157161
<div className="space-y-1 py-6">
158162
<NavItem title="Home" to="/" icon={HomeIcon} />
159-
{renderStartItems()}
160-
{auth?.mapSync(renderStartItems)}
163+
<AuthWrapper>
164+
{renderStartItems()}
165+
{/* auth?.mapSync(renderStartItems) */}
166+
</AuthWrapper>
161167
</div>
162168

163-
<Accordion
164-
className="py-6"
165-
items={[
166-
{
167-
label: "MY COMMUNITIES",
168-
children: (
169-
<div className="flex flex-col">
170-
{membershipMocks.map(({ id, name, logo }) => (
171-
<Link
172-
key={id}
173-
to="/communities/$id"
174-
className="flex gap-2 items-center py-2 px-3"
175-
params={{ id: `${id}` }}
176-
>
177-
<Avatar className="!size-[32px] !rounded-lg" src={logo} />
178-
<span className="font-semibold font-inter text-sm text-[#3F3F46] line-clamp-1">
179-
{name}
180-
</span>
181-
</Link>
182-
))}
183-
</div>
184-
),
185-
},
186-
]}
187-
/>
169+
<AuthWrapper>
170+
<Accordion
171+
className="py-6"
172+
items={[
173+
{
174+
label: "MY COMMUNITIES",
175+
children: (
176+
<div className="flex flex-col">
177+
{membershipMocks.map(({ id, name, logo }) => (
178+
<Link
179+
key={id}
180+
to="/communities/$id"
181+
className="flex gap-2 items-center py-2 px-3"
182+
params={{ id: `${id}` }}
183+
>
184+
<Avatar
185+
className="!size-[32px] !rounded-lg"
186+
src={logo}
187+
/>
188+
<span className="font-semibold font-inter text-sm text-sidebar-foreground line-clamp-1">
189+
{name}
190+
</span>
191+
</Link>
192+
))}
193+
</div>
194+
),
195+
},
196+
]}
197+
/>
198+
</AuthWrapper>
188199
{user !== undefined && (
189200
<div className="space-y-2 py-6">
190201
<div className="w-full justify-start flex items-center space-x-3 text-sm">

‎apps/client/src/components/MainLayout.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,21 +18,20 @@ export const MainLayout = ({
1818
showLeftSidebar = false,
1919
showRightSidebar = false,
2020
}: MainLayoutProps) => {
21-
const { isMenuOpen, setIsMenuOpen } = useGlobalContext();
21+
const { isMenuOpen, setIsMenuOpen, isDarkMode } = useGlobalContext();
2222

2323
const router = useRouter();
2424

2525
const pathname = router?.latestLocation?.href;
26-
console.log("router", pathname);
2726

2827
useEffect(() => {
2928
setIsMenuOpen(false);
3029
}, [pathname]);
3130

3231
return (
33-
<div className="h-screen">
32+
<div className={cn("h-screen", isDarkMode ? "dark" : "")}>
3433
{showHeader && <Header />}
35-
<main className="bg-white h-[calc(100vh-65px)] flex justify-between overflow-hidden">
34+
<main className="bg-base-background h-[calc(100vh-65px)] flex justify-between overflow-hidden">
3635
{showLeftSidebar && <LeftSidebar />}
3736
{children && (
3837
<div

‎apps/client/src/components/PageContent.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export const PageContent = ({
2828
"h-full": showEmptyState,
2929
})}
3030
>
31-
{title && <Labels.PageTitle>{title}</Labels.PageTitle>}
31+
{title && <Labels.PageTitle className="">{title}</Labels.PageTitle>}
3232
{children}
3333
{showEmptyState && emptyState && (
3434
<EmptyState

0 commit comments

Comments
 (0)