mirror of
https://github.com/trushildhokiya/allininx-2.git
synced 2025-03-15 11:38:40 +00:00
#debug 1
This commit is contained in:
parent
5a6c465dab
commit
667a2a97b8
@ -2,7 +2,7 @@ import Image from "next/image";
|
|||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
import { useTranslation } from "next-i18next";
|
import { useTranslation } from "next-i18next";
|
||||||
import { FaBars } from "react-icons/fa";
|
import { FaBars } from "react-icons/fa";
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
import { DrawerItemButton, DrawerItemButtonLoader } from "./DrawerItemButton";
|
import { DrawerItemButton, DrawerItemButtonLoader } from "./DrawerItemButton";
|
||||||
import type { DisplayProps } from "./Sidebar";
|
import type { DisplayProps } from "./Sidebar";
|
||||||
import Sidebar from "./Sidebar";
|
import Sidebar from "./Sidebar";
|
||||||
@ -21,22 +21,64 @@ const LeftSidebar = ({ show, setShow, onReload }: DisplayProps & { onReload?: ()
|
|||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { signIn, status } = useAuth();
|
const { signIn, status } = useAuth();
|
||||||
const [t] = useTranslation("drawer");
|
const [t] = useTranslation("drawer");
|
||||||
|
const [isPageLoading, setIsPageLoading] = useState(false);
|
||||||
|
|
||||||
const { isLoading, data } = api.agent.getAll.useQuery(undefined, {
|
const { isLoading, data } = api.agent.getAll.useQuery(undefined, {
|
||||||
enabled: status === "authenticated",
|
enabled: status === "authenticated",
|
||||||
});
|
});
|
||||||
const userAgents = data ?? [];
|
const userAgents = data ?? [];
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleStart = (url: string) => {
|
||||||
|
if (PAGE_LINKS.some(link => link.href === url)) {
|
||||||
|
setIsPageLoading(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleComplete = () => {
|
||||||
|
setIsPageLoading(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
router.events.on('routeChangeStart', handleStart);
|
||||||
|
router.events.on('routeChangeComplete', handleComplete);
|
||||||
|
router.events.on('routeChangeError', handleComplete);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
router.events.off('routeChangeStart', handleStart);
|
||||||
|
router.events.off('routeChangeComplete', handleComplete);
|
||||||
|
router.events.off('routeChangeError', handleComplete);
|
||||||
|
};
|
||||||
|
}, [router]);
|
||||||
|
|
||||||
const navigateToPage = (href: string) => {
|
const navigateToPage = (href: string) => {
|
||||||
if (router.pathname === href) {
|
if (router.pathname === href) {
|
||||||
onReload?.();
|
onReload?.();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
void router.push(href);
|
void router.push(href);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
|
{isPageLoading && (
|
||||||
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
|
||||||
|
<div className="relative space-y-3 text-center">
|
||||||
|
<div className="h-1.5 w-32 overflow-hidden rounded-full bg-gray-800">
|
||||||
|
<div className="absolute inset-0">
|
||||||
|
<div
|
||||||
|
className="h-full w-1/3 bg-blue-500"
|
||||||
|
style={{
|
||||||
|
animation: 'loadingN 1.5s infinite ease-in-out',
|
||||||
|
transform: 'translateX(-100%)'
|
||||||
|
}}
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm font-medium text-white/90">Loading...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
<Sidebar show={show} setShow={setShow} side="left" className="border-2 bg-black border-gray-800">
|
<Sidebar show={show} setShow={setShow} side="left" className="border-2 bg-black border-gray-800">
|
||||||
<div className="flex flex-row items-center pb-6">
|
<div className="flex flex-row items-center pb-6">
|
||||||
<Link href="/" className="flex cursor-pointer items-center">
|
<Link href="/" className="flex cursor-pointer items-center">
|
||||||
@ -48,47 +90,20 @@ const LeftSidebar = ({ show, setShow, onReload }: DisplayProps & { onReload?: ()
|
|||||||
className="btn-primary-orange ml-auto flex rounded-md border-none bg-orange-500/50 p-2 text-orange-500 transition-all"
|
className="btn-primary-orange ml-auto flex rounded-md border-none bg-orange-500/50 p-2 text-orange-500 transition-all"
|
||||||
onClick={() => navigateToPage("/chat")}
|
onClick={() => navigateToPage("/chat")}
|
||||||
>
|
>
|
||||||
|
|
||||||
<SquarePlus className="mr-2" /> New Agent
|
<SquarePlus className="mr-2" /> New Agent
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
className="ml-auto rounded-md border-none hover:scale-110 transition-all duration-150"
|
className="ml-auto rounded-md border-none hover:scale-110 transition-all duration-150"
|
||||||
onClick={() => setShow(!show)}
|
onClick={() => setShow(!show)}
|
||||||
>
|
>
|
||||||
<FaX size="18" className="z-20 text-white-" />
|
<FaX size="18" className="z-20 text-white" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="mb-2 mr-2 flex-1 overflow-y-auto overflow-x-hidden overflow-ellipsis">
|
|
||||||
{/* {status === "unauthenticated" && (
|
|
||||||
<div className="p-1 text-sm text-slate-12">
|
|
||||||
<a className="link" onClick={() => void signIn()}>
|
|
||||||
{t("SIGN_IN")}
|
|
||||||
</a>{" "}
|
|
||||||
{t("SIGN_IN_NOTICE")}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{status === "authenticated" && !isLoading && userAgents.length === 0 && (
|
|
||||||
<div className="p-1 text-sm text-white">
|
|
||||||
{t("NEED_TO_SIGN_IN_AND_CREATE_AGENT_FIRST")}
|
|
||||||
</div>
|
|
||||||
)} */}
|
|
||||||
{/* {(status === "loading" || (status === "authenticated" && isLoading)) && (
|
|
||||||
<div className="flex flex-col gap-2 overflow-hidden">
|
|
||||||
{Array(13)
|
|
||||||
.fill(0)
|
|
||||||
.map((_, index) => (
|
|
||||||
<DrawerItemButtonLoader key={index} />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)} */}
|
|
||||||
|
|
||||||
|
<div className="mb-2 mr-2 flex-1 overflow-y-auto overflow-x-hidden overflow-ellipsis">
|
||||||
<p className="my-5 text-3xl font-semibold text-white">Welcome Back to Allinix</p>
|
<p className="my-5 text-3xl font-semibold text-white">Welcome Back to Allinix</p>
|
||||||
<p className="text-sm">Valid member of Allinix since Jan 2025</p>
|
<p className="text-sm">Valid member of Allinix since Jan 2025</p>
|
||||||
|
|
||||||
{/* <button className="px-3 py-2 btn-primary-teal text-teal-500 bg-teal-600/50 flex w-full text-center justify-center rounded-lg my-4">
|
|
||||||
<Rocket className="mr-2 fill-teal-500" /> Subscribe
|
|
||||||
</button> */}
|
|
||||||
|
|
||||||
<ul role="list" className="flex flex-col">
|
<ul role="list" className="flex flex-col">
|
||||||
<ul className="mb-2">
|
<ul className="mb-2">
|
||||||
<div className="mb-2 ml-2 text-base my-4 font-semibold text-slate-10">Menu</div>
|
<div className="mb-2 ml-2 text-base my-4 font-semibold text-slate-10">Menu</div>
|
||||||
@ -115,31 +130,31 @@ const LeftSidebar = ({ show, setShow, onReload }: DisplayProps & { onReload?: ()
|
|||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ul role="list" className="flex flex-col">
|
<ul role="list" className="flex flex-col">
|
||||||
<li className="mb-2">
|
<li className="mb-2">
|
||||||
<div className="mx-2 flex items-center justify-center gap-3">
|
<div className="mx-2 flex items-center justify-center gap-3">
|
||||||
{SOCIAL_LINKS.map((link) => (
|
{SOCIAL_LINKS.map((link) => (
|
||||||
<motion.div
|
<motion.div
|
||||||
|
key={link.name}
|
||||||
whileHover={{ scale: 1.2, opacity: 0.9 }}
|
whileHover={{ scale: 1.2, opacity: 0.9 }}
|
||||||
whileTap={{ scale: 0.9 }}
|
whileTap={{ scale: 0.9 }}
|
||||||
transition={{ type: "spring", stiffness: 300, damping: 15 }}
|
transition={{ type: "spring", stiffness: 300, damping: 15 }}
|
||||||
>
|
>
|
||||||
<LinkIconItem
|
<LinkIconItem
|
||||||
key={link.name}
|
|
||||||
href={link.href}
|
href={link.href}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
void router.push(link.href);
|
void router.push(link.href);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{link.icon instanceof Object ? (
|
{link.icon instanceof Object ? (
|
||||||
<link.icon size={20} className="" />
|
<link.icon size={20} />
|
||||||
) : (
|
) : (
|
||||||
<Image
|
<Image
|
||||||
src={link.icon}
|
src={link.icon}
|
||||||
width={link.width}
|
width={link.width}
|
||||||
height={link.height}
|
height={link.height}
|
||||||
className=""
|
alt="icon"
|
||||||
alt="image"
|
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</LinkIconItem>
|
</LinkIconItem>
|
||||||
@ -147,19 +162,14 @@ const LeftSidebar = ({ show, setShow, onReload }: DisplayProps & { onReload?: ()
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
|
||||||
<div className="mb-2 ml-2 text-xs font-semibold text-slate-10"></div>
|
|
||||||
</li>
|
|
||||||
<li>
|
<li>
|
||||||
<div className="mb-2 ml-2 text-center text-xs font-semibold text-slate-10">
|
<div className="mb-2 ml-2 text-center text-xs font-semibold text-slate-10">
|
||||||
@{new Date().getFullYear()} Allinix.ai | All Rights reserved
|
@{new Date().getFullYear()} Allinix.ai | All Rights reserved
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
{/* <li>
|
|
||||||
<AuthItem session={session} signOut={signOut} signIn={signIn} />
|
|
||||||
</li> */}
|
|
||||||
</ul>
|
</ul>
|
||||||
</Sidebar>
|
</Sidebar>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -19,11 +19,40 @@ img {
|
|||||||
0% {
|
0% {
|
||||||
transform: translateX(-100%);
|
transform: translateX(-100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: translateX(200%);
|
transform: translateX(200%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes loadingN {
|
||||||
|
0% {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Optional: Add smooth transitions for loading overlay */
|
||||||
|
.fixed {
|
||||||
|
transition-property: opacity;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Optional: Add backdrop blur transition */
|
||||||
|
.backdrop-blur-sm {
|
||||||
|
transition-property: backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
|
}
|
||||||
|
|
||||||
.gradient-text {
|
.gradient-text {
|
||||||
background: linear-gradient(180deg, #fff 0%, #525252 100%);
|
background: linear-gradient(180deg, #fff 0%, #525252 100%);
|
||||||
background-clip: text;
|
background-clip: text;
|
||||||
@ -37,6 +66,7 @@ img {
|
|||||||
box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.5) inset;
|
box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.5) inset;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary-orange {
|
.btn-primary-orange {
|
||||||
border: 1px solid rgba(255, 134, 53, 0.1);
|
border: 1px solid rgba(255, 134, 53, 0.1);
|
||||||
background: rgba(255, 134, 53, 0.1);
|
background: rgba(255, 134, 53, 0.1);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user