cerc-io/snowballtools-base
16
0
Fork 2
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

♻️ refactor: move sidebar inside shared components

Browse Source
This commit is contained in:
Wahyu Kurniawan 2024-02-28 08:30:20 +07:00
parent 3215a19141
commit 66277d6c3b
No known key found for this signature in database
GPG Key ID: 040A1549143A8E33
2 changed files with 25 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
packages/frontend/src/components/Sidebar.tsx → packages/frontend/src/components/shared/Sidebar/Sidebar.tsx
View File

@ -5,8 +5,8 @@ import { Organization } from 'gql-client';
import { Option } from '@material-tailwind/react'; import { Option } from '@material-tailwind/react';
import { useDisconnect } from 'wagmi'; import { useDisconnect } from 'wagmi';
import { useGQLClient } from '../context/GQLClientContext'; import { useGQLClient } from 'context/GQLClientContext';
import AsyncSelect from './shared/AsyncSelect'; import AsyncSelect from 'components/shared/AsyncSelect';
import { import {
ChevronGrabberHorizontal, ChevronGrabberHorizontal,
FolderIcon, FolderIcon,
@ -14,10 +14,11 @@ import {
LifeBuoyIcon, LifeBuoyIcon,
QuestionMarkRoundIcon, QuestionMarkRoundIcon,
SettingsSlidersIcon, SettingsSlidersIcon,
} from './shared/CustomIcon'; } from 'components/shared/CustomIcon';
import { Tabs } from 'components/shared/Tabs'; import { Tabs } from 'components/shared/Tabs';
import { Heading } from 'components/shared/Heading';
const Sidebar = () => { export const Sidebar = () => {
const { orgSlug } = useParams(); const { orgSlug } = useParams();
const navigate = useNavigate(); const navigate = useNavigate();
const client = useGQLClient(); const client = useGQLClient();
@ -42,20 +43,20 @@ const Sidebar = () => {
}, [disconnect, navigate]); }, [disconnect, navigate]);
return ( return (
<div className="flex flex-col h-full p-4 pt-10"> <div className="flex flex-col h-full px-6 py-8 gap-9">
<div className="grow"> {/* Logo */}
<Link to={`/${orgSlug}`}> <Link to={`/${orgSlug}`}>
<div className="flex items-center space-x-3 mb-10 ml-2"> <div className="flex items-center gap-3 px-2">
<img <img
src="/logo.svg" src="/logo.svg"
alt="Snowball Logo" alt="Snowball Logo"
className="h-8 w-8 rounded-lg" className="h-10 w-10 rounded-lg"
/> />
<span className="text-2xl font-bold text-snowball-900"> <Heading className="text-[24px]">Snowball</Heading>
Snowball </div>
</span> </Link>
</div> {/* Switch organization */}
</Link> <div className="flex flex-1 flex-col gap-4">
<AsyncSelect <AsyncSelect
containerProps={{ className: 'h-14 border-none' }} containerProps={{ className: 'h-14 border-none' }}
labelProps={{ className: 'before:border-none after:border-none' }} labelProps={{ className: 'before:border-none after:border-none' }}
@ -82,7 +83,7 @@ const Sidebar = () => {
)} )}
arrow={<ChevronGrabberHorizontal className="h-4 w-4 text-gray-500" />} arrow={<ChevronGrabberHorizontal className="h-4 w-4 text-gray-500" />}
> >
{/* TODO: Show label organization and manage in option */} {/* // TODO: Show label organization and manage in option */}
{organizations.map((org) => ( {organizations.map((org) => (
<Option key={org.id} value={org.slug}> <Option key={org.id} value={org.slug}>
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
@ -99,7 +100,7 @@ const Sidebar = () => {
</Option> </Option>
))} ))}
</AsyncSelect> </AsyncSelect>
<Tabs defaultValue="Projects" orientation="vertical" className="mt-10"> <Tabs defaultValue="Projects" orientation="vertical">
<Tabs.List> <Tabs.List>
{[ {[
{ title: 'Projects', url: `/${orgSlug}/`, icon: <FolderIcon /> }, { title: 'Projects', url: `/${orgSlug}/`, icon: <FolderIcon /> },
@ -118,9 +119,10 @@ const Sidebar = () => {
</Tabs.List> </Tabs.List>
</Tabs> </Tabs>
</div> </div>
<div className="grow flex flex-col justify-end mb-8"> {/* Bottom navigation */}
<div className="flex flex-col justify-end">
<Tabs defaultValue="Projects" orientation="vertical"> <Tabs defaultValue="Projects" orientation="vertical">
{/* TODO: use proper link buttons */} {/* // TODO: use proper link buttons */}
<Tabs.List> <Tabs.List>
<Tabs.Trigger icon={<GlobeIcon />} value=""> <Tabs.Trigger icon={<GlobeIcon />} value="">
<a className="cursor-pointer" onClick={handleLogOut}> <a className="cursor-pointer" onClick={handleLogOut}>
@ -139,5 +141,3 @@ const Sidebar = () => {
</div> </div>
); );
}; };
export default Sidebar;

1
packages/frontend/src/components/shared/Sidebar/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './Sidebar';