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

feat: side bar tabs + icons

Browse Source
This commit is contained in:
Eric Lewis 2024-02-26 18:35:45 -05:00
parent 48fd953c60
commit 2442e92395
7 changed files with 121 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/frontend/src/components/Sidebar.tsx
View File

@ -7,7 +7,14 @@ import { useDisconnect } from 'wagmi';
import { useGQLClient } from '../context/GQLClientContext';
import AsyncSelect from './shared/AsyncSelect';
import { ChevronGrabberHorizontal, GlobeIcon } from './shared/CustomIcon';
import {
ChevronGrabberHorizontal,
FolderIcon,
GlobeIcon,
LifeBuoyIcon,
QuestionMarkRoundIcon,
SettingsSlidersIcon,
} from './shared/CustomIcon';
import { Tabs } from 'components/shared/Tabs';
const Sidebar = () => {
@ -35,7 +42,7 @@ const Sidebar = () => {
}, [disconnect, navigate]);
return (
<div className="flex flex-col h-full p-4 mt-5">
<div className="flex flex-col h-full p-4 pt-5">
<div className="grow">
<Link to={`/${orgSlug}`}>
<div className="flex items-center space-x-3 mb-10 ml-2">
@ -90,11 +97,14 @@ const Sidebar = () => {
</Option>
))}
</AsyncSelect>
<Tabs defaultValue="Projects" orientation="vertical" className="mt-5">
<Tabs defaultValue="Projects" orientation="vertical" className="mt-10">
<Tabs.List>
{['Projects', 'Settings'].slice(0, 2).map((title, index) => (
{[
{ title: 'Projects', icon: <FolderIcon /> },
{ title: 'Settings', icon: <SettingsSlidersIcon /> },
].map(({ title, icon }, index) => (
<NavLink to={`/${orgSlug}/${title}`} key={index}>
<Tabs.Trigger icon={<GlobeIcon />} value={title}>
<Tabs.Trigger icon={icon} value={title}>
{title}
</Tabs.Trigger>
</NavLink>
@ -102,7 +112,7 @@ const Sidebar = () => {
</Tabs.List>
</Tabs>
</div>
<div className="grow flex flex-col justify-end mb-10">
<div className="grow flex flex-col justify-end mb-8">
<Tabs defaultValue="Projects" orientation="vertical">
{/* TODO: use proper link buttons */}
<Tabs.List>
@ -111,10 +121,10 @@ const Sidebar = () => {
Log Out
</a>
</Tabs.Trigger>
<Tabs.Trigger icon={<GlobeIcon />} value="">
<Tabs.Trigger icon={<QuestionMarkRoundIcon />} value="">
<a className="cursor-pointer">Documentation</a>
</Tabs.Trigger>
<Tabs.Trigger icon={<GlobeIcon />} value="">
<Tabs.Trigger icon={<LifeBuoyIcon />} value="">
<a className="cursor-pointer">Support</a>
</Tabs.Trigger>
</Tabs.List>

22
packages/frontend/src/components/shared/CustomIcon/FolderIcon.tsx Normal file
View File

@ -0,0 +1,22 @@
import React from 'react';
import { CustomIcon, CustomIconProps } from './CustomIcon';
export const FolderIcon = (props: CustomIconProps) => {
return (
<CustomIcon
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
{...props}
>
<path
id="Icon"
d="M2.0835 4.58341V14.5834C2.0835 15.5039 2.82969 16.2501 3.75016 16.2501H16.2502C17.1706 16.2501 17.9168 15.5039 17.9168 14.5834V7.08341C17.9168 6.16294 17.1706 5.41675 16.2502 5.41675H10.8921C10.3349 5.41675 9.81449 5.13825 9.50539 4.67458L8.82827 3.65891C8.51916 3.19525 7.99878 2.91675 7.44152 2.91675H3.75016C2.82969 2.91675 2.0835 3.66294 2.0835 4.58341Z"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
/>
</CustomIcon>
);
};

20
packages/frontend/src/components/shared/CustomIcon/LifeBuoyIcon.tsx Normal file
View File

@ -0,0 +1,20 @@
import React from 'react';
import { CustomIcon, CustomIconProps } from './CustomIcon';
export const LifeBuoyIcon = (props: CustomIconProps) => {
return (
<CustomIcon
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
{...props}
>
<path
id="Icon"
d="M4.5835 4.58325L7.35092 7.35068M7.35092 12.6492L4.5835 15.4166M12.6494 12.6492L15.4168 15.4166M15.4168 4.58325L12.6494 7.35068M17.9168 9.99992C17.9168 14.3722 14.3724 17.9166 10.0002 17.9166C5.62791 17.9166 2.0835 14.3722 2.0835 9.99992C2.0835 5.62766 5.62791 2.08325 10.0002 2.08325C14.3724 2.08325 17.9168 5.62766 17.9168 9.99992ZM13.7502 9.99992C13.7502 12.071 12.0712 13.7499 10.0002 13.7499C7.92909 13.7499 6.25016 12.071 6.25016 9.99992C6.25016 7.92885 7.92909 6.24992 10.0002 6.24992C12.0712 6.24992 13.7502 7.92885 13.7502 9.99992Z"
stroke="currentColor"
/>
</CustomIcon>
);
};

33
packages/frontend/src/components/shared/CustomIcon/QuestionMarkRoundIcon.tsx Normal file
View File

@ -0,0 +1,33 @@
import React from 'react';
import { CustomIcon, CustomIconProps } from './CustomIcon';
export const QuestionMarkRoundIcon = (props: CustomIconProps) => {
return (
<CustomIcon
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
{...props}
>
<g>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M9.99984 2.50008C5.8577 2.50008 2.49984 5.85795 2.49984 10.0001C2.49984 14.1422 5.8577 17.5001 9.99984 17.5001C14.142 17.5001 17.4998 14.1422 17.4998 10.0001C17.4998 5.85795 14.142 2.50008 9.99984 2.50008ZM1.6665 10.0001C1.6665 5.39771 5.39746 1.66675 9.99984 1.66675C14.6022 1.66675 18.3332 5.39771 18.3332 10.0001C18.3332 14.6025 14.6022 18.3334 9.99984 18.3334C5.39746 18.3334 1.6665 14.6025 1.6665 10.0001Z"
fill="currentColor"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M9.58317 6.66675C8.89281 6.66675 8.33317 7.22639 8.33317 7.91675C8.33317 8.14687 8.14662 8.33342 7.9165 8.33342C7.68639 8.33342 7.49984 8.14687 7.49984 7.91675C7.49984 6.76616 8.43258 5.83342 9.58317 5.83342H10.4869C11.5986 5.83342 12.4998 6.73462 12.4998 7.84631C12.4998 8.55337 12.1289 9.20858 11.5226 9.57236L11.0234 9.87187C10.6469 10.0978 10.4165 10.5047 10.4165 10.9437V12.0834C10.4165 12.3135 10.23 12.5001 9.99984 12.5001C9.76972 12.5001 9.58317 12.3135 9.58317 12.0834V10.9437C9.58317 10.2119 9.96713 9.5338 10.5946 9.15729L11.0938 8.85778C11.4491 8.6446 11.6665 8.26065 11.6665 7.84631C11.6665 7.19486 11.1384 6.66675 10.4869 6.66675H9.58317Z"
fill="currentColor"
/>
<path
d="M9.58317 13.7501C9.58317 13.52 9.76972 13.3334 9.99984 13.3334C10.23 13.3334 10.4165 13.52 10.4165 13.7501C10.4165 13.9802 10.23 14.1667 9.99984 14.1667C9.76972 14.1667 9.58317 13.9802 9.58317 13.7501Z"
fill="currentColor"
/>
</g>
</CustomIcon>
);
};

22
packages/frontend/src/components/shared/CustomIcon/SettingsSlidersIcon.tsx Normal file
View File

@ -0,0 +1,22 @@
import React from 'react';
import { CustomIcon, CustomIconProps } from './CustomIcon';
export const SettingsSlidersIcon = (props: CustomIconProps) => {
return (
<CustomIcon
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
{...props}
>
<path
id="Icon"
d="M11.2498 5.83341H2.9165M11.2498 5.83341C11.2498 4.22196 12.555 2.91675 14.1665 2.91675C15.778 2.91675 17.0832 4.22196 17.0832 5.83341C17.0832 7.44487 15.778 8.75008 14.1665 8.75008C12.555 8.75008 11.2498 7.44487 11.2498 5.83341ZM17.0832 14.1667H10.4165M10.4165 14.1667C10.4165 15.7782 9.1113 17.0834 7.49984 17.0834C5.88838 17.0834 4.58317 15.7782 4.58317 14.1667M10.4165 14.1667C10.4165 12.5553 9.1113 11.2501 7.49984 11.2501C5.88838 11.2501 4.58317 12.5553 4.58317 14.1667M4.58317 14.1667H2.9165"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
/>
</CustomIcon>
);
};

4
packages/frontend/src/components/shared/CustomIcon/index.ts
View File

@ -13,3 +13,7 @@ export * from './CalendarIcon';
export * from './CheckRoundFilledIcon';
export * from './InfoRoundFilledIcon';
export * from './LoadingIcon';
export * from './FolderIcon';
export * from './SettingsSlidersIcon';
export * from './LifeBuoyIcon';
export * from './QuestionMarkRoundIcon';

2
packages/frontend/src/components/shared/Tabs/Tabs.theme.ts
View File

@ -24,6 +24,7 @@ export const tabsTheme = tv({
'data-[orientation=vertical]:px-3',
'data-[orientation=vertical]:py-3',
'data-[orientation=vertical]:min-w-[240px]',
'data-[orientation=vertical]:w-full',
'data-[orientation=vertical]:focus-ring',
'data-[orientation=vertical]:rounded-xl',
'data-[orientation=vertical]:border-transparent',
@ -72,6 +73,7 @@ export const tabsTheme = tv({
// Vertical
'data-[orientation=vertical]:flex-col',
'data-[orientation=vertical]:gap-0.5',
'data-[orientation=vertical]:w-full',
],
content: ['text-elements-high-em', 'grow', 'outline-none', 'tab-content'],
},