Thream/website
Archived
2
2
Fork 0
Code Issues Pull Requests Releases Activity

feat: coming soon

Browse Source
This commit is contained in:
Divlo
2021-10-24 05:48:06 +02:00
parent 21123c4477
commit 33bd2bb6bf
176 changed files with 36858 additions and 22133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
components/Application/Sidebar/SidebarItem.tsx
View File

@ -1,19 +0,0 @@
import { memo } from 'react'
export const SidebarItem: React.FC = memo((props) => {
return (
<>
<li className='sidebar-item'>{props.children}</li>
<style jsx>
{`
.sidebar-item {
position: relative;
margin: 10px;
cursor: pointer;
}
`}
</style>
</>
)
})

28
components/Application/Sidebar/SidebarList.tsx
View File

@ -1,28 +0,0 @@
export interface SidebarListProps extends React.ComponentPropsWithRef<'ul'> {}
export const SidebarList: React.FC<SidebarListProps> = (props) => {
const { children, ...rest } = props
return (
<>
<ul {...rest} className='sidebar-list'>
{children}
</ul>
<style jsx>
{`
.sidebar-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-flow: column wrap;
overflow-y: auto;
overflow-x: hidden;
flex-direction: row !important;
}
`}
</style>
</>
)
}

10
components/Application/Sidebar/__test__/SidebarItem.test.tsx
View File

@ -1,10 +0,0 @@
import { render } from '@testing-library/react'
import { SidebarItem } from '../SidebarItem'
describe('<SidebarItem />', () => {
it('should render', async () => {
const { getByText } = render(<SidebarItem>Item</SidebarItem>)
expect(getByText('Item')).toBeInTheDocument()
})
})

10
components/Application/Sidebar/__test__/SidebarList.test.tsx
View File

@ -1,10 +0,0 @@
import { render } from '@testing-library/react'
import { SidebarList } from '../SidebarList'
describe('<SidebarList />', () => {
it('should render', async () => {
const { getByText } = render(<SidebarList>List Item</SidebarList>)
expect(getByText('List Item')).toBeInTheDocument()
})
})

98
components/Application/Sidebar/index.tsx
View File

@ -1,98 +0,0 @@
import useTranslation from 'next-translate/useTranslation'
import InfiniteScroll from 'react-infinite-scroll-component'
import { IconButton } from 'components/design/IconButton'
import { Avatar } from 'components/design/Avatar'
import { SidebarItem } from './SidebarItem'
import { SidebarList } from './SidebarList'
import { API_URL } from 'utils/api'
import { useGuilds } from 'contexts/Guilds'
import { Tooltip } from 'components/design/Tooltip'
import { useAuthentication } from 'utils/authentication'
import { Loader } from 'components/design/Loader'
import Link from 'next/link'
export const Sidebar: React.FC = () => {
const { guilds, nextPage } = useGuilds()
const { t } = useTranslation()
const { user } = useAuthentication()
return (
<>
<nav className='sidebar'>
<SidebarList id='sidebar-list'>
<SidebarItem>
<Link href='/application'>
<Tooltip content={t('application:settings')} direction='right'>
<Avatar
src='/images/icons/Thream.png'
alt='Thream'
width={60}
height={60}
/>
</Tooltip>
</Link>
</SidebarItem>
<SidebarItem>
<Tooltip content={t('application:settings')} direction='right'>
<Avatar
src={`${API_URL}${user.logo}`}
alt={user.name}
width={60}
height={60}
/>
</Tooltip>
</SidebarItem>
<SidebarItem>
<Tooltip content={t('application:add-guild')} direction='right'>
<IconButton icon='add' hasBackground />
</Tooltip>
</SidebarItem>
<InfiniteScroll
dataLength={guilds.rows.length}
next={nextPage}
style={{ overflow: 'none' }}
hasMore={guilds.hasMore}
loader={<Loader />}
scrollableTarget='sidebar-list'
>
{guilds.rows.map((row) => {
return (
<SidebarItem key={row.id}>
<Link
href={`/application/${row.guildId}/${row.lastVisitedChannelId}`}
>
<Tooltip content={row.guild.name} direction='right'>
<Avatar
src={`${API_URL}${row.guild.icon}`}
alt={row.guild.name}
width={60}
height={60}
/>
</Tooltip>
</Link>
</SidebarItem>
)
})}
</InfiniteScroll>
</SidebarList>
</nav>
<style jsx>
{`
.sidebar {
display: flex;
flex-flow: column wrap;
justify-content: space-between;
align-items: center;
position: fixed;
background-color: var(--color-background-primary);
width: var(--sidebar-width);
height: 100vh;
padding: 0 15px;
}
`}
</style>
</>
)
}