Skip to content

Commit edf7067

Browse files
DhravyaDhravya
committed
extension auth button
1 parent 6a32d2f commit edf7067

File tree

1 file changed

+92
-91
lines changed

1 file changed

+92
-91
lines changed

‎apps/web/src/components/Sidebar/index.tsx

+92-91
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ export default function Sidebar({
2323
selectChange?: (selectedItem: string | null) => void;
2424
jwt: string;
2525
}) {
26-
2726
const { data: session } = useSession();
2827

2928
const [selectedItem, setSelectedItem] = useState<string | null>(null);
@@ -61,7 +60,7 @@ export default function Sidebar({
6160
</div>
6261
),
6362
label: "Profile",
64-
content: <ProfileTab open={selectedItem !== null} />
63+
content: <ProfileTab open={selectedItem !== null} />,
6564
},
6665
];
6766

@@ -89,7 +88,7 @@ export default function Sidebar({
8988
setSelectedItem={setSelectedItem}
9089
/>
9190
<div className="mt-auto" />
92-
{/*
91+
{/*
9392
<MenuItem
9493
item={{
9594
label: "Trash",
@@ -121,12 +120,12 @@ export default function Sidebar({
121120
</Avatar>
122121
</div>
123122
),
124-
content: <ProfileTab open={selectedItem !== null} />
123+
content: <ProfileTab open={selectedItem !== null} />,
125124
}}
126125
selectedItem={selectedItem}
127126
setSelectedItem={setSelectedItem}
128127
/>
129-
{/* <MessagePoster jwt={jwt} /> */}
128+
<MessagePoster jwt={jwt} />
130129
</div>
131130
<AnimatePresence>
132131
{selectedItem && <SubSidebar>{Subbar}</SubSidebar>}
@@ -181,102 +180,104 @@ export function SubSidebar({ children }: { children?: React.ReactNode }) {
181180
}}
182181
className="z-[10] flex h-full w-full min-w-full flex-col items-center opacity-0"
183182
>
184-
<AnimatePresence>
185-
{children}
186-
</AnimatePresence>
183+
<AnimatePresence>{children}</AnimatePresence>
187184
</motion.div>
188185
</motion.div>
189186
);
190187
}
191188

192189
export function ProfileTab({ open }: { open: boolean }) {
190+
const { data: session } = useSession();
193191

194-
const { data: session } = useSession()
195-
196-
const [tweetStat, setTweetStat] = useState<[number, number] | null>();
197-
const [memoryStat, setMemoryStat] = useState<[number, number] | null>();
192+
const [tweetStat, setTweetStat] = useState<[number, number] | null>();
193+
const [memoryStat, setMemoryStat] = useState<[number, number] | null>();
198194

199-
const [loading, setLoading] = useState(true)
195+
const [loading, setLoading] = useState(true);
200196

201-
useEffect(() => {
202-
fetch("/api/getCount").then(async resp => {
203-
const data = await resp.json() as any;
204-
setTweetStat([data.tweetsCount, data.tweetsLimit])
205-
setMemoryStat([data.pageCount, data.pageLimit])
206-
setLoading(false)
207-
})
208-
}, [open])
197+
useEffect(() => {
198+
fetch("/api/getCount").then(async (resp) => {
199+
const data = (await resp.json()) as any;
200+
setTweetStat([data.tweetsCount, data.tweetsLimit]);
201+
setMemoryStat([data.pageCount, data.pageLimit]);
202+
setLoading(false);
203+
});
204+
}, [open]);
209205

210-
return (
211-
<div className="text-rgray-11 h-full flex w-full font-normal flex-col items-start py-3 md:py-8 text-left">
206+
return (
207+
<div className="text-rgray-11 flex h-full w-full flex-col items-start py-3 text-left font-normal md:py-8">
212208
<div className="w-full px-6">
213209
<h1 className="w-full text-2xl font-medium">Profile</h1>
214-
<div className="w-full mt-5 grid gap-1 grid-cols-3">
215-
<img
216-
className="rounded-full"
217-
src={session?.user?.image ?? "/icons/white_without_bg.png"}
218-
onError={(e) => {
219-
(e.target as HTMLImageElement).src = "/icons/white_without_bg.png"
220-
}}
221-
/>
222-
<div className="col-span-2 flex flex-col justify-center items-start">
223-
<h1 className="text-xl font-medium">{session?.user?.name}</h1>
224-
<span>
225-
{session?.user?.email}
226-
</span>
227-
<button
228-
onClick={() => signOut()}
229-
className="flex justify-center mt-auto gap-2 items-center bg-rgray-4 hover:bg-rgray-5 focus-visible:bg-rgray-5 focus-visible:ring-rgray-7 relative rounded-md px-4 py-2 ring-transparent transition focus-visible:outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-70"
230-
>
231-
<LogOut className="w-4 h-4" />
232-
Logout
233-
</button>
234-
</div>
235-
</div>
236-
</div>
237-
<div className="w-full mt-auto pt-8 px-8 border-t border-rgray-5">
238-
<h1 className="w-full text-xl flex items-center gap-2">
239-
<Box className="w-6 h-6" />
240-
Storage
241-
</h1>
242-
{loading ? (
243-
<div className="flex w-full my-5 gap-5 flex-col justify-center items-center">
244-
<div className="bg-rgray-5 h-6 w-full animate-pulse rounded-md text-lg"></div>
245-
<div className="bg-rgray-5 h-6 w-full animate-pulse rounded-md text-lg"></div>
246-
</div>
247-
) : (
248-
<>
249-
<div className="my-5">
250-
<h2 className="w-full text-md flex justify-between items-center">
251-
Memories
252-
<div className="flex rounded-md bg-rgray-4 px-2 py-2 text-white/50 text-xs">
253-
{memoryStat?.join("/")}
254-
</div>
255-
</h2>
256-
<div className="rounded-full overflow-hidden w-full h-5 bg-rgray-2 mt-2">
257-
<div style={{
258-
width: `${((memoryStat?.[0] ?? 0) / (memoryStat?.[1] ?? 100))*100}%`,
259-
minWidth: memoryStat?.[0] ?? 0 > 0 ? '5%' : '0%'
260-
}} className="rounded-full h-full bg-rgray-5" />
261-
</div>
262-
</div>
263-
<div className="my-5">
264-
<h2 className="w-full text-md flex justify-between items-center">
265-
Tweets
266-
<div className="flex rounded-md bg-rgray-4 px-2 py-2 text-white/50 text-xs">
267-
{tweetStat?.join("/")}
268-
</div>
269-
</h2>
270-
<div className="rounded-full overflow-hidden w-full h-5 bg-rgray-2 mt-2">
271-
<div style={{
272-
width: `${((tweetStat?.[0] ?? 0) / (tweetStat?.[1] ?? 100))*100}%` ,
273-
minWidth: tweetStat?.[0] ?? 0 > 0 ? '5%' : '0%'
274-
}} className="rounded-full h-full bg-rgray-5" />
275-
</div>
276-
</div>
277-
</>
278-
)}
279-
</div>
280-
</div>
281-
)
210+
<div className="mt-5 grid w-full grid-cols-3 gap-1">
211+
<img
212+
className="rounded-full"
213+
src={session?.user?.image ?? "/icons/white_without_bg.png"}
214+
onError={(e) => {
215+
(e.target as HTMLImageElement).src =
216+
"/icons/white_without_bg.png";
217+
}}
218+
/>
219+
<div className="col-span-2 flex flex-col items-start justify-center">
220+
<h1 className="text-xl font-medium">{session?.user?.name}</h1>
221+
<span>{session?.user?.email}</span>
222+
<button
223+
onClick={() => signOut()}
224+
className="bg-rgray-4 hover:bg-rgray-5 focus-visible:bg-rgray-5 focus-visible:ring-rgray-7 relative mt-auto flex items-center justify-center gap-2 rounded-md px-4 py-2 ring-transparent transition focus-visible:outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-70"
225+
>
226+
<LogOut className="h-4 w-4" />
227+
Logout
228+
</button>
229+
</div>
230+
</div>
231+
</div>
232+
<div className="border-rgray-5 mt-auto w-full border-t px-8 pt-8">
233+
<h1 className="flex w-full items-center gap-2 text-xl">
234+
<Box className="h-6 w-6" />
235+
Storage
236+
</h1>
237+
{loading ? (
238+
<div className="my-5 flex w-full flex-col items-center justify-center gap-5">
239+
<div className="bg-rgray-5 h-6 w-full animate-pulse rounded-md text-lg"></div>
240+
<div className="bg-rgray-5 h-6 w-full animate-pulse rounded-md text-lg"></div>
241+
</div>
242+
) : (
243+
<>
244+
<div className="my-5">
245+
<h2 className="text-md flex w-full items-center justify-between">
246+
Memories
247+
<div className="bg-rgray-4 flex rounded-md px-2 py-2 text-xs text-white/50">
248+
{memoryStat?.join("/")}
249+
</div>
250+
</h2>
251+
<div className="bg-rgray-2 mt-2 h-5 w-full overflow-hidden rounded-full">
252+
<div
253+
style={{
254+
width: `${((memoryStat?.[0] ?? 0) / (memoryStat?.[1] ?? 100)) * 100}%`,
255+
minWidth: memoryStat?.[0] ?? 0 > 0 ? "5%" : "0%",
256+
}}
257+
className="bg-rgray-5 h-full rounded-full"
258+
/>
259+
</div>
260+
</div>
261+
<div className="my-5">
262+
<h2 className="text-md flex w-full items-center justify-between">
263+
Tweets
264+
<div className="bg-rgray-4 flex rounded-md px-2 py-2 text-xs text-white/50">
265+
{tweetStat?.join("/")}
266+
</div>
267+
</h2>
268+
<div className="bg-rgray-2 mt-2 h-5 w-full overflow-hidden rounded-full">
269+
<div
270+
style={{
271+
width: `${((tweetStat?.[0] ?? 0) / (tweetStat?.[1] ?? 100)) * 100}%`,
272+
minWidth: tweetStat?.[0] ?? 0 > 0 ? "5%" : "0%",
273+
}}
274+
className="bg-rgray-5 h-full rounded-full"
275+
/>
276+
</div>
277+
</div>
278+
</>
279+
)}
280+
</div>
281+
</div>
282+
);
282283
}

0 commit comments

Comments
 (0)