Adicionando página de referências

dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.33hvunj8mcg"
+    "revision": "0.22q0o995ltg"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

src/layouts/DefaultLayout/MainListItems/index.tsx

 import ListItemIcon from '@mui/material/ListItemIcon'
 import ListItemText from '@mui/material/ListItemText'
+import FormatQuoteIcon from '@mui/icons-material/FormatQuote'
 
 import {
   DocumentScannerSharp,
@@ -12,6 +13,12 @@ import { LinkButton } from '../../../components/LinkButton'
 export function MainListItems() {
   return (
     <>
+      <LinkButton to={'/referencias'}>
+        <ListItemIcon>
+          <FormatQuoteIcon />
+        </ListItemIcon>
+        <ListItemText primary="Referências" />
+      </LinkButton>
       <LinkButton to={'/filas'}>
         <ListItemIcon>
           <FormatListNumberedSharp />

src/pages/Referencias/index.tsx

+import { useState } from 'react'
+import Tabs from '@mui/material/Tabs'
+import Tab from '@mui/material/Tab'
+import { PageContainer } from '../../components/PageContainer'
+import FormatQuoteIcon from '@mui/icons-material/FormatQuote'
+import ContentCopyIcon from '@mui/icons-material/ContentCopy'
+import { Avatar, Box, TextField, Typography, IconButton } from '@mui/material'
+
+export function Referencias() {
+  const [selectedTabUfsc, setSelectedTabUfsc] = useState<'pt' | 'en'>('pt')
+  const [selectedTabFapesc, setSelectedTabFapesc] = useState<'pt' | 'en'>('pt')
+
+  const textos = {
+    ufsc: {
+      pt: 'Este trabalho utilizou os recursos da infraestrutura de computação de alto desempenho (HPC) disponibilizada pela Superintendência de Governança Eletrônica e Tecnologia da Informação e Comunicação (SeTIC) da Universidade Federal de Santa Catarina (UFSC), acessível por meio do portal hpc.setic.ufsc.br.\n\nA infraestrutura é projetada para apoiar atividades de pesquisa científica e tecnológica que demandam alto poder computacional, e tem sido fundamental para o desenvolvimento e execução deste estudo.\n\nAgradecemos à equipe responsável pelo desenvolvimento e manutenção do serviço:\nDr. Guilherme Arthur Geronimo, B.Sc. Bruno da Silva Castilho e Caio César Rodrigues de Aquino.',
+      en: 'This work made use of the high-performance computing (HPC) infrastructure provided by the Superintendence of Electronic Governance and Information and Communication Technology (SeTIC) at the Federal University of Santa Catarina (UFSC), available through the portal hpc.setic.ufsc.br.\n\nThe infrastructure is designed to support scientific and technological research activities that require high computational power and has been fundamental to the development and execution of this study.\n\nWe extend our thanks to the team responsible for the development and maintenance of the service:\nDr. Guilherme Arthur Geronimo, B.Sc. Bruno da Silva Castilho, and Caio César Rodrigues de Aquino.',
+    },
+    fapesc: {
+      pt: 'Este estudo foi parcialmente financiado pela Fundação de Amparo à Pesquisa e Inovação do Estado de Santa Catarina (FAPESC) e pela Coordenação de Aperfeiçoamento de Pessoal de Nível Superior - Brasil (CAPES), devido ao uso da Infraestrutura de Computação de Alto Desempenho. Projeto 15/2023.',
+      en: 'This study was partially funded by the Fundação de Amparo à Pesquisa e Inovação do Estado de Santa Catarina (FAPESC) and by the Coordenação de Aperfeiçoamento de Pessoal de Nível Superior - Brasil (CAPES), due the usage the High Performance Computing Infrastructure.  Project 15/2023.',
+    },
+  }
+
+  function copiarTexto(texto: string) {
+    navigator.clipboard.writeText(texto)
+  }
+
+  return (
+    <PageContainer>
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          margin: '16px 16px',
+          flexDirection: 'column',
+        }}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            width: '100%',
+            gap: '8px',
+          }}
+        >
+          <Avatar
+            sx={(theme) => ({
+              bgcolor: 'primary.light',
+              color: theme.palette.grey[100],
+            })}
+          >
+            <FormatQuoteIcon />
+          </Avatar>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              width: '100%',
+            }}
+          >
+            <Typography variant="h6">Referências</Typography>
+          </Box>
+        </Box>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+          {/* Caixa UFSC */}
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              margin: '16px',
+              padding: '16px',
+              width: '48%',
+            }}
+          >
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'center',
+                marginTop: '16px',
+              }}
+            >
+              <Typography variant="h4">UFSC</Typography>
+            </Box>
+            <Box sx={{ marginTop: '16px' }}>
+              <Tabs
+                value={selectedTabUfsc}
+                onChange={(_, newValue: 'pt' | 'en') => {
+                  setSelectedTabUfsc(newValue)
+                }}
+              >
+                <Tab label="PORTUGUÊS" value="pt" />
+                <Tab label="ENGLISH" value="en" />
+              </Tabs>
+              <Box
+                sx={{
+                  display: 'flex',
+                  justifyContent: 'center',
+                  marginTop: '16px',
+                  position: 'relative',
+                }}
+              >
+                <TextField
+                  fullWidth
+                  multiline
+                  variant="outlined"
+                  value={textos.ufsc[selectedTabUfsc]}
+                  InputProps={{ readOnly: true }}
+                />
+                <IconButton
+                  onClick={() => copiarTexto(textos.ufsc[selectedTabUfsc])}
+                  sx={{ position: 'absolute', top: 8, right: 8 }}
+                >
+                  <ContentCopyIcon />
+                </IconButton>
+              </Box>
+            </Box>
+          </Box>
+
+          {/* Caixa FAPESC */}
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              margin: '16px',
+              padding: '16px',
+              width: '48%',
+            }}
+          >
+            <Box
+              sx={{ display: 'flex', alignItems: 'center', gap: '8px' }}
+            ></Box>
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'center',
+                marginTop: '16px',
+              }}
+            >
+              <Typography variant="h4">FAPESC</Typography>
+            </Box>
+            <Box sx={{ marginTop: '16px' }}>
+              <Tabs
+                value={selectedTabFapesc}
+                onChange={(_, newValue: 'pt' | 'en') => {
+                  setSelectedTabFapesc(newValue)
+                }}
+              >
+                <Tab label="PORTUGUÊS" value="pt" />
+                <Tab label="ENGLISH" value="en" />
+              </Tabs>
+              <Box>
+                <Box
+                  sx={{
+                    display: 'flex',
+                    justifyContent: 'center',
+                    marginTop: '16px',
+                    position: 'relative',
+                  }}
+                >
+                  <TextField
+                    fullWidth
+                    multiline
+                    variant="outlined"
+                    value={textos.fapesc[selectedTabFapesc]}
+                    InputProps={{ readOnly: true }}
+                  />
+                  <IconButton
+                    onClick={() =>
+                      copiarTexto(textos.fapesc[selectedTabFapesc])
+                    }
+                    sx={{ position: 'absolute', top: 8, right: 8 }}
+                  >
+                    <ContentCopyIcon />
+                  </IconButton>
+                </Box>
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+    </PageContainer>
+  )
+}

src/routes.tsx

@@ -3,7 +3,7 @@ import DefaultLayout from './layouts/DefaultLayout'
 import { Imagens } from './pages/Imagens'
 import { Usuarios } from './pages/Usuarios'
 import { Trabalhos } from './pages/Trabalhos'
-
+import { Referencias } from './pages/Referencias'
 import { Projetos } from './pages/Projetos'
 import { Servidores } from './pages/Servidores'
 import { Filas } from './pages/Filas'
@@ -162,6 +162,10 @@ export const router = createBrowserRouter([
           </PaginationContextProvider>
         ),
       },
+      {
+        path: '/referencias',
+        element: <Referencias />,
+      },
     ],
   },
   {