Skip to content

Commit

Permalink
start repo
Browse files Browse the repository at this point in the history
  • Loading branch information
Jamshdbek committed Sep 15, 2023
0 parents commit 4ff768b
Show file tree
Hide file tree
Showing 31 changed files with 3,842 additions and 0 deletions.
18 changes: 18 additions & 0 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parser: '@typescript-eslint/parser',
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
24 changes: 24 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
27 changes: 27 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

- Configure the top-level `parserOptions` property like this:

```js
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: ['./tsconfig.json', './tsconfig.node.json'],
tsconfigRootDir: __dirname,
},
```

- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
13 changes: 13 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
49 changes: 49 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
{
"name": "hotel",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"@types/axios": "^0.14.0",
"@types/react-router-dom": "^5.3.3",
"axios": "^1.5.0",
"formik": "^2.4.4",
"lodash": "^4.17.21",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-grid-system": "^8.1.9",
"react-router-dom": "^6.16.0",
"styled-components": "^6.0.7",
"web-vitals": "^3.4.0"
},
"devDependencies": {
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"@vitejs/plugin-react-swc": "^3.3.2",
"eslint": "^8.45.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"typescript": "^5.0.2",
"vite": "^4.4.5"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
1 change: 1 addition & 0 deletions public/vite.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
42 changes: 42 additions & 0 deletions src/App.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
/* #root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
} */
51 changes: 51 additions & 0 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@

import './App.css'
import styled from 'styled-components';
import image from './assets/backround.png'
import Index from './routers';
function App() {
// const Button = styled.button`
// color: #000;
// font-size: 1em;
// margin: 1em;
// padding: 0.25em 1em;
// border: 2px solid #e7e7e7;
// border-radius: 3px;
// `;

// const Well = styled.div`
// width: 100%;
// height: 100vh;
// background-image:url(${(params: any) => params.image});
// background-size: cover;
// background-color: rgba(255,255,255,0.5);
// `

// const Header = styled.header`
// width: 100%;
// height: 10vh;
// display: flex;
// color:#fff;
// align-items: center;
// background-color: rgba(16, 16, 16, 0.4);
// padding: 0px 10vh 0px 10vh;
// justify-content: space-between;
// `
return (
// <Well image={image}>
// <Header>
// <h2>HOTEL</h2>
// <div style={{ display: 'flex', gap: "50px" }}>
// <Button>Register</Button>
// <Button>Login</Button>
// </div>
// </Header>
// <div>
// Hotel
// </div>
// </Well>
<Index/>
)
}

export default App
Binary file added src/assets/backround.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/assets/react.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
141 changes: 141 additions & 0 deletions src/components/Button.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
import styled, { css } from "styled-components";
const ButtonWrapper = styled.button`
border: none;
background-color: #0085ff;
outline: none;
text-decoration: none;
border-radius: 5px;
color: ${({ color }: any) => color || "#fff"};
padding: 8px 12px;
cursor: pointer;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 2px 1px rgba(0, 0, 0, 0.06),
0px 1px 1px rgba(0, 0, 0, 0.08);
font-size: ${({ fontSize }: any) => fontSize || "16px"};
min-width: ${({ width }: any) => width || "100px"};
.chevron {
margin-left: 15px;
}
margin: ${({ margin }: any) => margin || "0px"};
&[disabled] {
background-color: #8a8d9d;
}
z-index: 1;
${({ primary }: any) =>
primary &&
css`
background-color: #0085ff;
`};
${({ light_primary }: any) =>
light_primary &&
css`
background-color: #407dc7;
`};
${({ flower }: any) =>
flower &&
css`
background-color: #b2b8fb;
`};
${({ light_flower }: any) =>
light_flower &&
css`
background-color: #7391f8;
`};
${({ success }: any) =>
success &&
css`
background-color: #53ac92;
`};
${({ tangerine }: any) =>
tangerine &&
css`
background-color: #f79e1b;
`};
${({ info }: any) =>
info &&
css`
background-color: #9247b5;
`};
${({ danger }: any) =>
danger &&
css`
background-color: rgba(216, 0, 39, 1);
`};
${({ light_danger }: any) =>
light_danger &&
css`
background-color: #ec536a;
`};
${({ green }: any) =>
green &&
css`
background-color: #00c838;
`};
${({ gray, disabled }: any) =>
(gray || disabled) &&
css`
background: rgba(138, 141, 157, 1);
`};
${({ bordered }: any) =>
bordered &&
css`
border: solid 1px #0085ff;
color: #0085ff;
background-color: #ffffff;
`};
${({ medium }: any) =>
medium &&
css`
font-weight: 500;
`};
${({ outlined }: any) =>
outlined &&
css`
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.06);
border: 1px solid #e8e8e8;
background-color: transparent;
display: inline-flex;
color: #1c1c1c;
font-weight: 500;
`};
&:enabled:active {
opacity: 0.8;
}
&:enabled:focus {
opacity: 0.5;
}
`;



const Button = ({
outlined = false,
type = "button",
handleClick = () => { },

...props
}: any) => {
return (<ButtonWrapper
onClick={handleClick}
outlined={outlined}
type={type}
{...props}
/>)
}

export default Button
Loading

0 comments on commit 4ff768b

Please sign in to comment.