diff --git a/README.md b/README.md index c05a6b1..145045e 100644 --- a/README.md +++ b/README.md @@ -1,68 +1,24 @@ -# React Native Expo Boilerplate +# Atividade Filial Escolas -Este repositório serve como um boilerplate para iniciar projetos em React Native utilizando o Expo. Ele está configurado com três principais estratégias de navegação - Stack, Drawer e Bottom Tabs Navigation - e inclui um exemplo de passagem de dados entre telas para facilitar o desenvolvimento de aplicações mais complexas. +O projeto em React Native com Expo visa desenvolver um aplicativo para gerenciar uma filial de escolas, implementando operações CRUD (Create, Read, Update, Delete). Utilizando o Expo, uma ferramenta que facilita o desenvolvimento de aplicativos nativos para Android e iOS com JavaScript, o projeto se beneficia de uma configuração inicial rápida e de uma ampla gama de serviços integrados, como notificações push, login com Facebook e Google, e muito mais, sem a necessidade de Xcode ou Android Studio. -## Status do desenvolvimento +## `Requisitos da aplicação` -- [x] Configuração do ambiente -- [x] Estrutura de pastas -- [x] Estrutura de navegação -- [x] Exemplo de passagem de dados entre telas +- [x] Cadastro de filiais +- [x] Visualização e Gerenciamento +- [x] Validações +- [x] Persistências de dados -## Iniciando o projeto +## `Objetivos de aprendizagem` -Aqui estão as instruções detalhadas para configurar o ambiente de desenvolvimento e começar a trabalhar com este boilerplate em sua máquina local. +- Praticar o desenvolvimento de interfaces de usuário intuitivas e responsivas. +- Aplicar conhecimentos de validação de formulários e manipulação de dados. +- Explorar técnicas de armazenamento e recuperação de dados. +- Reforçar conceitos de programação orientada a objetos e estruturação de código. -### Pré-requisitos - -Para utilizar este boilerplate, é essencial ter o ambiente NodeJS/React Native já configurado. Caso ainda não tenha realizado essa configuração, siga as orientações disponíveis [neste link](https://www.notion.so/Windows-f715073fc7c446dbaaee2bc313f8741c) para preparar seu ambiente. - -### Configuração e Instalação - -1. **Fork do Repositório:** Primeiramente, faça um fork deste repositório para sua conta no GitHub. - -2. **Clone Local:** Depois, clone o repositório forkado para sua máquina. - -3. **Instale as Dependências:** Entre na pasta do projeto e instale as dependências necessárias. - -4. **Inicie o Projeto:** Com as dependências instaladas, inicie o projeto. - -5. **Dispositivo ou Emulador:** Finalmente, abra o projeto em seu dispositivo físico ou em um emulador. - -## Estrutura de arquivos - -O projeto segue uma organização lógica de arquivos, facilitando a manutenção e a compreensão do código: - -``` -react-native-expo-boilerplate/ -├── src/ -│ ├── components/ -│ ├── data/ -│ ├── routes/ -│ ├── screens/ -└── App.jsx -``` - -## Tecnologias +## `Tecnologias` - [React Native](https://reactnative.dev/) - [Expo](https://expo.dev/) - [React Navigation](https://reactnavigation.org/) - -## Contribuindo - -Contribuições são sempre bem-vindas para melhorar o boilerplate. Veja como você pode contribuir: - -1. **Fork:** Inicie fazendo um fork do projeto. -2. **Branch de Feature:** Crie uma branch para sua feature: `git checkout -b minha-feature`. -3. **Commit:** Faça commits das suas alterações: `git commit -m "feat: minha feature"`. -4. **Push:** Envie suas alterações para o GitHub: `git push origin minha-feature`. -5. **Pull Request:** Abra um pull request para a branch principal. - -## Licença - -Este projeto está licenciado sob a licença MIT - consulte o arquivo [LICENSE](LICENSE) para mais detalhes. - -## Contato - -Se você tiver alguma dúvida sobre o projeto, sinta-se à vontade para me contatar em [meu e-mail](mailto:dev.felipesantos@gmail.com) ou pelo meu [LinkedIn](https://www.linkedin.com/in/92felipesantos). +- [React Native Material](https://rn-material.js.org/docs/getting-started) diff --git a/RESULTADO.md b/RESULTADO.md new file mode 100644 index 0000000..80bbfa7 --- /dev/null +++ b/RESULTADO.md @@ -0,0 +1,28 @@ +## Critérios de Avaliação - CRUD Filiais + +### Tela de Apresentação: 0/20 pontos + +- Apresentação da Filial ou Edifício Principal 0/10 +- Estilização dos Elementos 0/10 + +### Tela de Listagem de Filiais: 10/20 pontos + +- Apresentação das Filiais 5/10 +- Estilização dos Elementos 5/10 + +### Tela de Detalhes da Filial: 0/20 pontos + +- Apresentação dos Dados da Filial 0/10 +- Estilização dos Elementos 0/10 + +### Tela de Detalhes do Desenvolvedor: 20/20 pontos + +- Perfil do Desenvolvedor 10/10 +- Estilização dos Elementos 10/10 + +### Versionamento no GitHub: 15/20 pontos + +- Histórico de Commits 10/10 +- Estrutura do Repositório 5/10 + +### Pontuação Total Alcançada: 45/100 pontos diff --git a/assets/escola.jpg b/assets/escola.jpg new file mode 100644 index 0000000..4d8968d Binary files /dev/null and b/assets/escola.jpg differ diff --git a/assets/eu.jpg b/assets/eu.jpg new file mode 100644 index 0000000..a4a2992 Binary files /dev/null and b/assets/eu.jpg differ diff --git a/assets/papelada.avif b/assets/papelada.avif new file mode 100644 index 0000000..907e9e7 Binary files /dev/null and b/assets/papelada.avif differ diff --git a/assets/travando.mp4 b/assets/travando.mp4 new file mode 100644 index 0000000..1b34d4f Binary files /dev/null and b/assets/travando.mp4 differ diff --git a/package-lock.json b/package-lock.json index bdd9503..ad68c65 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,18 +8,23 @@ "name": "rn-boilerplate", "version": "1.0.0", "dependencies": { + "@expo/metro-runtime": "~3.1.3", + "@react-native-material/core": "^1.3.7", "@react-navigation/bottom-tabs": "^6.5.19", "@react-navigation/drawer": "^6.6.14", "@react-navigation/native": "^6.1.16", "@react-navigation/native-stack": "^6.9.25", "expo": "~50.0.11", + "expo-av": "^13.10.5", "expo-status-bar": "~1.11.1", "react": "18.2.0", + "react-dom": "18.2.0", "react-native": "0.73.4", "react-native-gesture-handler": "~2.14.0", "react-native-reanimated": "~3.6.2", "react-native-safe-area-context": "4.8.2", - "react-native-screens": "~3.29.0" + "react-native-screens": "~3.29.0", + "react-native-web": "~0.19.6" }, "devDependencies": { "@babel/core": "^7.20.0" @@ -3036,6 +3041,14 @@ "node": ">= 8" } }, + "node_modules/@expo/metro-runtime": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/@expo/metro-runtime/-/metro-runtime-3.1.3.tgz", + "integrity": "sha512-u1CaQJJlSgvxBB5NJ6YMVvSDTTRzjT71dHpEBnKPZhpFv5ebVry52FZ2sEeEEA6mHG5zGxWXmHImW3hNKHh8EA==", + "peerDependencies": { + "react-native": "*" + } + }, "node_modules/@expo/osascript": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/@expo/osascript/-/osascript-2.1.0.tgz", @@ -5458,6 +5471,19 @@ "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" }, + "node_modules/@react-native-material/core": { + "version": "1.3.7", + "resolved": "https://registry.npmjs.org/@react-native-material/core/-/core-1.3.7.tgz", + "integrity": "sha512-N5d/zKrmL3+fVyWsc/jFRxsDl59N5t3tYx9RlxhV04tQlcFKo9UlyBqCWDZFlxrkLrq3JY5zTRCMJAM3yvOz5w==", + "dependencies": { + "chroma-js": "^2.4.2", + "react-native-flex-layout": "^0.1.5" + }, + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, "node_modules/@react-native/assets-registry": { "version": "0.73.1", "resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.73.1.tgz", @@ -6918,6 +6944,11 @@ "node": ">=10" } }, + "node_modules/chroma-js": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz", + "integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A==" + }, "node_modules/chrome-launcher": { "version": "0.15.2", "resolved": "https://registry.npmjs.org/chrome-launcher/-/chrome-launcher-0.15.2.tgz", @@ -7332,6 +7363,14 @@ "node": ">=8" } }, + "node_modules/css-in-js-utils": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz", + "integrity": "sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==", + "dependencies": { + "hyphenate-style-name": "^1.0.3" + } + }, "node_modules/dag-map": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/dag-map/-/dag-map-1.0.2.tgz", @@ -7745,6 +7784,14 @@ "md5-file": "^3.2.3" } }, + "node_modules/expo-av": { + "version": "13.10.5", + "resolved": "https://registry.npmjs.org/expo-av/-/expo-av-13.10.5.tgz", + "integrity": "sha512-w45oCoe+8PunDeM0rh/Ut6UaGh7OjEJOCjAiQy3nCxpA8FaXB17KaqpsvkAXIMvceHYWndH8+D29esUTS6wEsA==", + "peerDependencies": { + "expo": "*" + } + }, "node_modules/expo-constants": { "version": "15.4.5", "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-15.4.5.tgz", @@ -7929,6 +7976,11 @@ "node": ">=8.6.0" } }, + "node_modules/fast-loops": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/fast-loops/-/fast-loops-1.1.3.tgz", + "integrity": "sha512-8EZzEP0eKkEEVX+drtd9mtuQ+/QrlfW/5MlwcwK5Nds6EkZ/tRzEexkzUY2mIssnAyVLT+TKHuRXmFNNXYUd6g==" + }, "node_modules/fast-xml-parser": { "version": "4.3.5", "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.3.5.tgz", @@ -8433,6 +8485,11 @@ "node": ">=10.17.0" } }, + "node_modules/hyphenate-style-name": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz", + "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==" + }, "node_modules/ieee754": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", @@ -8534,6 +8591,15 @@ "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz", "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==" }, + "node_modules/inline-style-prefixer": { + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-6.0.4.tgz", + "integrity": "sha512-FwXmZC2zbeeS7NzGjJ6pAiqRhXR0ugUShSNb6GApMl6da0/XGc4MOJsoWAywia52EEWbXNSy0pzkwz/+Y+swSg==", + "dependencies": { + "css-in-js-utils": "^3.1.0", + "fast-loops": "^1.1.3" + } + }, "node_modules/internal-ip": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-4.3.0.tgz", @@ -11204,6 +11270,11 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" + }, "node_modules/pretty-bytes": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", @@ -11500,6 +11571,26 @@ } } }, + "node_modules/react-dom": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", + "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", + "dependencies": { + "loose-envify": "^1.1.0", + "scheduler": "^0.23.0" + }, + "peerDependencies": { + "react": "^18.2.0" + } + }, + "node_modules/react-dom/node_modules/scheduler": { + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", + "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", + "dependencies": { + "loose-envify": "^1.1.0" + } + }, "node_modules/react-freeze": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/react-freeze/-/react-freeze-1.0.4.tgz", @@ -11570,6 +11661,15 @@ "react": "18.2.0" } }, + "node_modules/react-native-flex-layout": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/react-native-flex-layout/-/react-native-flex-layout-0.1.5.tgz", + "integrity": "sha512-DrLir5Wl0RhgJXHeDBSaa1Y1LdpNuoz0PEe5E1T1+xVWt2DAz/r+1N8bnhtVkTKJE6WrH6jIH2hoe8kogR0X+w==", + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, "node_modules/react-native-gesture-handler": { "version": "2.14.1", "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.14.1.tgz", @@ -11629,6 +11729,30 @@ "react-native": "*" } }, + "node_modules/react-native-web": { + "version": "0.19.10", + "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.19.10.tgz", + "integrity": "sha512-IQoHiTQq8egBCVVwmTrYcFLgEFyb4LMZYEktHn4k22JMk9+QTCEz5WTfvr+jdNoeqj/7rtE81xgowKbfGO74qg==", + "dependencies": { + "@babel/runtime": "^7.18.6", + "@react-native/normalize-color": "^2.1.0", + "fbjs": "^3.0.4", + "inline-style-prefixer": "^6.0.1", + "memoize-one": "^6.0.0", + "nullthrows": "^1.1.1", + "postcss-value-parser": "^4.2.0", + "styleq": "^0.1.3" + }, + "peerDependencies": { + "react": "^18.0.0", + "react-dom": "^18.0.0" + } + }, + "node_modules/react-native-web/node_modules/memoize-one": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz", + "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==" + }, "node_modules/react-native/node_modules/ansi-styles": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", @@ -12451,6 +12575,11 @@ "resolved": "https://registry.npmjs.org/structured-headers/-/structured-headers-0.4.1.tgz", "integrity": "sha512-0MP/Cxx5SzeeZ10p/bZI0S6MpgD+yxAhi1BOQ34jgnMXsCq3j1t6tQnZu+KdlL7dvJTLT3g9xN8tl10TqgFMcg==" }, + "node_modules/styleq": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/styleq/-/styleq-0.1.3.tgz", + "integrity": "sha512-3ZUifmCDCQanjeej1f6kyl/BeP/Vae5EYkQ9iJfUm/QwZvlgnZzyflqAsAWYURdtea8Vkvswu2GrC57h3qffcA==" + }, "node_modules/sucrase": { "version": "3.34.0", "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz", diff --git a/package.json b/package.json index 66b0992..3575348 100644 --- a/package.json +++ b/package.json @@ -9,18 +9,23 @@ "web": "expo start --web" }, "dependencies": { + "@react-native-material/core": "^1.3.7", "@react-navigation/bottom-tabs": "^6.5.19", "@react-navigation/drawer": "^6.6.14", "@react-navigation/native": "^6.1.16", "@react-navigation/native-stack": "^6.9.25", "expo": "~50.0.11", + "expo-av": "^13.10.5", "expo-status-bar": "~1.11.1", "react": "18.2.0", "react-native": "0.73.4", + "react-native-gesture-handler": "~2.14.0", + "react-native-reanimated": "~3.6.2", "react-native-safe-area-context": "4.8.2", "react-native-screens": "~3.29.0", - "react-native-gesture-handler": "~2.14.0", - "react-native-reanimated": "~3.6.2" + "react-native-web": "~0.19.6", + "react-dom": "18.2.0", + "@expo/metro-runtime": "~3.1.3" }, "devDependencies": { "@babel/core": "^7.20.0" diff --git a/src/components/Title/styles.js b/src/components/Title/styles.js index 5bb5d1b..b316744 100644 --- a/src/components/Title/styles.js +++ b/src/components/Title/styles.js @@ -4,6 +4,7 @@ const styles = StyleSheet.create({ title: { fontSize: 24, fontWeight: "bold", + color: '#fff' }, }); diff --git a/src/data/Profile.js b/src/data/Profile.js index 725e6c3..1115649 100644 --- a/src/data/Profile.js +++ b/src/data/Profile.js @@ -1,6 +1,14 @@ export const user = { - id: 1513, - name: "Felipe Santos", - email: "felipesantos@dev.com", - age: 32, -}; + nomeFilial: 'La Pablito Escolita', + fundacao: 2024, + corPrimaria: '#007aa2', + corSecundaria: '#f1f1f1', + quantidadeFuncionarios: 25, + capacidadeAlunosMatriculadosPorAno: 250, + quantidadeTurmas: 36, + endereco: 'Monterrei', + telefone: '(00) 0000-0000', + email: 'laPablito.escola@gamil.com', + nomeResponsavel: 'boy Pablo', + cargoResponsavel: 'Lo Cabron' +} diff --git a/src/models/user/User.js b/src/models/user/User.js index 7654ebe..377c0d7 100644 --- a/src/models/user/User.js +++ b/src/models/user/User.js @@ -1,9 +1,18 @@ export default class User { - constructor(name, email, age) { + constructor(nomeFilial, fundacao, corPrimaria, corSecundaria, quantidadeFuncionarios, capacidadeAlunosMatriculadosPorAno, quantidadeTurmas, endereco, telefone, email, nomeResponsavel, cargoResponsavel) { this.id = this.generateId(); - this.name = name; + this.nomeFilial = nomeFilial; + this.fundacao = fundacao; + this.corPrimaria = corPrimaria; + this.corSecundaria = corSecundaria; + this.quantidadeFuncionarios = quantidadeFuncionarios; + this.capacidadeAlunosMatriculadosPorAno = capacidadeAlunosMatriculadosPorAno; + this.quantidadeTurmas = quantidadeTurmas; + this.endereco = endereco; + this.telefone = telefone; this.email = email; - this.age = age; + this.nomeResponsavel = nomeResponsavel; + this.cargoResponsavel = cargoResponsavel; } generateId() { diff --git a/src/models/user/UserRepository.js b/src/models/user/UserRepository.js index 7ef3f29..fb97c8b 100644 --- a/src/models/user/UserRepository.js +++ b/src/models/user/UserRepository.js @@ -22,20 +22,29 @@ class UsersRepository { this.users = this.users.filter((user) => user.id !== id); } - update(id, name, email, age) { + update(id, nomeFilial, fundacao, corPrimaria, corSecundaria, quantidadeFuncionarios, capacidadeAlunosMatriculadosPorAno, quantidadeTurmas, endereco, telefone, email, nomeResponsavel, cargoResponsavel) { const user = this.get(id); - if (user) { - user.name = name; + if(user) { + user.nomeFilial = nomeFilial; + user.fundacao = fundacao; + user.corPrimaria = corPrimaria; + user.corSecundaria = corSecundaria; + user.quantidadeFuncionarios = quantidadeFuncionarios; + user.capacidadeAlunosMatriculadosPorAno = capacidadeAlunosMatriculadosPorAno; + user.quantidadeTurmas = quantidadeTurmas; + user.endereco = endereco; + user.telefone = telefone; user.email = email; - user.age = age; - } - return user; + user.nomeResponsavel = nomeResponsavel; + user.cargoResponsavel = cargoResponsavel; + } + return user } } const usersRepository = new UsersRepository(); -const newUser = new User(user.name, user.email, parseInt(user.age) || 0); +const newUser = new User(user.nomeFilial, user.fundacao, user.corPrimaria, user.corSecundaria, user.quantidadeFuncionarios, user.capacidadeAlunosMatriculadosPorAno, user.quantidadeTurmas, user.endereco, user.telefone, user.email, user.nomeResponsavel, user.cargoResponsavel); usersRepository.add(newUser); diff --git a/src/routes/tab.routes.jsx b/src/routes/tab.routes.jsx index e653566..6373bcd 100644 --- a/src/routes/tab.routes.jsx +++ b/src/routes/tab.routes.jsx @@ -1,24 +1,59 @@ import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; import { Feather } from "@expo/vector-icons"; +import { user } from "../data/Profile"; import Home from "../screens/Home"; import Profile from "../screens/Profile"; +import Filiais from "../screens/Filiais"; +import Details from "../screens/Details"; import Form from "../screens/Form"; -import Users from "../screens/Users"; -import { user } from "../data/Profile"; - +import User from "../models/user/User"; import usersRepository from "../models/user/UserRepository"; -const users = usersRepository.getAll(); - const Tab = createBottomTabNavigator(); +const users = usersRepository.getAll(); + const TabRoutes = () => { return ( - + + + ( + + ), + tabBarLabel: "Filiais", + tabBarActiveTintColor: "#7c5295", + tabBarInactiveTintColor: "#fff", + }} + /> + ( + + ), + tabBarLabel: "Form", + tabBarActiveTintColor: "#7c5295", + tabBarInactiveTintColor: "#fff", + }} + /> { ), tabBarLabel: "Inicial", - tabBarActiveTintColor: "#131313", - tabBarInactiveTintColor: "#D6D6D6", + tabBarActiveTintColor: "#7c5295", + tabBarInactiveTintColor: "#fff", }} /> - ( ), - tabBarLabel: "Usuários", - tabBarActiveTintColor: "#131313", - tabBarInactiveTintColor: "#D6D6D6", + tabBarLabel: "Inicial", + tabBarActiveTintColor: "#7c5295", + tabBarInactiveTintColor: "#fff", }} /> - { ), tabBarLabel: "Perfil", - tabBarActiveTintColor: "#131313", - tabBarInactiveTintColor: "#D6D6D6", - }} - /> - - ( - - ), - tabBarLabel: "Cadastro", - tabBarActiveTintColor: "#131313", - tabBarInactiveTintColor: "#D6D6D6", + tabBarActiveTintColor: "#7c5295", + tabBarInactiveTintColor: "#fff", }} /> diff --git a/src/screens/Details/index.jsx b/src/screens/Details/index.jsx new file mode 100644 index 0000000..5f09724 --- /dev/null +++ b/src/screens/Details/index.jsx @@ -0,0 +1,67 @@ +import { Text, TouchableOpacity, View } from "react-native"; +import { useNavigation } from "@react-navigation/native"; +import Title from '../../components/Title' + +import styles from "./styles"; +import usersRepository from "../../models/user/UserRepository"; +import User from "../../models/user/User"; +import Profile from '../../data/Profile' + +export default function Details({ route }) { + const navigation = useNavigation(); + const { data } = route.params; + + const editFilial = () => { + navigation.navigate("Form", { user: data, edit: true }); + }; + + const deleteFilial = () => { + usersRepository.remove(data.id); + navigation.navigate("Filiais"); + }; + + const addProfile = () => { + const newUser = new User.add(Profile); + usersRepository.add(newUser) + } + + addProfile() + + return ( + + + + {data ? ( + <Text>Detalhes da Filial</Text> + ) : ( + <Text>Selecione uma filial para exibir seus detalhes</Text> + )} + + <View style={styles.user}> + <View style={styles.userDetail}> + <Text style={styles.txt}>{data.nomeFilial}</Text> + <Text style={styles.txt}>{data.fundacao}</Text> + <Text style={styles.txt}>{data.corPrimaria}</Text> + <Text style={styles.txt}>{data.corSecundaria}</Text> + <Text style={styles.txt}>{data.quantidadeFuncionarios}</Text> + <Text style={styles.txt}>{data.capacidadeAlunosMatriculadosPorAno}</Text> + <Text style={styles.txt}>{data.quantidadeTurmas}</Text> + <Text style={styles.txt}>{data.endereco}</Text> + <Text style={styles.txt}>{data.telefone}</Text> + <Text style={styles.txt}>{data.email}</Text> + <Text style={styles.txt}>{data.nomeResponsavel}</Text> + <Text style={styles.txt}>{data.cargoResponsavel}</Text> + </View> + + <View style={styles.userActions}> + <TouchableOpacity style={styles.editButton} onPress={editFilial}> + <Text style={styles.buttonTxt}>Editar</Text> + </TouchableOpacity> + <TouchableOpacity style={styles.editButton} onPress={deleteFilial}> + <Text style={styles.buttonTxt}>Excluir</Text> + </TouchableOpacity> + </View> + </View> + </View> + ) +} \ No newline at end of file diff --git a/src/screens/Details/styles.js b/src/screens/Details/styles.js new file mode 100644 index 0000000..f56133e --- /dev/null +++ b/src/screens/Details/styles.js @@ -0,0 +1,43 @@ +import { StyleSheet } from "react-native" + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + padding: 20, + backgroundColor: '#121212' + }, + user: { + backgroundColor: '#1f1b24', + width: 250, + padding: 15, + borderRadius: 10 + }, + txt: { + color: '#fff', + fontSize: 14, + fontWeight: '500' + }, + userActions: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + margin: 20 + }, + editButton: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + backgroundColor: '#7c5295', + padding: 10, + borderRadius: 10, + width: 75 + }, + buttonTxt: { + color: '#fff' + } +}) + +export default styles; \ No newline at end of file diff --git a/src/screens/Users/index.jsx b/src/screens/Filiais/index.jsx similarity index 71% rename from src/screens/Users/index.jsx rename to src/screens/Filiais/index.jsx index 82e205b..40da0cc 100644 --- a/src/screens/Users/index.jsx +++ b/src/screens/Filiais/index.jsx @@ -1,12 +1,22 @@ import { useEffect, useState } from "react"; import { Text, TouchableOpacity, View } from "react-native"; import { useNavigation, useIsFocused } from "@react-navigation/native"; +import { + Provider, + Button, + Dialog, + DialogHeader, + DialogContent, + DialogActions, +} from "@react-native-material/core"; import styles from "./styles"; import Title from "../../components/Title"; import usersRepository from "../../models/user/UserRepository"; -export default function Users() { +export default function Filiais() { + const [visible, setVisible] = useState(false); + const navigation = useNavigation(); const isFocused = useIsFocused(); const [allUsers, setAllUsers] = useState([]); @@ -20,21 +30,21 @@ export default function Users() { return ( <View style={styles.container}> - <Title title="Users" /> - <Text>Tela de listagem de todos os usuários</Text> + <Title style={styles.title} title="Filiais" /> + <Text style={styles.title}>Tela de listagem de todos as filiais</Text> {allUsers.length > 0 ? ( <View style={styles.userList}> {allUsers.map((user) => ( <View key={user.id} style={styles.userItem}> <View> - <Text style={styles.userName}>{user.name}</Text> + <Text style={styles.nome}>{user.nomeFilial}</Text> </View> <View style={styles.userActions}> <TouchableOpacity style={styles.detailsButton} - onPress={() => navigation.navigate("Profile", { data: user })} + onPress={() => navigation.navigate('Details', {data: user})} > <Text>Detalhes</Text> </TouchableOpacity> @@ -47,4 +57,4 @@ export default function Users() { )} </View> ); -} +}; \ No newline at end of file diff --git a/src/screens/Users/styles.js b/src/screens/Filiais/styles.js similarity index 76% rename from src/screens/Users/styles.js rename to src/screens/Filiais/styles.js index 09ceba7..74750bf 100644 --- a/src/screens/Users/styles.js +++ b/src/screens/Filiais/styles.js @@ -3,8 +3,9 @@ import { StyleSheet } from "react-native"; const styles = StyleSheet.create({ container: { flex: 1, - marginTop: 50, alignItems: "center", + backgroundColor: '#121212', + padding: 20 }, userItem: { flexDirection: "row", @@ -13,7 +14,10 @@ const styles = StyleSheet.create({ alignItems: "center", padding: 10, borderBottomWidth: 1, - borderBottomColor: "#ccc", + backgroundColor: '#1f1b24', + borderRadius: 10, + width: 250, + marginTop: 30 }, userDetailButton: { padding: 10, @@ -27,7 +31,7 @@ const styles = StyleSheet.create({ }, userName: { fontSize: 16, - color: "#333", + color: "#fff", fontWeight: "bold", }, editButton: { @@ -41,10 +45,16 @@ const styles = StyleSheet.create({ detailsButton: { padding: 5, borderRadius: 5, - backgroundColor: "#ADD8E6", + backgroundColor: "#7c5295", minWidth: 70, alignItems: "center", }, + nome: { + color: '#fff' + }, + title: { + color: '#fff' + } }); export default styles; diff --git a/src/screens/Form/index.jsx b/src/screens/Form/index.jsx index 3ff44d5..afbb230 100644 --- a/src/screens/Form/index.jsx +++ b/src/screens/Form/index.jsx @@ -11,18 +11,51 @@ import User from "../../models/user/User"; export default function Form({ route }) { let { user, edit } = route.params; - const [name, setName] = useState(""); - const [email, setEmail] = useState(""); - const [age, setAge] = useState(""); + const [nomeFilial, setNomeFilial] = useState('') + const [fundacao, setFundacao] = useState('') + const [corPrimaria, setCorPrimaria] = useState('') + const [corSecundaria, setCorSecundaria] = useState('') + const [quantidadeFuncionarios, setQuantidadeFuncionarios] = useState('') + const [capacidadeAlunosMatriculadosPorAno, setCapacidadeAlunosMatriculadosPorAno] = useState('') + const [quantidadeTurmas, setQuantidadeTurmas] = useState('') + const [endereco, setEndereco] = useState('') + const [telefone, setTelefone] = useState('') + const [email, setEmail] = useState('') + const [nomeResponsavel, setNomeResponsavel] = useState('') + const [cargoResponsavel, setCargoResponsavel] = useState('') const [isUpdate, setIsUpdate] = useState(edit); const navigation = useNavigation(); + const clearInputs = () => { + setNomeFilial('') + setFundacao('') + setCorPrimaria('') + setCorSecundaria('') + setQuantidadeFuncionarios('') + setCapacidadeAlunosMatriculadosPorAno('') + setQuantidadeTurmas('') + setEndereco('') + setTelefone('') + setEmail('') + setNomeResponsavel('') + setCargoResponsavel('') + } + useEffect(() => { if (edit) { - setName(user.name); - setEmail(user.email); - setAge(String(user.age)); + setNomeFilial(user.nomeFilial) + setFundacao(user.fundacao) + setCorPrimaria(user.corPrimaria) + setCorSecundaria(user.corSecundaria) + setQuantidadeFuncionarios(user.quantidadeFuncionarios) + setCapacidadeAlunosMatriculadosPorAno(user.capacidadeAlunosMatriculadosPorAno) + setQuantidadeTurmas(user.quantidadeTurmas) + setEndereco(user.endereco) + setTelefone(user.telefone) + setEmail(user.email) + setNomeResponsavel(user.nomeResponsavel) + setCargoResponsavel(user.cargoResponsavel) setIsUpdate(true); } else { clearInputs(); @@ -31,56 +64,106 @@ export default function Form({ route }) { const handleUserAction = () => { if (isUpdate) { - usersRepository.update(user.id, name, email, parseInt(age) || 0); + usersRepository.update(user.id, nomeFilial, fundacao, corPrimaria, corSecundaria, quantidadeFuncionarios, capacidadeAlunosMatriculadosPorAno, quantidadeTurmas, endereco, telefone, email, nomeResponsavel, cargoResponsavel); clearInputs(); } else { - const newUser = new User(name, email, parseInt(age) || 0); - usersRepository.add(newUser); - clearInputs(); + if(nomeFilial == '', fundacao == '', corPrimaria == '', corSecundaria == '', quantidadeFuncionarios == '', capacidadeAlunosMatriculadosPorAno == '', quantidadeTurmas == '', endereco == '', telefone == '', email == '', nomeResponsavel == '', cargoResponsavel == '') { + clearInputs() + } else { + const newUser = new User(nomeFilial, fundacao, corPrimaria, corSecundaria, quantidadeFuncionarios, capacidadeAlunosMatriculadosPorAno, quantidadeTurmas, endereco, telefone, email, nomeResponsavel, cargoResponsavel); + usersRepository.add(newUser); + clearInputs(); + } } - navigation.navigate("Users"); - }; - - const clearInputs = () => { - setIsUpdate(false); - edit = false; - setName(""); - setEmail(""); - setAge(""); + navigation.navigate("Filiais"); }; return ( <View style={styles.container}> - <Title title={isUpdate ? "Editar Usuário" : "Novo Usuário"} /> + <Title title="Form" /> + <TextInput + placeholder="Digite o nome da filial" + style={styles.inputText} + onChangeText={setNomeFilial} + value={nomeFilial} + /> + <TextInput + placeholder="Digite a data de fundação" + style={styles.inputText} + onChangeText={setFundacao} + value={fundacao} + /> + <TextInput + placeholder="Digite a cor primária" + style={styles.inputText} + onChangeText={setCorPrimaria} + value={corPrimaria} + /> + <TextInput + placeholder="Digite a cor secundária" + style={styles.inputText} + onChangeText={setCorSecundaria} + value={corSecundaria} + /> + <TextInput + placeholder="Digite a quantidade de funcionários" + style={styles.inputText} + onChangeText={setQuantidadeFuncionarios} + value={quantidadeFuncionarios} + /> + <TextInput + placeholder="Digite a capacidade de alunos matriculados por ano" + style={styles.inputText} + onChangeText={setCapacidadeAlunosMatriculadosPorAno} + value={capacidadeAlunosMatriculadosPorAno} + /> + <TextInput + placeholder="Digite a quantidade de turmas" + style={styles.inputText} + onChangeText={setQuantidadeTurmas} + value={quantidadeTurmas} + /> <TextInput - placeholder="Digite o nome do usuário" - style={styles.userInput} - onChangeText={setName} - value={name} + placeholder="Digite o endereço" + style={styles.inputText} + onChangeText={setEndereco} + value={endereco} /> <TextInput - placeholder="Digite o email do usuário" - style={styles.userInput} + placeholder="Digite o telefone" + style={styles.inputText} + onChangeText={setTelefone} + value={telefone} + /> + <TextInput + placeholder="Digite o email" + style={styles.inputText} onChangeText={setEmail} value={email} /> <TextInput - placeholder="Digite a idade do usuário" - style={styles.userInput} - onChangeText={setAge} - value={age} - keyboardType="numeric" + placeholder="Digite o nome do responsável" + style={styles.inputText} + onChangeText={setNomeResponsavel} + value={nomeResponsavel} /> - + <TextInput + placeholder="Digite o cargo do responsável" + style={styles.inputText} + onChangeText={setCargoResponsavel} + value={cargoResponsavel} + /> + <View style={styles.buttons}> <TouchableOpacity style={styles.button} onPress={handleUserAction}> - <Text>{isUpdate ? "Salvar Alterações" : "Criar Usuário"}</Text> + <Text style={styles.buttonTxt}>{isUpdate ? "Salvar Alterações" : "Criar Filial"}</Text> </TouchableOpacity> {isUpdate && ( <TouchableOpacity style={styles.button} onPress={clearInputs}> - <Text>Cancelar Edição</Text> + <Text style={styles.buttonTxt}>Cancelar Edição</Text> </TouchableOpacity> )} </View> + </View> ); } diff --git a/src/screens/Form/styles.js b/src/screens/Form/styles.js index 66e0066..bcbc564 100644 --- a/src/screens/Form/styles.js +++ b/src/screens/Form/styles.js @@ -3,20 +3,40 @@ import { StyleSheet } from "react-native"; const styles = StyleSheet.create({ container: { flex: 1, - marginTop: 50, alignItems: "center", + padding: 20, + backgroundColor: '#121212' }, button: { marginTop: 20, padding: 10, - backgroundColor: "#C9D4FF", + backgroundColor: "#7c5295", borderRadius: 5, }, userInput: { padding: 8, - borderBottomColor: "black", borderBottomWidth: 1, + margin: 5, }, + inputText: { + color: '#fff', + backgroundColor: '#1f1b24', + borderRadius: 5, + margin: 5, + width: 250, + height: 40, + padding: 8 + }, + buttonTxt: { + color: '#fff' + }, + buttons: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + gap: 10 + } }); export default styles; diff --git a/src/screens/Home/index.jsx b/src/screens/Home/index.jsx index dbb24b4..e6cf601 100644 --- a/src/screens/Home/index.jsx +++ b/src/screens/Home/index.jsx @@ -1,16 +1,33 @@ -import { Text, View } from "react-native"; - +import { Text, View, Image, ScrollView } from "react-native"; import styles from "./styles"; import Title from "../../components/Title"; +import { FontAwesome5, Ionicons, FontAwesome6, SimpleLineIcons } from '@expo/vector-icons'; export default function Home() { return ( <View style={styles.container}> <Title title="Home" /> - - <View> - <Text>Tela de apresentação do app</Text> + <ScrollView> + <View style={styles.card}> + <Image style={styles.img} source={require('../../../assets/papelada.avif')} /> + <View style={styles.cardTxt}> + <Text style={styles.subTitle}>Filiais Pablito</Text> + <Text style={styles.txt}>A filial de escolas, localizada em uma área de rápido crescimento urbano, representa um marco na educação da região. Esta instituição, que se destaca pela qualidade de ensino e pela inovação pedagógica, tem como objetivo principal formar cidadãos conscientes e comprometidos com o desenvolvimento sustentável. </Text> + </View> + <View style={styles.icons}> + <ScrollView horizontal> + <FontAwesome5 style={styles.icon} name="school" size={85} color="#fff" /> + <Ionicons style={styles.icon} name="school-outline" size={85} color="#fff" /> + <FontAwesome6 style={styles.icon} name="school-flag" size={85} color="#fff" /> + <SimpleLineIcons style={styles.icon} name="notebook" size={85} color="#fff" /> + </ScrollView> + </View> + <View style={styles.resumo}> + <Image style={styles.imageResumo} source={require('../../../assets/escola.jpg')}/> + <Text style={styles.txtResumo}>Em resumo, a filial de escolas é uma instituição que se compromete com a formação de cidadãos críticos, conscientes e capazes de contribuir para o desenvolvimento sustentável da sociedade. Através de uma abordagem educacional inovadora e inclusiva, a filial de escolas busca preparar os alunos para enfrentar os desafios do futuro com confiança e competência.</Text> + </View> </View> + </ScrollView> </View> ); } diff --git a/src/screens/Home/styles.js b/src/screens/Home/styles.js index ddb946a..29b3822 100644 --- a/src/screens/Home/styles.js +++ b/src/screens/Home/styles.js @@ -4,14 +4,84 @@ const styles = StyleSheet.create({ container: { flex: 1, alignItems: "center", - marginTop: 50, + backgroundColor: '#121212', + padding: 20 }, button: { marginTop: 20, padding: 10, - backgroundColor: "#C9D4FF", + backgroundColor: "#7c5295", borderRadius: 5, }, + card: { + display: 'flex', + flexDirection: 'column', + width: 300, + height: 100, + borderRadius: 10, + margin: 5, + backgroundColor: '#1f1b24' + }, + img: { + width: 300, + height: 200, + borderRadius: 10, + }, + cardTxt: { + padding: 25, + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + backgroundColor: '#1f1b24', + }, + subTitle: { + fontSize: 15, + fontWeight: '600', + color: '#e9e9e9', + }, + txt: { + textAlign: 'justify', + color: '#fff', + width: 250 + }, + icons: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + margin: 50, + padding: 10, + width: 200, + gap: 15 + }, + icon: { + margin: 20 + }, + resumo: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + marginTop: 50, + width: 300, + height: 200 + }, + imageResumo: { + width: 150, + height: 200, + borderRadius: 5 + }, + txtResumo: { + width: 200, + height: 200, + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + textAlign: 'justify', + color: '#fff', + margin: 10 + } }); export default styles; diff --git a/src/screens/Profile/index.jsx b/src/screens/Profile/index.jsx index c976885..e974b94 100644 --- a/src/screens/Profile/index.jsx +++ b/src/screens/Profile/index.jsx @@ -1,50 +1,89 @@ -import { Text, TouchableOpacity, View } from "react-native"; -import { useNavigation } from "@react-navigation/native"; - +import React from 'react'; +import { Text, View, Button, ScrollView } from "react-native"; +import { Video, ResizeMode } from 'expo-av'; +import { StatusBar } from "expo-status-bar"; import styles from "./styles"; import Title from "../../components/Title"; +import TouchButton from "../../components/TouchButton"; + +//Impor Icons +import { + AntDesign, + MaterialCommunityIcons, + FontAwesome5 +} from '@expo/vector-icons'; -import usersRepository from "../../models/user/UserRepository"; +//Import React Native Material +import { Avatar } from "@react-native-material/core"; export default function Profile({ route }) { - const navigation = useNavigation(); const { data } = route.params; - - const editUser = () => { - navigation.navigate("Form", { user: data, edit: true }); - }; - - const deleteUser = () => { - usersRepository.remove(data.id); - navigation.navigate("Users"); - }; + const video = React.useRef(null); + const [status, setStatus] = React.useState({}); return ( <View style={styles.container}> - <Title title="Profile" /> - - {data ? ( - <Text>Detalhes do usuário</Text> - ) : ( - <Text>Selecione um usuário para exibir seus detalhes</Text> - )} - - <View style={styles.user}> - <View style={styles.userDetail}> - <Text style={styles.text}>{data.name}</Text> - <Text style={styles.text}>{data.email}</Text> - <Text style={styles.text}>{data.age}</Text> + <ScrollView> + <View style={styles.avatar}> + <Avatar image={require('../../../assets/eu.jpg')} size={100} /> + <View style={styles.infos}> + <Text style={styles.title}>Pablo Daniel Couto</Text> + <Text style={styles.subTitle}>Desenvolvedor Full Stack</Text> + <View style={styles.icons}> + <AntDesign name="github" size={24} color="#808080" /> + <MaterialCommunityIcons name="gmail" size={24} color="#808080" /> + <AntDesign name="linkedin-square" size={24} color="#808080" /> + </View> + </View> </View> - - <View style={styles.userActions}> - <TouchableOpacity style={styles.editButton} onPress={editUser}> - <Text>Editar</Text> - </TouchableOpacity> - <TouchableOpacity style={styles.deleteButton} onPress={deleteUser}> - <Text>Excluir</Text> - </TouchableOpacity> + <View style={styles.sobreMim}> + <Text style={styles.sobreTxt}> + Sou Pablo Daniel Couto e aluno do SENAI de Valinhos cursando Desenvolvimento de Sistemas(DS) há 1 ano, com grande vontade no aprendizado de programação que ao longo do tempo de estudo obteve conhecimento em HTML5, CSS3, JavaScript, React, React Native e NodeJS. Lém do uso de ferramentas de trabalho e metodologias ageis como Git, GitHub, Figma, Scrum e Kanban. + </Text> + <Text style={styles.projectsTitle}>Projetos</Text> + <View style={styles.videoBg}> + <ScrollView style={styles.scroll} horizontal> + <Video + ref={video} + style={styles.video} + source={require('../../../assets/travando.mp4')} + useNativeControls + resizeMode={ResizeMode.CONTAIN} + isLooping + onPlaybackStatusUpdate={status => setStatus(() => status)} + /> + <Video + ref={video} + style={styles.video} + source={require('../../../assets/travando.mp4')} + useNativeControls + resizeMode={ResizeMode.CONTAIN} + isLooping + onPlaybackStatusUpdate={status => setStatus(() => status)} + /> + <Video + ref={video} + style={styles.video} + source={require('../../../assets/travando.mp4')} + useNativeControls + resizeMode={ResizeMode.CONTAIN} + isLooping + onPlaybackStatusUpdate={status => setStatus(() => status)} + /> + </ScrollView> + </View> + <Text style={styles.techsTitle}>Tecnologias:</Text> + <View style={styles.tech}> + <FontAwesome5 name="html5" size={50} color="#fff" /> + <FontAwesome5 name="css3" size={50} color="#fff" /> + <FontAwesome5 name="js" size={50} color="#fff" /> + <FontAwesome5 name="react" size={50} color="#fff" /> + <FontAwesome5 name="node-js" size={50} color="#fff" /> + </View> </View> - </View> + <Title title="Profile" /> + </ScrollView > + <StatusBar style="auto"/> </View> ); } diff --git a/src/screens/Profile/styles.js b/src/screens/Profile/styles.js index dfb3754..be033d3 100644 --- a/src/screens/Profile/styles.js +++ b/src/screens/Profile/styles.js @@ -4,45 +4,84 @@ const styles = StyleSheet.create({ container: { flex: 1, alignItems: "center", - marginTop: 50, - }, - button: { - marginTop: 20, - padding: 10, - backgroundColor: "#C9D4FF", - borderRadius: 5, - }, - user: { - marginTop: 20, - padding: 10, - backgroundColor: "#C9D4FF", - borderRadius: 5, - }, - userDetail: { - marginBottom: 10, - }, - userActions: { - flexDirection: "row", - gap: 10, - justifyContent: "center", - }, - editButton: { - padding: 5, - borderRadius: 5, - backgroundColor: "#4CAF50", - marginRight: 5, - minWidth: 70, - alignItems: "center", + backgroundColor: '#121212', + padding: 12, }, - deleteButton: { - padding: 5, - borderRadius: 5, - backgroundColor: "#FF6347", - minWidth: 70, - alignItems: "center", + avatar: { + margin: 20, + gap: 20, + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-around', + backgroundColor: '#1f1b24', + padding: 20, + borderRadius: 5 + }, + infos: { + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + gap: 8 + }, + icons: { + display: 'flex', + flexDirection: 'row', + gap: 10 + }, + title: { + color: '#fff', + fontSize: 20, + fontWeight: '500' + }, + subTitle: { + color: '#808080', + fontSize: 15, + fontWeight: '400' + }, + sobreMim: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + textAlign: 'justify', + backgroundColor: '#1f1b24', + margin: 10, + padding: 25, + borderRadius: 5 + }, + sobreTxt: { + fontSize: 15, + color: '#fff' + }, + tech: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + gap: 20, + }, + techsTitle: { + color: '#7c5295', + fontSize: 20, + fontWeight: '700', + marginBottom: 25 + }, + projectsTitle: { + color: '#7c5295', + fontSize: 20, + fontWeight: '700', + marginTop: 30 + }, + videoBg: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + marginTop: -20 }, - text: { - fontSize: 16, + video: { + width: 320, + height: 300, + marginRight: 20 }, });