here we go

This commit is contained in:
maxnes3 2024-10-14 02:27:42 +04:00
parent f18e06a7cb
commit 8fb12be7a6
26 changed files with 1834 additions and 10 deletions

View File

@ -7,6 +7,6 @@
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/app/main.tsx"></script>
</body> </body>
</html> </html>

1684
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -12,19 +12,23 @@
}, },
"dependencies": { "dependencies": {
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1" "react-dom": "^18.3.1",
"react-router-dom": "^6.27.0"
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.11.1", "@eslint/js": "^9.11.1",
"@types/node": "^22.7.5", "@types/node": "^22.7.5",
"@types/react": "^18.3.10", "@types/react": "^18.3.10",
"@types/react-dom": "^18.3.0", "@types/react-dom": "^18.3.0",
"@typescript-eslint/eslint-plugin": "^8.8.1",
"@typescript-eslint/parser": "^8.8.1",
"@vitejs/plugin-react-swc": "^3.5.0", "@vitejs/plugin-react-swc": "^3.5.0",
"autoprefixer": "^10.4.20", "autoprefixer": "^10.4.20",
"axios": "^1.7.7", "axios": "^1.7.7",
"eslint": "^9.11.1", "eslint": "^9.12.0",
"eslint-config-prettier": "^9.1.0", "eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.2.1", "eslint-plugin-prettier": "^5.2.1",
"eslint-plugin-react": "^7.37.1",
"eslint-plugin-react-hooks": "^5.1.0-rc.0", "eslint-plugin-react-hooks": "^5.1.0-rc.0",
"eslint-plugin-react-refresh": "^0.4.12", "eslint-plugin-react-refresh": "^0.4.12",
"globals": "^15.9.0", "globals": "^15.9.0",

View File

@ -1,5 +0,0 @@
function App() {
return <></>;
}
export default App;

8
src/app/App.tsx Normal file
View File

@ -0,0 +1,8 @@
import Index from '@/pages';
import '@shared/assets/styles/globals.scss';
function App() {
return <Index />;
}
export default App;

17
src/app/layout/layout.tsx Normal file
View File

@ -0,0 +1,17 @@
import { FC } from 'react';
import { LayoutRouteProps } from 'react-router-dom';
import classes from './styles.module.scss';
import { Navbar } from '@/widgets/navbar';
import { Footer } from '@/widgets/footer';
const Layout: FC<LayoutRouteProps> = ({ children }) => {
return (
<div className={classes.container}>
<Navbar />
<main>{children}</main>
<Footer />
</div>
);
};
export default Layout;

View File

@ -0,0 +1,19 @@
@use '../../shared/assets/styles/adaptive' as adaptive;
$adaptive: (
desktop: (
container: 1240px
),
laptop: (
container: 886px
),
mobile: (
container: 315px
),
);
.container {
position: relative;
margin: 0 auto;
@include adaptive.set-adaptive($adaptive, max-width, container);
}

View File

@ -0,0 +1,5 @@
const HomePage = () => {
return <></>;
};
export default HomePage;

23
src/pages/index.tsx Normal file
View File

@ -0,0 +1,23 @@
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Layout from '@app/layout/layout';
import HomePage from '@pages/home/home.page';
const routes = [{ path: '/', element: <HomePage /> }];
const Index = () => {
return (
<BrowserRouter>
<Routes>
{routes.map((route) => (
<Route
key={route.path}
path={route.path}
element={<Layout children={route.element} />}
></Route>
))}
</Routes>
</BrowserRouter>
);
};
export default Index;

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 MiB

View File

@ -0,0 +1,33 @@
$breakpoints: (
desktop: (
max: 1440px,
min: 1024.1px
),
laptop: (
max: 1024px,
min: 375.1px
),
mobile: (
max: 375px,
min: 0px
),
);
@mixin breakpoint($point) {
$min-width: map-get($breakpoints, $point, min);
$max-width: map-get($breakpoints, $point, max);
@media (min-width: $min-width) and (max-width: $max-width) {
@content;
}
}
@mixin set-adaptive($adaptive, $property: null, $attribute: null) {
@each $breakpoint, $settings in $adaptive {
@include breakpoint($breakpoint) {
@if $property and $attribute {
#{$property}: map-get($settings, $attribute);
}
}
}
}

View File

View File

@ -0,0 +1,2 @@
@use './adaptive';
@use './fonts';

View File

@ -0,0 +1,5 @@
import classes from './styles.module.scss';
const Button = () => {};
export default Button;

View File

@ -0,0 +1 @@
export { default as Button} from './button.component';

View File

@ -0,0 +1 @@
export { default as Selector } from './selector.component';

View File

@ -0,0 +1,19 @@
import { FC } from 'react';
import classes from './styles.module.scss';
type SelectorProps = {
handleSetValue: () => void;
list: string[];
};
const Selector: FC<SelectorProps> = ({ handleSetValue, list }) => {
return (
<section className={classes.selector}>
{list.map((item) => (
<option>{item}</option>
))}
</section>
);
};
export default Selector;

View File

@ -0,0 +1,5 @@
const Footer = () => {
return <></>;
};
export default Footer;

View File

@ -0,0 +1 @@
export { default as Footer } from './footer.widget';

View File

View File

@ -0,0 +1 @@
export { default as Navbar } from './navbar.widget';

View File

@ -0,0 +1,5 @@
const Navbar = () => {
return <></>;
};
export default Navbar;

View File