From 41c4a07a6d227ab98cc2ab49d1952bc4f078a3ea Mon Sep 17 00:00:00 2001 From: Alex Santos Date: Thu, 9 Jun 2022 11:58:36 -0300 Subject: [PATCH] update Modal --- .../buttons/faqButton/FaqButton1.tsx | 14 ++ .../buttons/faqButton/FaqButton2.tsx | 14 ++ .../buttons/faqButton/FaqButtonView1.ts | 21 +++ .../buttons/faqButton/FaqButtonView2.ts | 22 +++ src/pages/administrative/clients.tsx | 120 ++++++------- src/pages/administrative/faq/faqView.ts | 54 ++++++ src/pages/administrative/faq/index.tsx | 99 +++++++---- .../administrative/notification/index.tsx | 161 ++++++++++++------ .../notification/notificationView.ts | 60 +++++++ src/styles/layouts/commonQuestions/FaqView.ts | 10 ++ 10 files changed, 433 insertions(+), 142 deletions(-) create mode 100644 src/components/buttons/faqButton/FaqButton1.tsx create mode 100644 src/components/buttons/faqButton/FaqButton2.tsx create mode 100644 src/components/buttons/faqButton/FaqButtonView1.ts create mode 100644 src/components/buttons/faqButton/FaqButtonView2.ts create mode 100644 src/pages/administrative/faq/faqView.ts create mode 100644 src/pages/administrative/notification/notificationView.ts diff --git a/src/components/buttons/faqButton/FaqButton1.tsx b/src/components/buttons/faqButton/FaqButton1.tsx new file mode 100644 index 0000000..2547ab8 --- /dev/null +++ b/src/components/buttons/faqButton/FaqButton1.tsx @@ -0,0 +1,14 @@ +import React from 'react' + +import { FaqButtonView1 } from './FaqButtonView1' + +interface FaqButtonInterface { + title: string + onClick: () => void +} + +export default function FaqButton1({title, onClick}: FaqButtonInterface) { + return ( + onClick()}>{title} + ) +} diff --git a/src/components/buttons/faqButton/FaqButton2.tsx b/src/components/buttons/faqButton/FaqButton2.tsx new file mode 100644 index 0000000..a160bd8 --- /dev/null +++ b/src/components/buttons/faqButton/FaqButton2.tsx @@ -0,0 +1,14 @@ +import React from 'react' + +import { FaqButtonView2 } from './FaqButtonView2' + +interface FaqButtonInterface { + title: string + onClick: () => void +} + +export default function FaqButton2({title, onClick}: FaqButtonInterface) { + return ( + onClick()}>{title} + ) +} diff --git a/src/components/buttons/faqButton/FaqButtonView1.ts b/src/components/buttons/faqButton/FaqButtonView1.ts new file mode 100644 index 0000000..31b8458 --- /dev/null +++ b/src/components/buttons/faqButton/FaqButtonView1.ts @@ -0,0 +1,21 @@ +import styled from 'styled-components' + +export const FaqButtonView1 = styled.button` + display: flex; + justify-content: center; + align-items: center; + margin-top: 10px; + margin-left: 65px; + width: 350px; + height: 45px; + cursor: pointer; + background: #DDDDDD; + border-radius: 8px; + border-style: none; + + font-family: 'Poppins'; + font-size: 90%; + + + color: #6A707E; +` diff --git a/src/components/buttons/faqButton/FaqButtonView2.ts b/src/components/buttons/faqButton/FaqButtonView2.ts new file mode 100644 index 0000000..24a26a7 --- /dev/null +++ b/src/components/buttons/faqButton/FaqButtonView2.ts @@ -0,0 +1,22 @@ +import styled from 'styled-components' + +export const FaqButtonView2 = styled.button` + display: flex; + justify-content: center; + align-items: center; + margin-top: -46px; + margin-left: 430px; + width: 350px; + height: 45px; + cursor: pointer; + background: #254F7F; + border-radius: 8px; + border-style: none; + + font-family: 'Poppins'; + font-size: 90%; + + + + color: #FFFFFF; +` diff --git a/src/pages/administrative/clients.tsx b/src/pages/administrative/clients.tsx index 42972a7..1497742 100644 --- a/src/pages/administrative/clients.tsx +++ b/src/pages/administrative/clients.tsx @@ -2,47 +2,39 @@ import Button from '@mui/material/Button'; import TextField from '@mui/material/TextField'; import { DataGrid, GridColDef, GridValueGetterParams } from '@mui/x-data-grid'; import React, { useState } from 'react' - +import Typography from '@mui/material/Typography'; import BasicButton from '../../components/buttons/basicButton/BasicButton' -import Modal from '../../components/modal/Modal'; +import Modal from '@mui/material/Modal'; import PageTitle from '../../components/pageTitle/PageTitle' import { ClientsModalView, ClientsView } from '../../styles/layouts/clients/ClientsView' +import Box from '@mui/material/Box'; +import FaqButton1 from '../../components/buttons/faqButton/FaqButton1'; +import FaqButton2 from '../../components/buttons/faqButton/FaqButton2'; + +const style = { + position: 'absolute' as const, + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: 900, + height: 500, + bgcolor: 'background.paper', + border: '2px solid #000', + boxShadow: 24, + p: 4, + overflowY: 'scroll' +}; + + export default function clients() { + const [open, setOpen] = React.useState(false); + const handleOpen = () => setOpen(true); + const handleClose = () => setOpen(false); + const [openModal, setOpenModal] = useState(false) - const rows = [ - { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 }, - { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 }, - { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 }, - { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 }, - { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null }, - { id: 6, lastName: 'Melisandre', firstName: null, age: 150 }, - { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 }, - { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 }, - { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 }, - ]; - const columns: GridColDef[] = [ - { field: 'id', headerName: 'ID', width: 70 }, - { field: 'firstName', headerName: 'First name', width: 130 }, - { field: 'lastName', headerName: 'Last name', width: 130 }, - { - field: 'age', - headerName: 'Age', - type: 'number', - width: 90, - }, - { - field: 'fullName', - headerName: 'Full name', - description: 'This column has a value getter and is not sortable.', - sortable: false, - width: 160, - valueGetter: (params: GridValueGetterParams) => - `${params.row.firstName || ''} ${params.row.lastName || ''}`, - }, - ]; return ( <> @@ -50,40 +42,40 @@ export default function clients() {
- setOpenModal(true)}/> - {throw new Error('fixing...')}}/> + +
-
- -
+ {/* */} + + +

Adicionar Cliente

+ + Adicionar Cliente Smart Energia +
+ + + + + + +

+ + + + + + + + + - {setOpenModal(value)}}> - - - - - - - - - - + ) } diff --git a/src/pages/administrative/faq/faqView.ts b/src/pages/administrative/faq/faqView.ts new file mode 100644 index 0000000..7680a37 --- /dev/null +++ b/src/pages/administrative/faq/faqView.ts @@ -0,0 +1,54 @@ +import styled from 'styled-components' + + + +export const FaqView = styled.nav` + display: flex; + align-items: center; + flex-direction: column; + width: 100%; + + + .btn{ + background: #254F7F; + border-radius: 8px; + color: white; + width: 164px; + height: 40px; + border: none; + + } + .btn2{ + background: #FFBC10; + border-radius: 8px; + color: white; + width: 164px; + height: 40px; + border: none; + margin-left: 3px; + } + .buttons{ + display: flex; + margin-top:50px ; + justify-content: space-between; + align-self:flex-start ; + margin-left: 20px; + } + .title{ + display: flex; + justify-content: flex-start; + align-self:flex-start ; + flex-direction: column; + margin-left: 19px; + } + +/* + .teste{ + display: flex; + justify-content: center; + align-items: center; + margin-left: 100px; + } */ + + +` diff --git a/src/pages/administrative/faq/index.tsx b/src/pages/administrative/faq/index.tsx index ed36e69..3b8f8eb 100644 --- a/src/pages/administrative/faq/index.tsx +++ b/src/pages/administrative/faq/index.tsx @@ -1,39 +1,78 @@ -import Head from 'next/head' -import React from 'react' -import CommonQuestionsCard from '../../../components/faqQuestionsCard/FaqQuestionsCard' -import Header from '../../../components/header/Header' -import { FaqView } from '../../../styles/layouts/commonQuestions/FaqView' -import BasicButton from '../../../components/buttons/basicButton/BasicButton'; - +import React, { useState, useEffect } from 'react' +import { useRouter } from 'next/router' +import Image from 'next/image' +import Link from 'next/link' +import Box from '@mui/material/Box'; +import Button from '@mui/material/Button'; +import Typography from '@mui/material/Typography'; +import Modal from '@mui/material/Modal'; +import Stack from '@mui/material/Stack'; import TextField from '@mui/material/TextField'; +import FaqButton1 from '../../../components/buttons/faqButton/FaqButton1'; +import FaqButton2 from '../../../components/buttons/faqButton/FaqButton2'; +import CommonQuestionsCard from '../../../components/faqQuestionsCard/FaqQuestionsCard' + + + +import { FaqView } from './faqView' + +const style = { + position: 'absolute' as const, + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: 900, + height: 500, + bgcolor: 'background.paper', + border: '2px solid #000', + boxShadow: 24, + p: 4, +}; + + + +export default function Sidebar() { + + const [open, setOpen] = React.useState(false); + const handleOpen = () => setOpen(true); + const handleClose = () => setOpen(false); + -export default function commonQuestions() { return ( - - Smart Energia - FAQ - -
-

Perguntas Frequentes

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+

Adicionar/Editar Pergunta

+ + Adicionar/Editar Pergunta + +
+
+ + + +
+ + +

Adicionar/Editar Pergunta

+ + Adicionar/Editar Pergunta + +
+

+ +

+ + + + + - - -
- -
- -
- -
- -
- -
- -
-
) } diff --git a/src/pages/administrative/notification/index.tsx b/src/pages/administrative/notification/index.tsx index 7962c9f..89daf0e 100644 --- a/src/pages/administrative/notification/index.tsx +++ b/src/pages/administrative/notification/index.tsx @@ -2,81 +2,146 @@ import Head from 'next/head' import React from 'react' import CommonQuestionsCard from '../../../components/faqQuestionsCard/FaqQuestionsCard' import Header from '../../../components/header/Header' -import { FaqView } from '../../../styles/layouts/commonQuestions/FaqView' +import { NotificationView } from './notificationView' import BasicButton from '../../../components/buttons/basicButton/BasicButton'; import InputLabel from '@mui/material/InputLabel'; import MenuItem from '@mui/material/MenuItem'; import FormControl from '@mui/material/FormControl'; import Select, { SelectChangeEvent } from '@mui/material/Select'; +import Checkbox from '@mui/material/Checkbox'; +import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked'; +import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked'; + +import Typography from '@mui/material/Typography'; +import Modal from '@mui/material/Modal'; +import Box from '@mui/material/Box'; import TextField from '@mui/material/TextField'; +import FaqButton1 from '../../../components/buttons/faqButton/FaqButton1'; +import FaqButton2 from '../../../components/buttons/faqButton/FaqButton2'; +import Autocomplete from '@mui/material/Autocomplete'; +import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank'; +import CheckBoxIcon from '@mui/icons-material/CheckBox'; +const style = { + position: 'absolute' as const, + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: 900, + height: 500, + bgcolor: 'background.paper', + border: '2px solid #000', + boxShadow: 24, + p: 4, + overflowY: 'scroll' +}; +const icon = ; +const checkedIcon = ; export default function commonQuestions() { - const [month, setMonth] = React.useState(''); - const [unidade, setUnidade] = React.useState(''); - - const handleChangeMonth = (event: SelectChangeEvent) => { - setMonth(event.target.value); - }; - const handleChangeUnidade = (event: SelectChangeEvent) => { - setUnidade(event.target.value); - }; + const [open, setOpen] = React.useState(false); + const handleOpen = () => setOpen(true); + const handleClose = () => setOpen(false); return ( - + Smart Energia - FAQ -
+

Perguntas Frequentes

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- -
- - - - Clientes - - -
- -
- -
- -
- -
- -
- -
-
- ) } + +const top100Films = [ + { title: 'The Shawshank Redemption', year: 1994 }, + { title: 'The Godfather', year: 1972 }, + { title: 'The Godfather: Part II', year: 1974 }, + { title: 'The Dark Knight', year: 2008 }, + { title: '12 Angry Men', year: 1957 }, + { title: "Schindler's List", year: 1993 }, + { title: 'Pulp Fiction', year: 1994 }, + { + title: 'The Lord of the Rings: The Return of the King', + year: 2003, + }, +]; diff --git a/src/pages/administrative/notification/notificationView.ts b/src/pages/administrative/notification/notificationView.ts new file mode 100644 index 0000000..f4ae876 --- /dev/null +++ b/src/pages/administrative/notification/notificationView.ts @@ -0,0 +1,60 @@ +import styled from 'styled-components' + + + +export const NotificationView = styled.nav` + display: flex; + align-items: center; + flex-direction: column; + width: 100%; + + + .btn{ + background: #254F7F; + border-radius: 8px; + color: white; + width: 164px; + height: 40px; + border: none; + + } + .btn2{ + background: #FFBC10; + border-radius: 8px; + color: white; + width: 164px; + height: 40px; + border: none; + margin-left: 3px; + } + .buttons{ + display: flex; + margin-top:50px ; + justify-content: space-between; + align-self:flex-start ; + margin-left: 20px; + } + .title{ + display: flex; + justify-content: flex-start; + align-self:flex-start ; + flex-direction: column; + margin-left: 19px; + } + +/* + .teste{ + display: flex; + justify-content: center; + align-items: center; + margin-left: 100px; + } */ + .text1{ + margin-left: 70px; + } + .header{ + margin-top: 8px; + } + + +` diff --git a/src/styles/layouts/commonQuestions/FaqView.ts b/src/styles/layouts/commonQuestions/FaqView.ts index 32d9b16..c78db7d 100644 --- a/src/styles/layouts/commonQuestions/FaqView.ts +++ b/src/styles/layouts/commonQuestions/FaqView.ts @@ -33,4 +33,14 @@ export const FaqView = styled.main` hr { border: 1px solid #DDDDDD; } + + /* .modal{ + display: flex; + justify-self: flex-end; + align-self: center; + margin-left: 100px; + + } */ + + `