extern/bruno
1
0
Fork 1
mirror of https://github.com/usebruno/bruno.git synced 2024-12-23 15:19:01 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: collections page (resolves #24)

Browse Source
This commit is contained in:
Anoop M D 2022-10-09 23:15:46 +05:30
parent c8957f5555
commit 50ae592e1e
4 changed files with 100 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/bruno-app/src/components/Sidebar/MenuBar/index.js
View File

@ -1,34 +1,37 @@
import React from 'react'; import React from 'react';
import Link from 'next/link'; import Link from 'next/link';
import { IconCode, IconFiles, IconUser, IconUsers, IconSettings, IconBuilding, IconChevronsLeft} from '@tabler/icons'; import { useRouter } from 'next/router';
import { IconCode, IconFiles, IconUser, IconUsers, IconSettings, IconChevronsLeft} from '@tabler/icons';
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux';
import { toggleLeftMenuBar } from 'providers/ReduxStore/slices/app' import { toggleLeftMenuBar } from 'providers/ReduxStore/slices/app'
import StyledWrapper from './StyledWrapper'; import StyledWrapper from './StyledWrapper';
const MenuBar = () => { const MenuBar = () => {
const leftMenuBarOpen = useSelector((state) => state.app.leftMenuBarOpen); const router = useRouter();
const dispatch = useDispatch(); const dispatch = useDispatch();
const getClassName = (menu) => {
return router.pathname === menu ? "active menu-item": "menu-item";
};
return ( return (
<StyledWrapper className="h-full flex flex-col"> <StyledWrapper className="h-full flex flex-col">
<div className="flex flex-col"> <div className="flex flex-col">
<div className="menu-item active">
<Link href="/"> <Link href="/">
<div className={getClassName('/')}>
<IconCode size={28} strokeWidth={1.5}/> <IconCode size={28} strokeWidth={1.5}/>
</Link>
</div> </div>
<div className="menu-item"> </Link>
<Link href="/collections">
<div className={getClassName('/collections')}>
<IconFiles size={28} strokeWidth={1.5}/> <IconFiles size={28} strokeWidth={1.5}/>
</div> </div>
</Link>
<div className="menu-item"> <div className="menu-item">
<IconUsers size={28} strokeWidth={1.5}/> <IconUsers size={28} strokeWidth={1.5}/>
</div> </div>
</div> </div>
<div className="flex flex-col flex-grow justify-end"> <div className="flex flex-col flex-grow justify-end">
{/* Teams Icon */}
{/* <div className="menu-item">
<IconBuilding size={28} strokeWidth={1.5}/>
</div> */}
<div className="menu-item"> <div className="menu-item">
<Link href="/login"> <Link href="/login">
<IconUser size={28} strokeWidth={1.5}/> <IconUser size={28} strokeWidth={1.5}/>

30
packages/bruno-app/src/pageComponents/Collections/StyledWrapper.js Normal file
View File

@ -0,0 +1,30 @@
import styled from 'styled-components';
const Wrapper = styled.div`
.heading {
display: inline-flex;
font-weight: 600;
margin-top: 1.5rem;
padding: 6px 0px;
border-bottom: 2px solid !important;
}
.collection-list {
min-width: 500px;
.collection-list-item {
padding: 4px 0px;
border-radius: 3px;
&:hover {
background-color: #f4f4f4;
margin-left: -8px;
margin-right: -8px;
padding-left: 8px;
padding-right: 8px;
}
}
}
`;
export default Wrapper;

28
packages/bruno-app/src/pageComponents/Collections/index.js Normal file
View File

@ -0,0 +1,28 @@
import React from 'react';
import { IconEdit, IconTrash } from "@tabler/icons";
import { useSelector } from 'react-redux';
import StyledWrapper from './StyledWrapper';
export default function Collections() {
const collections = useSelector((state) => state.collections.collections);
return (
<StyledWrapper>
<h4 className="heading">Collections</h4>
<div className="collection-list mt-6">
{collections && collections.length ? collections.map((collection) =>
<div className="flex justify-between items-baseline mb-2 collection-list-item" key={collection.uid} >
<li style={{listStyle: 'none'}} className="collection-name">{collection.name}</li>
<div className="flex gap-x-4" >
<IconEdit className="cursor-pointer" size={20} strokeWidth={1.5}/>
<IconTrash className="cursor-pointer" size={20} strokeWidth={1.5}/>
</div>
</div>
): null}
</div>
</StyledWrapper>
);
};

26
packages/bruno-app/src/pages/collections.js Normal file
View File

@ -0,0 +1,26 @@
import Head from 'next/head';
import Collections from 'pageComponents/Collections';
import MenuBar from 'components/Sidebar/MenuBar';
import GlobalStyle from '../globalStyles';
export default function CollectionsPage() {
return (
<div>
<Head>
<title>bruno</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<GlobalStyle />
<main>
<div className="flex flex-row h-full">
<MenuBar />
<div className="flex flex-grow h-full px-8">
<Collections />
</div>
</div>
</main>
</div>
);
};