Kinou/my_website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add dark mode globally and switch in different components

Browse Source
This commit is contained in:
kinou-p 2024-05-05 03:50:34 +02:00
parent 0022c30d5e
commit 151c9d9dc5
12 changed files with 289 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
my-app/package-lock.json generated
View File

@ -28,6 +28,7 @@
"react-country-flag": "^3.1.0", "react-country-flag": "^3.1.0",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-icons": "^5.2.0", "react-icons": "^5.2.0",
"react-router-dom": "^6.23.0",
"react-scripts": "^5.0.1", "react-scripts": "^5.0.1",
"typescript": "^4.9.5", "typescript": "^4.9.5",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
@ -3770,6 +3771,14 @@
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
} }
}, },
"node_modules/@remix-run/router": {
"version": "1.16.0",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.0.tgz",
"integrity": "sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q==",
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/@restart/hooks": { "node_modules/@restart/hooks": {
"version": "0.4.16", "version": "0.4.16",
"resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz", "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz",
@ -15559,6 +15568,36 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/react-router": {
"version": "6.23.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.0.tgz",
"integrity": "sha512-wPMZ8S2TuPadH0sF5irFGjkNLIcRvOSaEe7v+JER8508dyJumm6XZB1u5kztlX0RVq6AzRVndzqcUh6sFIauzA==",
"dependencies": {
"@remix-run/router": "1.16.0"
},
"engines": {
"node": ">=14.0.0"
},
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/react-router-dom": {
"version": "6.23.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.0.tgz",
"integrity": "sha512-Q9YaSYvubwgbal2c9DJKfx6hTNoBp3iJDsl+Duva/DwxoJH+OTXkxGpql4iUK2sla/8z4RpjAm6EWx1qUDuopQ==",
"dependencies": {
"@remix-run/router": "1.16.0",
"react-router": "6.23.0"
},
"engines": {
"node": ">=14.0.0"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/react-scripts": { "node_modules/react-scripts": {
"version": "5.0.1", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",

1
my-app/package.json
View File

@ -23,6 +23,7 @@
"react-country-flag": "^3.1.0", "react-country-flag": "^3.1.0",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-icons": "^5.2.0", "react-icons": "^5.2.0",
"react-router-dom": "^6.23.0",
"react-scripts": "^5.0.1", "react-scripts": "^5.0.1",
"typescript": "^4.9.5", "typescript": "^4.9.5",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"

101
my-app/src/App.tsx
View File

@ -1,29 +1,21 @@
// import React from 'react';
import logo from './img/first.jpg';
import background from "./img/background.jpg";
// import background_dark from "./img/background_dark.jpg";
import './css/App.css'; import './css/App.css';
import './css/mine.css'; import './css/mine.css';
import './css/mine_phone.css'; import './css/mine_phone.css';
import MenuSimple from './components/language'; import Home from './pages/home'
import ButtonSimple from './components/button'
import MaterialUISwitch from './components/switch'
import { Card, CardContent, CardMedia, Switch, Typography } from "@mui/material"
import { ThemeProvider, createTheme } from '@mui/material/styles'; import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline'; import { BrowserRouter, Route, Routes } from 'react-router-dom';
import { dark } from '@mui/material/styles/createPalette';
// import { Switch } from '@mui/base/Switch';
import React, { useState } from "react"; import React, { useState } from "react";
import { FaArrowRightLong } from "react-icons/fa6"; import CssBaseline from '@mui/material/CssBaseline';
import Header from './components/header';
import { ColorModeContext } from './utils/color-toggle';
import Button from '@mui/material/Button';
function App() function App()
{ {
// state to manage the dark mode // state to manage the dark mode
const [toggleDarkMode, setToggleDarkMode] = useState(true); const [toggleDarkMode, setToggleDarkMode] = useState(true);
@ -46,81 +38,14 @@ function App()
}); });
return ( return (
<ThemeProvider theme={darkTheme}> <BrowserRouter>
<CssBaseline /> <CssBaseline />
<div> <Header/>
<body> <Routes>
<header> <Route path="/" element={<Home/>}/>
<div className="header-content"> <Route path="/test" element={<></>}/>
{/* <h1 className="title">A.P</h1> */} </Routes>
<div className="logo"> </BrowserRouter>
<img src={logo} alt="Logo" />
</div>
<div className="pages">
Contact
</div>
<div className="pages">
Projets
</div>
<div className="pages">
CV
</div>
<div className="pages">
Competences
</div>
<div className="language">
<MenuSimple/>
<MaterialUISwitch onChange={toggleDarkTheme}/>
{/* <Switch className="dark_mode" checked={toggleDarkMode} onChange={toggleDarkTheme} defaultChecked /> */}
</div>
</div>
</header>
<div className='home'>
<div className="presentation">
<div className='hello'>Bienvenue.</div>
<div className="description">Étudiant a 42 en informatique, je cherche un emploi afin de compléter
ma formation académique par une expérience professionnelle qui a du sens.
Je suis ouvert à de nombreuses propositions en rapport avec mes études
et suis prêt à discuter de mon parcours plus amplement lors d’un entretien.</div>
<div className="cv_button">
{/* <UnstyledButtonsSimple/> */}
<ButtonSimple/>
</div>
{/* <div className="project_button"> */}
{/* <UnstyledButtonsSimple/> */}
{/* </div> */}
</div>
<div className="project">
<div className='project_txt'>Projects</div>
<div className = "project_group">
<p className="project_list">- Ft_Transcendence</p>
<FaArrowRightLong className="arrow"/>
</div>
<div className = "project_group">
<p className="project_list">- Cloud-1</p>
<FaArrowRightLong className="arrow"/>
</div>
<div className = "project_group">
<p className="project_list">- Minishell</p>
<FaArrowRightLong className="arrow"/>
</div>
<div className = "project_group">
<p className="project_list">- Cube3d</p>
<FaArrowRightLong className="arrow"/>
</div>
<div className = "project_group">
<p className="project_list">- Homemade NAS</p>
<FaArrowRightLong className="arrow"/>
</div>
</div>
</div>
</body>
</div>
</ThemeProvider>
); );
} }

2
my-app/src/components/button.tsx
View File

@ -34,10 +34,10 @@ const grey = {
const Button = styled(BaseButton)( const Button = styled(BaseButton)(
({ theme }) => ` ({ theme }) => `
align-self: center;
font-family: 'IBM Plex Sans', sans-serif; font-family: 'IBM Plex Sans', sans-serif;
font-weight: 600; font-weight: 600;
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.5;
background-color: ${blue[500]}; background-color: ${blue[500]};
padding: 8px 16px; padding: 8px 16px;
border-radius: 8px; border-radius: 8px;

64
my-app/src/components/header.tsx Normal file
View File

@ -0,0 +1,64 @@
import MenuSimple from './language';
import MaterialUISwitch from './switch'
import { useTheme, ThemeProvider, createTheme } from '@mui/material/styles';
// import { ThemeProvider, createTheme } from '@mui/material/styles';
import React, { useState, useContext } from "react";
import logo from '../img/first.jpg';
// import { ColorModeContext } from '../utils/color-toggle'
// const theme = useTheme()
// const colorMode = React.useContext(ColorModeContext);
import { ColorModeContext } from '../utils/color-toggle';
// const { ColorMode, setColorMode } = useColorMode();
function Header()
{
const { changeMode } = useContext(ColorModeContext);
// const { colorMode, setColorMode } = changeMode();
// const toggleColorMode = () => {
// // Call setColorMode and pass the new color mode value
// setColorMode(colorMode === 'light' ? 'dark' : 'light');
// };
return (
// <ThemeProvider theme={darkTheme}>
<header>
<div className="header-content">
{/* <h1 className="title">A.P</h1> */}
<div className="logo">
<img src={logo} alt="Logo" />
</div>
<div className="pages">
Contact
</div>
<div className="pages">
Projets
</div>
<div className="pages">
CV
</div>
<div className="pages">
Competences
</div>
<div className="language">
<MenuSimple/>
<MaterialUISwitch onChange={changeMode}/>
{/* <Switch className="dark_mode" checked={toggleDarkMode} onChange={toggleDarkTheme} defaultChecked /> */}
</div>
</div>
</header>
// </ThemeProvider>
)
}
export default Header;

62
my-app/src/components/test.tsx Normal file
View File

@ -0,0 +1,62 @@
import * as React from 'react';
import IconButton from '@mui/material/IconButton';
import Box from '@mui/material/Box';
import { useTheme, ThemeProvider, createTheme } from '@mui/material/styles';
// import Brightness4Icon from '@mui/icons-material/Brightness4';
// import Brightness7Icon from '@mui/icons-material/Brightness7';
const ColorModeContext = React.createContext({ toggleColorMode: () => {} });
// function MyApp() {
// const theme = useTheme();
// const colorMode = React.useContext(ColorModeContext);
// return (
// <Box
// sx={{
// display: 'flex',
// width: '100%',
// alignItems: 'center',
// justifyContent: 'center',
// bgcolor: 'background.default',
// color: 'text.primary',
// borderRadius: 1,
// p: 3,
// }}
// >
// {theme.palette.mode} mode
// <IconButton sx={{ ml: 1 }} onClick={colorMode.toggleColorMode} color="inherit">
// {theme.palette.mode === 'dark' ? <Brightness7Icon /> : <Brightness4Icon />}
// </IconButton>
// </Box>
// );
// }
export default function ToggleColorMode() {
const [mode, setMode] = React.useState<'light' | 'dark'>('light');
const colorMode = React.useMemo(
() => ({
toggleColorMode: () => {
setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
},
}),
[],
);
const theme = React.useMemo(
() =>
createTheme({
palette: {
mode,
},
}),
[mode],
);
// return (
// <ColorModeContext.Provider value={colorMode}>
// <ThemeProvider theme={theme}>
// <MyApp />
// </ThemeProvider>
// </ColorModeContext.Provider>
// );
}

13
my-app/src/css/mine.css
View File

@ -60,8 +60,8 @@ body {
/* height: 5vh; */ /* height: 5vh; */
transition-property: transform; transition-property: transform;
transition-duration: 1s; /* transition-duration: 200ms; */
transition: all 700ms ease; transition: all 200ms ease;
&:hover { &:hover {
transform: scale(1.1); transform: scale(1.1);
@ -93,9 +93,8 @@ body {
margin-right: 0vw; margin-right: 0vw;
} }
.css-15bhy65 { /* .css-15bhy65 {
/* margin-right: 20px; */ /* margin-right: 20px; */
}
Button{ Button{
font-weight: 800; font-weight: 800;
@ -175,9 +174,9 @@ body {
} }
.css-cg7pzv { /* .css-cg7pzv {
width: 20vw; width: 20vw;
} } */
.project_group { .project_group {
font-size: 1vw; font-size: 1vw;
@ -194,7 +193,7 @@ body {
margin-right: 2vw; margin-right: 2vw;
/* justify-content: space-between; */ /* justify-content: space-between; */
transition-property: transform; transition-property: transform;
transition-duration: 700ms; transition-duration: 500ms;
&:hover { &:hover {
transform: scale(1.15); transform: scale(1.15);
} }

7
my-app/src/css/mine_phone.css
View File

@ -47,12 +47,11 @@
max-width: 100%; max-width: 100%;
} }
.cv_button { .cv_button {
width: 20vw; width: 100%;
margin: 0; margin: 0;
margin-top: 5vw; margin-top: 5vw;
margin-right: 40vw; /* margin-right: 40vw; */
margin-left: 40vw; /* margin-left: 40vw; */
/* align-module: center; */ /* align-module: center; */
/* align-items: center; */ /* align-items: center; */
/* display: inline-block; */ /* display: inline-block; */

6
my-app/src/index.tsx
View File

@ -2,14 +2,18 @@ import React from 'react';
import ReactDOM from 'react-dom/client'; import ReactDOM from 'react-dom/client';
import './index.css'; import './index.css';
import App from './App'; import App from './App';
// import ColorModeProvider from './utils/color-toggle';
import reportWebVitals from './reportWebVitals'; import reportWebVitals from './reportWebVitals';
import { ColorModeProvider } from "./utils/color-toggle"
const root = ReactDOM.createRoot( const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement document.getElementById('root') as HTMLElement
); );
root.render( root.render(
<React.StrictMode> <React.StrictMode>
<App /> <ColorModeProvider />
</React.StrictMode> </React.StrictMode>
); );

52
my-app/src/pages/home.tsx Normal file
View File

@ -0,0 +1,52 @@
import Header from '../components/header'
import ButtonSimple from '../components/button'
import { FaArrowRightLong } from "react-icons/fa6";
function Home()
{
return(
<div>
<body>
{/* <Header/> */}
<div className='home'>
<div className="presentation">
<div className='hello'>Bienvenue.</div>
<div className="description">Étudiant a 42 en informatique, je cherche un emploi afin de compléter
ma formation académique par une expérience professionnelle qui a du sens.
Je suis ouvert à de nombreuses propositions en rapport avec mes études
et suis prêt à discuter de mon parcours plus amplement lors d’un entretien.</div>
<div className="cv_button">
<ButtonSimple/>
</div>
</div>
<div className="project">
<div className='project_txt'>Projects</div>
<div className = "project_group">
<p className="project_list">- Ft_Transcendence</p>
<FaArrowRightLong className="arrow"/>
</div>
<div className = "project_group">
<p className="project_list">- Cloud-1</p>
<FaArrowRightLong className="arrow"/>
</div>
<div className = "project_group">
<p className="project_list">- Minishell</p>
<FaArrowRightLong className="arrow"/>
</div>
<div className = "project_group">
<p className="project_list">- Cube3d</p>
<FaArrowRightLong className="arrow"/>
</div>
<div className = "project_group">
<p className="project_list">- Homemade NAS</p>
<FaArrowRightLong className="arrow"/>
</div>
</div>
</div>
</body>
</div>
)
}
export default Home;

5
my-app/src/setupTests.ts
View File

@ -1,5 +0,0 @@
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';

41
my-app/src/utils/color-toggle.tsx Normal file
View File

@ -0,0 +1,41 @@
import React, { createContext, useContext, useState } from 'react';
import { useTheme, ThemeProvider, createTheme } from '@mui/material/styles';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import CssBaseline from '@mui/material/CssBaseline';
import Header from '../components/header';
import App from "../App"
export const ColorModeContext = createContext<any>(true);
export const ColorModeProvider = ({ children }: any) => {
const [ColorMode, setColorMode] = useState(true); // Define your initial state here
const darkTheme = createTheme({
palette: {
mode: ColorMode ? 'dark' : 'light',
primary: {
main: '#90caf9',
},
secondary: {
main: '#131052',
},
},
});
function changeMode() {
console.log("CHANGE MOOOOODE")
setColorMode(!ColorMode)
}
return (
<ThemeProvider theme={darkTheme}>
<ColorModeContext.Provider value={{ ColorMode, changeMode }}>
<App/>
</ColorModeContext.Provider>
</ThemeProvider>
);
};