Skip to content

codesee extension #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
luizdeveloperbr wants to merge 10 commits into
base: master
Choose a base branch
from
Open

codesee extension #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
01d8294
refatoração de rotas
luizdeveloperbr Jul 13, 2023
4318a22
adicionado componentes no layout
luizdeveloperbr Jul 14, 2023
882e7d4
configuração inicial de state da aplicação
luizdeveloperbr Jul 15, 2023
f45b797
converter component para compound pattern
luizdeveloperbr Jul 24, 2023
15074c0
refatoraçao de handler de use reduce
luizdeveloperbr Jul 24, 2023
d5fe954
ajuste de nome de variaveis
luizdeveloperbr Jul 24, 2023
0824d2f
refatoração de sidebaer component
luizdeveloperbr Jul 29, 2023
758d2fd
logica do contexo de layouyr movida
luizdeveloperbr Aug 4, 2023
3920d39
ajuste sidebar lg:screen
luizdeveloperbr Aug 20, 2023
78baf89
adicionado usermenu e refatoração de rotas
luizdeveloperbr Nov 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,12 @@
"dependencies": {
"@formkit/auto-animate": "^0.7.0",
"@jsreport/browser-client": "^3.1.0",
"firebase": "^9.8.4",
"firebase": "^10.0.0",
"formik": "^2.2.9",
"lodash": "^4.17.21",
"moment": "^2.29.3",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-haiku": "^2.0.3",
"react-router-dom": "^6.3.0",
"react-transition-group": "^4.4.5",
"recharts": "^2.1.16"
Expand Down
153 changes: 1 addition & 152 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,155 +2,4 @@

@tailwind components;

@tailwind utilities;

@layer base {
td {
@apply border bg-white border-black text-center py-2;
}
}

@layer components {

.row {
@apply border bg-white border-black text-center py-2;
}
.header {
@apply border bg-gray-400 border-black text-center py-2 font-bold;
}
.page-conteiner {
@apply bg-slate-200 border-2 border-black p-2 m-16 rounded-md shadow-lg;
}
/* .form-input {
@apply m-1 border border-black rounded-md px-2 py-1;
} */
.button {
@apply font-bold border border-black bg-slate-300 px-2 rounded-md py-1 hover:bg-gray-500 hover:text-white;
}
.button-active {
@apply font-bold border border-black px-2 rounded-md py-1 bg-gray-500 text-white;
}
}
.task {
zoom: 1.3;
background: url("./assets/open-iconic-master/svg/task.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}

.reload {
zoom: 1.3;
background: url("./assets/open-iconic-master/svg/loop-circular.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;

}

.clear {
zoom: 1.3;
background-image: url("./assets/open-iconic-master/svg/trash.svg");
background-size: cover;
}

.delete {
zoom: 1.3;
background: url("./assets/open-iconic-master/svg/circle-x.svg");
background-size: contain;
background-repeat: no-repeat;
}

.locked {
zoom: 1.2;
background: url("./assets/open-iconic-master/svg/lock-locked.svg");
background-size: contain;
background-repeat: no-repeat;
}

.unlocked {
zoom: 1.2;
background: url("./assets/open-iconic-master/svg/lock-unlocked.svg");
background-size: contain;
background-repeat: no-repeat;
}

.input-number::-webkit-inner-spin-button,
.input-number::-webkit-outer-spin-button {
display: none;
}
[list]::-webkit-calendar-picker-indicator {
display: none !important;
}

#tabela {
display: flex;
flex-direction: column;
}

form > div {
display: inline;
}
/**
* Ring of dots
*
* @author jh3y
*/
@-webkit-keyframes ring-of-dots {
0% {
-webkit-box-shadow: 20px 0px 0 0 #d4c3c3, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 #ba98dd, 12.4698px -15.63663px 0 0 #3b30d4;
box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 #ba98dd, 12.4698px -15.63663px 0 0 #3b30d4; }
14.28571% {
-webkit-box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 #ba98dd, -4.45042px -19.49856px 0 0 #3b30d4, 12.4698px -15.63663px 0 0 white;
box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 #ba98dd, -4.45042px -19.49856px 0 0 #3b30d4, 12.4698px -15.63663px 0 0 white; }
28.57143% {
-webkit-box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 #ba98dd, -18.01938px -8.67767px 0 0 #3b30d4, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white;
box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 #ba98dd, -18.01938px -8.67767px 0 0 #3b30d4, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white; }
42.85714% {
-webkit-box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 #ba98dd, -18.01938px 8.67767px 0 0 #3b30d4, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white;
box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 #ba98dd, -18.01938px 8.67767px 0 0 #3b30d4, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white; }
57.14286% {
-webkit-box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 #ba98dd, -4.45042px 19.49856px 0 0 #3b30d4, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white;
box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 #ba98dd, -4.45042px 19.49856px 0 0 #3b30d4, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white; }
71.42857% {
-webkit-box-shadow: 20px 0px 0 0 #ba98dd, 12.4698px 15.63663px 0 0 #3b30d4, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white;
box-shadow: 20px 0px 0 0 #ba98dd, 12.4698px 15.63663px 0 0 #3b30d4, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white; }
85.71429% {
-webkit-box-shadow: 20px 0px 0 0 #3b30d4, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 #ba98dd;
box-shadow: 20px 0px 0 0 #3b30d4, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 #ba98dd; }
100% {
-webkit-box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 #ba98dd, 12.4698px -15.63663px 0 0 #3b30d4;
box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 #ba98dd, 12.4698px -15.63663px 0 0 #3b30d4; } }
@keyframes ring-of-dots {
0% {
-webkit-box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 #ba98dd, 12.4698px -15.63663px 0 0 #3b30d4;
box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 #ba98dd, 12.4698px -15.63663px 0 0 #3b30d4; }
14.28571% {
-webkit-box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 #ba98dd, -4.45042px -19.49856px 0 0 #3b30d4, 12.4698px -15.63663px 0 0 white;
box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 #ba98dd, -4.45042px -19.49856px 0 0 #3b30d4, 12.4698px -15.63663px 0 0 white; }
28.57143% {
-webkit-box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 #ba98dd, -18.01938px -8.67767px 0 0 #3b30d4, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white;
box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 #ba98dd, -18.01938px -8.67767px 0 0 #3b30d4, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white; }
42.85714% {
-webkit-box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 #ba98dd, -18.01938px 8.67767px 0 0 #3b30d4, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white;
box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 #ba98dd, -18.01938px 8.67767px 0 0 #3b30d4, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white; }
57.14286% {
-webkit-box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 #ba98dd, -4.45042px 19.49856px 0 0 #3b30d4, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white;
box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 #ba98dd, -4.45042px 19.49856px 0 0 #3b30d4, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white; }
71.42857% {
-webkit-box-shadow: 20px 0px 0 0 #ba98dd, 12.4698px 15.63663px 0 0 #3b30d4, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white;
box-shadow: 20px 0px 0 0 #ba98dd, 12.4698px 15.63663px 0 0 #3b30d4, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white; }
85.71429% {
-webkit-box-shadow: 20px 0px 0 0 #3b30d4, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 #ba98dd;
box-shadow: 20px 0px 0 0 #3b30d4, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 #ba98dd; }
100% {
-webkit-box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 #ba98dd, 12.4698px -15.63663px 0 0 #3b30d4;
box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 #ba98dd, 12.4698px -15.63663px 0 0 #3b30d4; } }

.ring-of-dots:before {
animation: ring-of-dots 1s infinite linear reverse;
border-radius: 10px;
content: '';
display: block;
height: 10px;
width: 10px; }
@tailwind utilities;
87 changes: 65 additions & 22 deletions src/layout/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,88 @@
import React from 'react';
import UserMenu from './UserMenu';
import React, { useContext } from "react";
import { layout } from "../layout";
import logo from "../style/icons/logo.png"

function Header({
sidebarOpen,
setSidebarOpen
}) {
function Header() {

// const [searchModalOpen, setSearchModalOpen] = useState(false)
const { layoutState, setLayoutState } = useContext(layout)

return (
<header className="sticky top-0 bg-white border-b border-slate-200 z-30">
<div className="px-4 sm:px-6 lg:px-8">
<div className="
px-4
sm:px-6
lg:px-8">
<div className="flex items-center justify-between h-16 -mb-px">

{/* Header: Left side */}
<div className="flex">

{/* Hamburger button */}
<button
className="text-slate-500 hover:text-slate-600 lg:hidden"
aria-controls="sidebar"
aria-expanded={sidebarOpen}
onClick={(e) => { e.stopPropagation(); setSidebarOpen(!sidebarOpen); }}
className="
text-slate-500
hover:text-slate-600
lg:hidden"
onClick={() => setLayoutState({ toggle: "sidebarOpen" })}
>
<span className="sr-only">Open sidebar</span>
<svg className="w-6 h-6 fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<rect x="4" y="5" width="16" height="2" />
<rect x="4" y="11" width="16" height="2" />
<rect x="4" y="17" width="16" height="2" />
</svg>
</button>

</div>

{/* Header: Right side */}
<div className="flex items-center">
<hr className="w-px h-6 bg-slate-200 mx-3" />
<UserMenu />

{/* inicio */}
<div className="relative inline-flex">
<button
className="inline-flex justify-center items-center group"
aria-haspopup="true"
onClick={() => setLayoutState({ toggle: "userMenu" })}
>
<img className="w-8 h-8 rounded-full" src={logo} width="32" height="32" alt="User" />
<div className="flex items-center truncate">
<span className="truncate ml-2 text-sm font-medium group-hover:text-slate-800">:username:</span>
<svg className="w-3 h-3 shrink-0 ml-1 fill-current text-slate-400" viewBox="0 0 12 12">
<path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
</svg>
</div>
</button>
<div
className={`${layoutState.userMenu ? '' : 'hidden'} origin-top-right z-10 absolute top-full right-0 min-w-44 bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1`}
>
{/* <Transition
show={dropdownOpen}
enter="transition ease-out duration-200 transform"
enterStart="opacity-0 -translate-y-2"
enterEnd="opacity-100 translate-y-0"
leave="transition ease-out duration-200"
leaveStart="opacity-100"
leaveEnd="opacity-0"
> */}
<div>
<div className="pt-0.5 pb-2 px-3 mb-1 border-b border-slate-200">
<div className="font-medium text-slate-800">email@site.com</div>
<div className="text-xs text-slate-500 italic">TEXTO</div>
</div>
<ul>
<li>
{/* <Link
className="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3"
to="/"
onClick={() => setDropdownOpen(!dropdownOpen)}
>
Sign Out
</Link> */}
<a
className="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3 hover:cursor-pointer"
>Sair</a>
</li>
</ul>
</div>
{/* </Transition> */}
</div>
</div>
{/* fim */}
</div>

</div>
</div>
</header>
Expand Down
Loading