Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-29 22:58:51 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

reorganize components and add root import plugin

Browse source
This commit is contained in:
Danny Avila 2023-02-07 10:26:19 -05:00
parent faf8800e67
commit 9d41ed4615
27 changed files with 76 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

76
src/components/Nav/MobileNav.jsx Normal file
View file

@ -0,0 +1,76 @@
import React from 'react';
export default function MobileNav({ title = 'New Chat' }) {
return (
<div className="sticky top-0 z-10 flex items-center border-b border-white/20 bg-gray-800 pl-1 pt-1 text-gray-200 sm:pl-3 md:hidden">
<button
type="button"
className="-ml-0.5 -mt-0.5 inline-flex h-10 w-10 items-center justify-center rounded-md hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white dark:hover:text-white"
>
<span className="sr-only">Open sidebar</span>
<svg
stroke="currentColor"
fill="none"
strokeWidth="1.5"
viewBox="0 0 24 24"
strokeLinecap="round"
strokeLinejoin="round"
className="h-6 w-6"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<line
x1="3"
y1="12"
x2="21"
y2="12"
/>
<line
x1="3"
y1="6"
x2="21"
y2="6"
/>
<line
x1="3"
y1="18"
x2="21"
y2="18"
/>
</svg>
</button>
<h1 className="flex-1 text-center text-base font-normal">{title}</h1>
<button
type="button"
className="px-3"
>
<svg
stroke="currentColor"
fill="none"
strokeWidth="1.5"
viewBox="0 0 24 24"
strokeLinecap="round"
strokeLinejoin="round"
className="h-6 w-6"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<line
x1="12"
y1="5"
x2="12"
y2="19"
/>
<line
x1="5"
y1="12"
x2="19"
y2="12"
/>
</svg>
</button>
</div>
);
}

10
src/components/Nav/NavLink.jsx Normal file
View file

@ -0,0 +1,10 @@
import React from 'react';
export default function NavLink({ svg, text }) {
return (
<a className="flex cursor-pointer items-center gap-3 rounded-md py-3 px-3 text-sm text-white transition-colors duration-200 hover:bg-gray-500/10">
{svg()}
{text}
</a>
);
}

24
src/components/Nav/NavLinks.jsx Normal file
View file

@ -0,0 +1,24 @@
import React from 'react';
import NavLink from './NavLink';
import TrashIcon from '../svg/TrashIcon';
import DarkModeIcon from '../svg/DarkModeIcon';
import LogOutIcon from '../svg/LogOutIcon';
export default function NavLinks() {
return (
<>
<NavLink
svg={TrashIcon}
text="Clear conversations"
/>
<NavLink
svg={DarkModeIcon}
text="Dark mode"
/>
<NavLink
svg={LogOutIcon}
text="Log out"
/>
</>
);
}

34
src/components/Nav/NewChat.jsx Normal file
View file

@ -0,0 +1,34 @@
import React from 'react';
export default function NewChat() {
return (
<a className="mb-2 flex flex-shrink-0 cursor-pointer items-center gap-3 rounded-md border border-white/20 py-3 px-3 text-sm text-white transition-colors duration-200 hover:bg-gray-500/10">
<svg
stroke="currentColor"
fill="none"
strokeWidth="2"
viewBox="0 0 24 24"
strokeLinecap="round"
strokeLinejoin="round"
className="h-4 w-4"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<line
x1="12"
y1="5"
x2="12"
y2="19"
/>
<line
x1="5"
y1="12"
x2="19"
y2="12"
/>
</svg>
New chat
</a>
);
}

20
src/components/Nav/index.jsx Normal file
View file

@ -0,0 +1,20 @@
import React from 'react';
import NewChat from './NewChat';
import Conversations from '../Conversations';
import NavLinks from './NavLinks';
export default function Nav({ conversations }) {
return (
<div className="dark hidden bg-gray-900 md:fixed md:inset-y-0 md:flex md:w-[260px] md:flex-col">
<div className="flex h-full min-h-0 flex-col ">
<div className="scrollbar-trigger flex h-full w-full flex-1 items-start border-white/20">
<nav className="flex h-full flex-1 flex-col space-y-1 p-2">
<NewChat />
<Conversations conversations={conversations} />
<NavLinks />
</nav>
</div>
</div>
</div>
);
}