) => {
setValue(event.target.value)
}
return (
$
}}
/>
kg
}}
/>
)
}
================================================
FILE: react-mui-demo/src/components/MuiTimeline.tsx
================================================
import {
Timeline,
TimelineItem,
TimelineSeparator,
TimelineConnector,
TimelineContent,
TimelineDot,
TimelineOppositeContent
} from '@mui/lab'
export const MuiTimeline = () => {
return (
09:30 am
Eat
10:30 am
Code
10:30 am
Sleep
09:00 am
Repeat
)
}
================================================
FILE: react-mui-demo/src/components/MuiTooltip.tsx
================================================
import { Tooltip, IconButton } from '@mui/material'
import DeleteIcon from '@mui/icons-material/Delete'
export const MuiTooltip = () => {
return (
)
}
================================================
FILE: react-mui-demo/src/components/MuiTypography.tsx
================================================
import { Typography } from '@mui/material'
export const MuiTypography = () => {
return (
h1 Heading
h2 Heading
h3 Heading
h4 Heading
h5 Heading
h6 Heading
subtitle1
subtitle2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam saepe
magnam illo quas illum minus, aperiam, iusto optio quisquam veniam
obcaecati quasi libero aspernatur alias quia modi minima excepturi ad.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, harum
quam deserunt optio atque illo iste! Qui ullam ut nisi. Porro adipisci
eius nesciunt excepturi id! Eius nemo asperiores natus?
)
}
================================================
FILE: react-mui-demo/src/index.css
================================================
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
================================================
FILE: react-mui-demo/src/index.tsx
================================================
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
================================================
FILE: react-mui-demo/src/react-app-env.d.ts
================================================
///
================================================
FILE: react-mui-demo/src/reportWebVitals.ts
================================================
import { ReportHandler } from 'web-vitals';
const reportWebVitals = (onPerfEntry?: ReportHandler) => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
================================================
FILE: react-mui-demo/src/setupTests.ts
================================================
// 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';
================================================
FILE: react-mui-demo/src/theme.d.ts
================================================
import { Theme, ThemeOptions } from '@mui/material/styles'
declare module '@mui/material/styles' {
interface Theme {
status: {
danger: string
}
}
interface ThemeOptions {
status: {
danger: React.CSSProperties['color']
}
}
interface Palette {
neutral?: PaletteColor
}
interface PaletteOptions {
neutral?: PaletteColorOptions
}
interface PaletteColor {
darker?: string
}
interface SimplePaletteColorOptions {
darker?: string
}
}
================================================
FILE: react-mui-demo/tsconfig.json
================================================
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
)}