Пользовательский интерфейс Chakra не отображается ⇐ CSS

[Anonymous]

Это мой первый проект с использованием пользовательского интерфейса ChakraUI.
Я установил все зависимости самого ChakraUI и пытаюсь импортировать некоторые компоненты из документации ChakraUI.
Я установил удалось импортировать и отобразить функцию кнопки, но после того, как я попробовал ее с функцией карты, страница не загружалась и отображался просто белый экран.
Вот как выглядит мой .jsx< /p>

Код: Выделить всё

import React, { useEffect, useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faLinkedin, faInstagram } from '@fortawesome/free-brands-svg-icons';
import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
import './style.css';
import Tooltip from './tooltip.jsx';
import { Button, ButtonGroup } from '@chakra-ui/react'
import { Card, CardHeader, CardBody, CardFooter } from '@chakra-ui/react'

export default function App() {
const [fadeIn, setFadeIn] = useState(false);

useEffect(() => {
setFadeIn(true);
}, []);

return (


[list]
[*]
Home

[*]
About

[*]
Projects

[/list]

[url=https://www.linkedin.com/in/amadeus-gavriel-tataming-59264021b/][/url]


[*]

[url=https://www.instagram.com/itsdeus][/url]


[*]

[url=mailto:amadeustataming@gmail.com][/url]


[/list]



Journey of Mine

About Me
As a Robotics & AI undergraduate at Universitas Airlangga, my recent internship provided extensive experience in developing PRTG monitoring prototypes and web interfaces. My strong written English skills and reliability make me effective in both team and individual work environments. I'm actively seeking opportunities in the technology industry to hone my skills and contribute to society through innovative projects.


Portfolio

Prototype Network Monitoring
I worked on a prototype for continuous data generation for network monitoring, which was then sent to InfluxDB for time-series monitoring on a Grafana Dashboard. This project was my introduction to database and network monitoring, using Python to integrate InfluxDB and Grafana for real-time analytics of metrics such as bandwidth and latency.

Community Service: STEM Education through Robotics
As part of a community service project, I assembled "Airoline" Line Follower Robots designed for easy and effective STEM education.  Aimed at bridging the educational gap at SMP Yayasan Institut Indonesia, this initiative served as a model for other schools facing similar challenges. My role involved overcoming the lack of experience in assembly and navigating the COVID-19 era's constraints to progress in robotics education.



View a summary of all your customers over the last month.





);
}

Мой Main.jsx:

Код: Выделить всё

import React from 'react'
import ReactDOM  from 'react-dom/client'
import { ChakraProvider } from '@chakra-ui/react'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(





)

Наконец, мой package.json

Код: Выделить всё

{
"name": "portofolio-website-final",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"@chakra-ui/react": "^2.8.2",
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.0",
"framer-motion": "^11.0.14",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.64",
"@types/react-dom": "^18.2.21",
"@vitejs/plugin-react-swc": "^3.5.0",
"eslint": "^8.57.0",
"eslint-plugin-react": "^7.34.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"vite": "^5.1.6"
}
}

Я не понимаю, что я здесь сделал не так.
Я попробовал перезапустить приложение, но проблема не решена.
Может ли кто-нибудь помочь, как указать где я сделал не так? Это было бы очень полезно!

Подробнее здесь: https://stackoverflow.com/questions/781 ... -rendering