Skip to content

Commit

Permalink
Merge pull request #406 from dadosjusbr/layout-pagina-inicial
Browse files Browse the repository at this point in the history 
Layout pagina inicial
  • Loading branch information
@danielfireman
danielfireman authored Jul 14, 2023
2 parents 2596ab2 + 61295f5 commit 031a4f2
Show file tree
Hide file tree
Showing 9 changed files with 201 additions and 174 deletions.
6 changes: 3 additions & 3 deletions src/@types/UIAPI_TYPES.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,10 +153,10 @@ type Agency = {
entidade: string;
uf: string;
url: string;
coletando: Collecting[];
coletando?: Collecting[];
twitter_handle: string;
ouvidoria: string;
possui_dados: boolean;
possui_dados?: boolean;
};

type AnnualSummary = {
Expand All @@ -183,7 +183,7 @@ type AnnualSummaryData = {
package: Backup;
};

type mensalRemuneration = {
type MensalRemuneration = {
mes: number;
num_membros: number;
remuneracao_base: number;
Expand Down
71 changes: 42 additions & 29 deletions src/components/DropDownGroupSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,33 @@ import { useRouter } from 'next/router';
import React, { HTMLAttributes } from 'react';
import {
FormControl,
InputBase,
OutlinedInput,
ListSubheader,
MenuItem,
OutlinedInput,
Typography,
} from '@mui/material';
import Select, { SelectChangeEvent } from '@mui/material/Select';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';

import STATE_AGENCIES from '../@types/STATE_AGENCIES';
import { formatToAgency } from '../functions/format';

export interface DropDownGroupSelectorProps
extends Omit<HTMLAttributes<HTMLSelectElement>, 'onChange'> {
value?: STATE_AGENCIES;
noStyle?: boolean;
inputType?: 'outlined' | 'standard' | 'filled';
minWidth?: number;
maxWidth?: number;
}

const DropDownGroupSelector: React.FC<DropDownGroupSelectorProps> = ({
value,
noStyle = false,
inputType = 'standard',
minWidth = 240,
maxWidth = 250,
}) => {
const router = useRouter();
const [agencyName, setAgencyName] = React.useState(value || '');
Expand All @@ -27,7 +39,12 @@ const DropDownGroupSelector: React.FC<DropDownGroupSelectorProps> = ({
};

return (
<FormControl fullWidth sx={{ m: 1, minWidth: 240, maxWidth: 250 }}>
<FormControl
sx={{
minWidth,
maxWidth,
}}
>
<Select
id="orgaos-select"
labelId="orgaos-select-label"
Expand All @@ -37,13 +54,34 @@ const DropDownGroupSelector: React.FC<DropDownGroupSelectorProps> = ({
onChange={handleChange}
displayEmpty
inputProps={{ 'aria-label': 'Dados por órgão' }}
input={<OutlinedInput />}
input={inputType === 'outlined' ? <OutlinedInput /> : <InputBase />}
IconComponent={() => <ArrowDropDownIcon />}
renderValue={selected => {
if (selected.length === 0) {
return <em>Selecione</em>;
return (
<Typography
pb={0}
{...(!noStyle && { textTransform: 'uppercase' })}
>
Navegar Pelos Dados
</Typography>
);
}
return formatToAgency(selected);
}}
sx={{
height: 40,
pb: 0,
...{
...(!noStyle &&
inputType === 'standard' && {
borderBottom: '2px solid #b361c6',
}),
},
'& #orgaos-select': {
padding: '0 0 0 10px',
},
}}
>
<ListSubheader>
<em>Grupos disponíveis</em>
Expand Down Expand Up @@ -78,28 +116,3 @@ const DropDownGroupSelector: React.FC<DropDownGroupSelectorProps> = ({
};

export default DropDownGroupSelector;

export function formatToAgency(agency: string) {
if (agency === '') {
return '';
}
const sub = agency.split('-');
const formatedSubs = sub.map(s => {
const a = s.toLowerCase();
const newString = a.split('');
newString[0] = a[0].toLocaleUpperCase();
return newString.join('');
});
const a = formatedSubs.join(' ');
const final = a.includes('Justica')
? a.replace('Justica', 'Justiça')
: a.includes('Ministerios Publicos')
? a.replace('Ministerios Publicos', 'Ministérios Públicos')
: a;

return final.split(' ').length > 2
? `${final.split(' ')[0]}
${final.split(' ')[1].toLowerCase()}
${final.split(' ')[2]}`
: final;
}
82 changes: 51 additions & 31 deletions src/components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,39 +11,41 @@ import {
IconButton,
ListItemButton,
ListItemText,
Typography,
} from '@mui/material';
import MenuIcon from '@mui/icons-material/Menu';
import DropDownGroupSelector from './DropDownGroupSelector';

function Header() {
const [pages] = useState([
{
key: 'inicio',
title: 'Início',
anchor: '/',
key: 'grupo',
title: 'Grupos',
anchor: 'dropdown',
},
{
key: 'pesquisa',
title: 'Pesquisar',
anchor: '/pesquisar',
},
{
key: 'indice',
title: 'Índice',
title: 'Índice de Transparência',
anchor: '/indice',
},
{
key: 'namidia',
title: 'Na mídia',
title: 'Na Mídia',
anchor: '/namidia',
},
{
key: 'equipe',
title: 'Equipe',
anchor: '/equipe',
},
{
key: 'status',
title: 'Status',
anchor: '/status',
},
{
key: 'sobre',
title: 'Sobre',
key: 'quemsomos',
title: 'Quem Somos',
anchor: '/sobre',
},
]);
Expand All @@ -52,7 +54,6 @@ function Header() {
return (
<Container fixed>
<Box
p={4}
sx={{
borderBottom: '2px solid',
}}
Expand Down Expand Up @@ -81,19 +82,29 @@ function Header() {
display="flex"
alignItems="center"
justifyContent="flex-end"
mt={4}
>
<Box sx={{ display: { xs: 'none', md: 'block' } }}>
{pages.map(page => (
<Button
key={page.key}
variant="text"
color="info"
size="large"
href={page.anchor}
>
{page.title}
</Button>
))}
{pages.map(page =>
page.anchor === 'dropdown' ? (
<DropDownGroupSelector
key={page.key}
noStyle
minWidth={50}
maxWidth={200}
/>
) : (
<Button
key={page.key}
variant="text"
color="info"
size="large"
href={page.anchor}
>
<Typography>{page.title}</Typography>
</Button>
),
)}
</Box>
<Box sx={{ display: { xs: 'block', md: 'none' } }}>
<IconButton
Expand All @@ -111,13 +122,22 @@ function Header() {
<Drawer open={openDrawer} onClose={() => setOpenDrawer(false)}>
<Box pt={4} sx={{ width: 250 }}>
<List>
{pages.map(page => (
<ListItem key={page.key} disablePadding>
<ListItemButton component="a" href={page.anchor}>
<ListItemText primary={page.title} />
</ListItemButton>
</ListItem>
))}
{pages.map(page =>
page.anchor === 'dropdown' ? (
<DropDownGroupSelector
key={page.key}
noStyle
minWidth={50}
maxWidth={200}
/>
) : (
<ListItem key={page.key} disablePadding>
<ListItemButton component="a" href={page.anchor}>
<ListItemText primary={page.title} />
</ListItemButton>
</ListItem>
),
)}
</List>
</Box>
</Drawer>
Expand Down
54 changes: 19 additions & 35 deletions src/pages/equipe.tsx → src/components/Team/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,8 @@
import Head from 'next/head';
import { useState } from 'react';
import styled from 'styled-components';

import { Box, Container, Grid, Button, Typography, Link } from '@mui/material';

import Footer from '../components/Footer';
import Header from '../components/Header';

export default function Team() {
const [teamMates] = useState([
{
Expand All @@ -25,22 +21,22 @@ export default function Team() {
photoURL:
'https://avatars2.githubusercontent.com/u/8951363?s=400&u=acdedbbd00a15d2f913e3e1bde6b14f2c7451f90&v=4',
},
// {
// id: 3,
// name: 'Eduardo Queiroz',
// role: 'Desenvolvedor',
// profileURL: 'https://github.com/duardoqueiroz',
// photoURL: 'https://avatars.githubusercontent.com/u/83377894?v=4',
// },
// {
// id: 4,
// name: 'Jefferson Neves',
// role: 'Desenvolvedor',
// profileURL: 'https://github.com/jeffersonrpn',
// photoURL: 'https://github.com/jeffersonrpn.png',
// },
{
id: 3,
name: 'Eduardo Queiroz',
role: 'Desenvolvedor',
profileURL: 'https://github.com/duardoqueiroz',
photoURL: 'https://avatars.githubusercontent.com/u/83377894?v=4',
},
{
id: 4,
name: 'Jefferson Neves',
role: 'Desenvolvedor',
profileURL: 'https://github.com/jeffersonrpn',
photoURL: 'https://github.com/jeffersonrpn.png',
},
{
id: 5,
name: 'Jessé Oliveira',
role: 'Desenvolvedor',
profileURL: 'https://github.com/jezzdiego',
Expand All @@ -53,14 +49,14 @@ export default function Team() {
// profileURL: 'https://github.com/joaolgm',
// },
{
id: 6,
id: 4,
name: 'Joellen Silva',
role: 'Desenvolvedora',
profileURL: 'https://github.com/Joellensilva',
photoURL: 'https://github.com/Joellensilva.png',
},
{
id: 7,
id: 5,
name: 'Juliana Sakai',
role: 'Lider',
profileURL: 'https://www.linkedin.com/in/julianasakai/',
Expand All @@ -73,14 +69,14 @@ export default function Team() {
// profileURL: 'https://github.com/marcos-inja',
// },
{
id: 8,
id: 6,
name: 'Mariana Souto',
role: 'Designer',
profileURL: 'https://github.com/soutoam',
photoURL: 'https://github.com/soutoam.png',
},
{
id: 9,
id: 7,
name: 'Nazareno Andrade',
role: 'Professor',
profileURL: 'https://github.com/nazareno',
Expand All @@ -93,7 +89,7 @@ export default function Team() {
// photoURL: '/img/team/samara_sonale.jpg',
// },
{
id: 10,
id: 8,
name: 'Raul Durlo',
role: 'Cientista de Dados',
profileURL: 'https://github.com/rdurl0',
Expand Down Expand Up @@ -137,17 +133,6 @@ export default function Team() {
]);
return (
<Page>
<Head>
<title>Equipe</title>
<title>DadosJusBr</title>
<meta property="og:image" content="/img/icon_dadosjus_background.png" />
<meta property="og:title" content="Equipe - DadosJusBr" />
<meta
property="og:description"
content="DadosJusBr é uma plataforma que realiza a libertação continua de dados de remuneração de sistema de justiça brasileiro."
/>
</Head>
<Header />
<Box py={4}>
<Container fixed>
<Typography variant="h1" textAlign="center" gutterBottom>
Expand Down Expand Up @@ -239,7 +224,6 @@ export default function Team() {
</Box>
</Container>
</Box>
<Footer />
</Page>
);
}
Expand Down
Loading

0 comments on commit 031a4f2

Please sign in to comment.