Construindo um painel inspirado no Yahoo em React com Chakra UI

Criar um painel semelhante ao do Yahoo, usando componentes React JS com Chakra UI, envolve estruturar seu aplicativo em componentes modulares e reutilizáveis, aproveitando o Chakra UI para estilo e layout. A seguir, descreverei uma estrutura básica para esse painel, incluindo alguns componentes-chave que você pode querer usar. Presumo que você tenha um conhecimento básico de React e familiaridade com o Chakra UI.

Configurando o ambiente

Primeiro, certifique-se de ter o Node.js instalado. Em seguida, crie um novo projeto React e adicione o Chakra UI:

npx create-react-app yahoo-dashboard
 cd yahoo-dashboard
 npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

Estrutura de diretório

Aqui está uma estrutura de diretório simples para seu projeto:

 yahoo-dashboard/
 |-- public/
 |-- src/
 |-- components/
 |-- Header.js
 |-- NewsFeed.js
 |-- WeatherWidget.js
 |-- Footer.js
 |-- App.js
 |-- index.js
 |-- theme.js

Configuração do tema (opcional)

Você pode personalizar o tema para combinar com o esquema de cores e o estilo do Yahoo:

 // src/theme.js
 import { extendTheme } from "@chakra-ui/react";

 const theme = extendTheme({
 colors: {
 brand: {
 900: "#123456", // Example color
 800: "#567890", // Example color
 },
 },
 });

 export default theme;

Componente de aplicativo

Em App.js , envolva seu aplicativo em um ChakraProvider e use o tema personalizado:

 // src/App.js
 import React from "react";
 import { ChakraProvider } from "@chakra-ui/react";
 import theme from "./theme";
 import Header from "./components/Header";
 import NewsFeed from "./components/NewsFeed";
 import WeatherWidget from "./components/WeatherWidget";
 import Footer from "./components/Footer";

 function App() {
 return (
 <ChakraProvider theme={theme}>
 <Header />
 <NewsFeed />
 <WeatherWidget />
 <Footer />
 </ChakraProvider>
 );
 }

 export default App;

Componentes

Cada componente será projetado usando componentes da interface do usuário do Chakra. Aqui está uma breve visão geral de cada um:

Componente de Cabeçalho

Isso incluirá a barra de navegação superior e qualquer marca global.

// src/components/Header.js
 import { Box, Flex, Text } from "@chakra-ui/react";

 function Header() {
 return (
 <Flex bg="blue.500" color="white" p={4} justifyContent="space-between">
 <Text fontSize="lg" fontWeight="bold">Yahoo Dashboard</Text>
 <Flex>
 {/* Navigation Items */}
 <Text p={2}>Home</Text>
 <Text p={2}>News</Text>
 <Text p={2}>Weather</Text>
 </Flex>
 </Flex>
 );
 }

 export default Header;

Componente NewsFeed

Isso poderia exibir uma lista de artigos de notícias usando um layout simples.

 // src/components/NewsFeed.js
 import { Box, Heading, Text } from "@chakra-ui/react";

 function NewsFeed() {
 return (
 <Box p={4}>
 <Heading as="h3" size="lg">Latest News</Heading>
 {/* Map through news articles here */}
 <Text mt={2}>News Article #1</Text> 
</Caixa>
 );
 }

 exportar NewsFeed padrão;

Widget do tempo

Este componente pode mostrar o status climático atual.

 // src/components/WeatherWidget.js
 import { Box, Text } from "@chakra-ui/react";

 function WeatherWidget() {
 return (
 <Box p={4} bg="gray.300">
 <Text fontSize="sm">Weather Widget</Text>
 </Box>
 );
 }

 export default WeatherWidget;

Componente de rodapé

Isso inclui informações de direitos autorais ou links adicionais.

 // src/components/Footer.js
 import { Box, Text } from "@chakra-ui/react";

 function Footer() {
 return (
 <Box p={4} bg="blue.500" color="white" textAlign="center">
 <Text>© 2024 Yahoo Dashboard Clone</Text>
 </Box>
 );
 }

 export default Footer;

Executando o Projeto

Para ver seu projeto em ação, execute:

 npm start

Isso iniciará o aplicativo React no seu navegador padrão. A partir daí, você pode continuar a refinar e expandir os componentes para imitar melhor os recursos e o layout do painel do Yahoo. Essa configuração fornece uma base escalável para a construção de um painel mais detalhado e interativo.

Adicione a navegação

Criar um menu de navegação eficaz para o painel, semelhante ao do Yahoo, usando React e Chakra UI, envolve estruturar o menu para facilitar o uso, garantir que ele se encaixe no design e na funcionalidade geral do painel e, potencialmente, adicionar capacidade de resposta para diferentes tamanhos de dispositivos. A seguir, mostrarei como implementar um menu de navegação básico no seu painel.

Implementando o Menu de Navegação com o Chakra UI

Para criar um menu de navegação em seu painel, você vai querer usar uma combinação de componentes da IU do Chakra, como Flex , Box e elementos interativos como Link ou Button . Aqui está um guia passo a passo sobre como configurá-lo.

1. Atualização do componente de cabeçalho

Vamos atualizar o Header.js componente para incluir links de navegação que podem corresponder a diferentes seções ou widgets em seu painel (por exemplo, Início, Notícias, Finanças, Clima). Vou adicionar react-router-dom para lidar com o roteamento. Primeiro, certifique-se de instalá-lo:

 npm install react-router-dom

2. Configurar o roteador no componente principal do aplicativo

Antes de atualizar o Cabeçalho, vamos encapsular a aplicação em um roteador em src/index.js :

 import React from 'react';
 import ReactDOM from 'react-dom'; 
importar { BrowserRouter } de 'react-router-dom';
 importar aplicativo de './App';
 importar reportWebVitals de './reportWebVitals';

 ReactDOM.render(
 <React.Modo Estrito>
 <Roteador do Navegador>
 <Aplicativo />
 </Roteador do Navegador>
 </React.StrictMode>,
 document.getElementById('raiz')
 );

 reportWebVitals();

3. Componente de cabeçalho atualizado

Agora atualize o Header.js para incluir navegação:

 // src/components/Header.js
 import { Flex, Text, Link as ChakraLink } from "@chakra-ui/react";
 import { Link } from "react-router-dom";

 function Header() {
 return (
 <Flex bg="blue.500" color="white" p={4} justifyContent="space-between" alignItems="center">
 <Text fontSize="lg" fontWeight="bold">Yahoo Dashboard</Text>
 <Flex>
 {/* Navigation Items as Links */}
 <ChakraLink as={Link} to="/" p={2} style= {{ textDecoration: 'none' }} >Home</ChakraLink> 
<ChakraLink as={Link} to="/news" p={2} style= {{ textDecoration: 'none' }} >Notícias</ChakraLink>
 <ChakraLink as={Link} to="/finanças" p={2} style= {{ textDecoration: 'none' }} >Finanças</ChakraLink>
 <ChakraLink as={Link} to="/weather" p={2} style= {{ textDecoration: 'none' }} >Clima</ChakraLink>
 </Flex>
 </Flex>
 );
 }

 exportar cabeçalho padrão;

4. Roteamento no componente de aplicativo

Agora, em App.js , defina as rotas para cada item de navegação:

 // src/App.js
 import React from "react";
 import { ChakraProvider } from "@chakra-ui/react";
 import { Routes, Route } from "react-router-dom";
 import theme from "./theme";
 import Header from "./components/Header";
 import NewsFeed from "./components/NewsFeed";
 import WeatherWidget from "./components/WeatherWidget";
 import FinanceWidget from "./components/FinanceWidget"; 
importar rodapé de "./components/Footer";

 função App() {
 retornar (
 <Tema do ChakraProvider={tema}>
 <Cabeçalho />
 <Rotas>
 <Route path="/" elemento={<NewsFeed />} />
 <Caminho da rota="/news" elemento={<NewsFeed />} />
 <Caminho da rota="/finanças" elemento={<FinanceWidget />} />
 <Caminho da rota="/clima" elemento={<WeatherWidget />} />
 </Rotas>
 <Rodapé />
 </Provedor de Chakra>
 );
 }

 exportar aplicativo padrão;

Considerações finais

Esta configuração fornece um menu de navegação simples e eficaz que se integra a um React Router para navegar por diferentes seções do painel. É simples, usa componentes de interface do usuário do Chakra para estilização e pode ser expandido com recursos mais sofisticados, como menus suspensos ou megamenus, conforme necessário. Veja o projeto completo no GitHub:

GitHub - icpmtech/yahoo-dashboard