taha12322
3 years ago
|
Before Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 9.4 KiB |
@ -1,25 +0,0 @@ |
|||||||
{ |
|
||||||
"short_name": "React App", |
|
||||||
"name": "Create React App Sample", |
|
||||||
"icons": [ |
|
||||||
{ |
|
||||||
"src": "favicon.ico", |
|
||||||
"sizes": "64x64 32x32 24x24 16x16", |
|
||||||
"type": "image/x-icon" |
|
||||||
}, |
|
||||||
{ |
|
||||||
"src": "logo192.png", |
|
||||||
"type": "image/png", |
|
||||||
"sizes": "192x192" |
|
||||||
}, |
|
||||||
{ |
|
||||||
"src": "logo512.png", |
|
||||||
"type": "image/png", |
|
||||||
"sizes": "512x512" |
|
||||||
} |
|
||||||
], |
|
||||||
"start_url": ".", |
|
||||||
"display": "standalone", |
|
||||||
"theme_color": "#000000", |
|
||||||
"background_color": "#ffffff" |
|
||||||
} |
|
||||||
@ -1,3 +0,0 @@ |
|||||||
# https://www.robotstxt.org/robotstxt.html |
|
||||||
User-agent: * |
|
||||||
Disallow: |
|
||||||
@ -1,38 +0,0 @@ |
|||||||
.App { |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
.App-logo { |
|
||||||
height: 40vmin; |
|
||||||
pointer-events: none; |
|
||||||
} |
|
||||||
|
|
||||||
@media (prefers-reduced-motion: no-preference) { |
|
||||||
.App-logo { |
|
||||||
animation: App-logo-spin infinite 20s linear; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.App-header { |
|
||||||
background-color: #282c34; |
|
||||||
min-height: 100vh; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
font-size: calc(10px + 2vmin); |
|
||||||
color: white; |
|
||||||
} |
|
||||||
|
|
||||||
.App-link { |
|
||||||
color: #61dafb; |
|
||||||
} |
|
||||||
|
|
||||||
@keyframes App-logo-spin { |
|
||||||
from { |
|
||||||
transform: rotate(0deg); |
|
||||||
} |
|
||||||
to { |
|
||||||
transform: rotate(360deg); |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,25 +1,111 @@ |
|||||||
import logo from './logo.svg'; |
import React, { useState } from "react"; |
||||||
import './App.css'; |
import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; |
||||||
|
import GajetList from "./components/gajetlist/GajetList"; |
||||||
|
import GajetPage from "./components/gajetPage/GajetPage"; |
||||||
|
// image
|
||||||
|
import thermometer from "./assets/thermometer.svg"; |
||||||
|
import Height from "./assets/Height.svg"; |
||||||
|
import Scales from "./assets/Scales.svg"; |
||||||
|
import PulseOximeter from "./assets/PulseOximeter.svg"; |
||||||
|
import Spirometry from "./assets/Spirometry.svg"; |
||||||
|
import Abslang from "./assets/Abslang.svg"; |
||||||
|
import ECG from "./assets/ECG.svg"; |
||||||
|
import Stethoscope from "./assets/Stethoscope.svg"; |
||||||
|
import sonicaid from "./assets/sonicaid.svg"; |
||||||
|
import Dermatoscope from "./assets/Dermatoscope.svg"; |
||||||
|
import Otoscope from "./assets/Otoscope.svg"; |
||||||
|
import Ophthalmoscope from "./assets/Ophthalmoscope.svg"; |
||||||
|
|
||||||
function App() { |
const App = () => { |
||||||
|
const [gajets] = useState([ |
||||||
|
{ |
||||||
|
title: "ترمومتر", |
||||||
|
bgColor: "#A8E03D30", |
||||||
|
id: 1, |
||||||
|
icon: thermometer, |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "قدسنج", |
||||||
|
bgColor: "#FEAE2C30", |
||||||
|
id: 2, |
||||||
|
icon: Height, |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "ترازو", |
||||||
|
bgColor: "#8474F630", |
||||||
|
id: 3, |
||||||
|
icon: Scales, |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "پالس اکسیمتر", |
||||||
|
bgColor: "#F8767430", |
||||||
|
id: 4, |
||||||
|
icon: PulseOximeter, |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "اسپیرومتری", |
||||||
|
bgColor: "#CDA6FF30", |
||||||
|
id: 5, |
||||||
|
icon: Spirometry, |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "نگهدارنده آبسلانگ هوشمند", |
||||||
|
bgColor: "#08E3E430", |
||||||
|
id: 6, |
||||||
|
icon: Abslang, |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "نوار قلب", |
||||||
|
bgColor: "#9C9C9C30", |
||||||
|
id: 7, |
||||||
|
icon: ECG, |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "استتوسکوپ", |
||||||
|
bgColor: "#F11BE230", |
||||||
|
id: 8, |
||||||
|
icon: Stethoscope, |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "سونیکید", |
||||||
|
bgColor: "#76C4F530", |
||||||
|
id: 9, |
||||||
|
icon: sonicaid, |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "درماتوسکوپ", |
||||||
|
bgColor: "#A8E03D30", |
||||||
|
id: 10, |
||||||
|
icon: Dermatoscope, |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "اتوسکوپ", |
||||||
|
bgColor: "#FEAE2C30", |
||||||
|
id: 11, |
||||||
|
icon: Otoscope, |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "افتالموسکوپ", |
||||||
|
bgColor: "#8474F630", |
||||||
|
id: 12, |
||||||
|
icon: Ophthalmoscope, |
||||||
|
}, |
||||||
|
]); |
||||||
|
const [gajetId, setGajetId] = useState() |
||||||
return ( |
return ( |
||||||
<div className="App"> |
<> |
||||||
<header className="App-header"> |
<Router> |
||||||
<img src={logo} className="App-logo" alt="logo" /> |
<Switch> |
||||||
<p> |
<Route path="/gajet-list"> |
||||||
Edit <code>src/App.js</code> and save to reload. |
<GajetList gajets={gajets} setGajetId={setGajetId} gajetId={gajetId} /> |
||||||
</p> |
</Route> |
||||||
<a |
<Route path="/gajet"> |
||||||
className="App-link" |
<GajetPage gajetId={gajetId} /> |
||||||
href="https://reactjs.org" |
</Route> |
||||||
target="_blank" |
</Switch> |
||||||
rel="noopener noreferrer" |
</Router> |
||||||
> |
</> |
||||||
Learn React |
|
||||||
</a> |
|
||||||
</header> |
|
||||||
</div> |
|
||||||
); |
); |
||||||
} |
}; |
||||||
|
|
||||||
export default App; |
export default App; |
||||||
|
|||||||
@ -1,8 +0,0 @@ |
|||||||
import { render, screen } from '@testing-library/react'; |
|
||||||
import App from './App'; |
|
||||||
|
|
||||||
test('renders learn react link', () => { |
|
||||||
render(<App />); |
|
||||||
const linkElement = screen.getByText(/learn react/i); |
|
||||||
expect(linkElement).toBeInTheDocument(); |
|
||||||
}); |
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 992 B |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 745 B |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 982 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 986 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
@ -0,0 +1,20 @@ |
|||||||
|
import "./Gajet.scss"; |
||||||
|
import { Link } from "react-router-dom"; |
||||||
|
|
||||||
|
const Gajet = ({ item , setGajetId , gajetId}) => { |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<nav className="mainCard"> |
||||||
|
<Link to='/gajet' onClick={() => setGajetId(item.icon)}> |
||||||
|
<nav className="BgCard" style={{ backgroundColor: item.bgColor }}> |
||||||
|
<img src={item.icon} alt={item.title} /> |
||||||
|
</nav> |
||||||
|
</Link> |
||||||
|
<h4 className="title">{item.title}</h4> |
||||||
|
</nav> |
||||||
|
</> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Gajet; |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
.mainCard { |
||||||
|
text-align: center; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
margin: 5px; |
||||||
|
|
||||||
|
.BgCard { |
||||||
|
box-shadow: rgba(158, 158, 240, 0.3) 0px 10px 20px -5px, |
||||||
|
rgba(0, 0, 0, 0.1) 0px 5px 16px -8px; |
||||||
|
justify-content: center; |
||||||
|
border-radius: 10px; |
||||||
|
align-items: center; |
||||||
|
display: flex; |
||||||
|
width: 80px; |
||||||
|
height: 80px; |
||||||
|
margin-bottom: 1rem; |
||||||
|
} |
||||||
|
|
||||||
|
.title { |
||||||
|
width: 95px; |
||||||
|
font-size: 12px; |
||||||
|
font-weight: 400; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,39 @@ |
|||||||
|
import React from "react"; |
||||||
|
import { Tabs, Tab } from "react-bootstrap"; |
||||||
|
import "./GajetPage.scss"; |
||||||
|
import add from "../../assets/add.svg"; |
||||||
|
|
||||||
|
const GajetPage = ({ gajetId }) => { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<Tabs |
||||||
|
defaultActiveKey="home" |
||||||
|
id="noanim-tab-example" |
||||||
|
className="mb-3 Tabs" |
||||||
|
> |
||||||
|
<Tab eventKey="home" title="سنجش"> |
||||||
|
<div className="alignCircle"> |
||||||
|
<nav className="circleNav"> |
||||||
|
<img src={gajetId} /> |
||||||
|
</nav> |
||||||
|
</div> |
||||||
|
<nav className="discription"> |
||||||
|
<p >دماسنج را در مقابل پیشانی خود قرار دهید</p> |
||||||
|
|
||||||
|
<button type="button" className="btn btn-secondary mt-3"> |
||||||
|
<span className='ms-1'> |
||||||
|
<img src={add} /> |
||||||
|
</span> |
||||||
|
اتصال به دستگاه جدید |
||||||
|
</button> |
||||||
|
</nav> |
||||||
|
</Tab> |
||||||
|
<Tab eventKey="profile" title="تاریخچه"> |
||||||
|
<h3>تاریخچه</h3> |
||||||
|
</Tab> |
||||||
|
</Tabs> |
||||||
|
</> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default GajetPage; |
||||||
@ -0,0 +1,88 @@ |
|||||||
|
.alignCircle { |
||||||
|
margin-top: 4rem; |
||||||
|
margin-bottom: 4rem; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
|
||||||
|
.circleNav { |
||||||
|
background-color: #f6f6f6; |
||||||
|
width: 230px; |
||||||
|
height: 230px; |
||||||
|
border-radius: 10rem; |
||||||
|
border-top: #d9d9d9 solid 3px; |
||||||
|
border-bottom: #d9d9d9 solid 3px; |
||||||
|
transform: rotate(45deg); |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
img { |
||||||
|
transform: rotate(-45deg); |
||||||
|
width: 10rem; |
||||||
|
height: 10rem; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.circleNavActive { |
||||||
|
width: 230px; |
||||||
|
height: 230px; |
||||||
|
border-radius: 10rem; |
||||||
|
transform: rotate(45deg); |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
background-color: #06e5af20; |
||||||
|
border-top: #06e5af solid 3px; |
||||||
|
border-bottom: #06e5af solid 3px; |
||||||
|
img { |
||||||
|
transform: rotate(-45deg); |
||||||
|
width: 10rem; |
||||||
|
height: 10rem; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.circleNavWrong { |
||||||
|
width: 230px; |
||||||
|
height: 230px; |
||||||
|
border-radius: 10rem; |
||||||
|
transform: rotate(45deg); |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
background-color: #d8192110; |
||||||
|
border-top: #d81921 solid 3px; |
||||||
|
border-bottom: #d81921 solid 3px; |
||||||
|
img { |
||||||
|
transform: rotate(-45deg); |
||||||
|
width: 10rem; |
||||||
|
height: 10rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.Tabs { |
||||||
|
direction: rtl; |
||||||
|
background-color: #f6f6f6; |
||||||
|
color: #000 !important; |
||||||
|
|
||||||
|
.Tab { |
||||||
|
width: 50% !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.nav-link { |
||||||
|
width: 50%; |
||||||
|
} |
||||||
|
|
||||||
|
.discription { |
||||||
|
direction: rtl; |
||||||
|
text-align: center; |
||||||
|
|
||||||
|
button { |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
|
||||||
|
p { |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,17 @@ |
|||||||
|
import React from "react"; |
||||||
|
import Gajet from "../gajet/Gajet"; |
||||||
|
import "./Gajetlist.scss"; |
||||||
|
|
||||||
|
const GajetList = ({ gajets, setGajetId, gajetId }) => { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<div className="container mainCart"> |
||||||
|
{gajets.map((item) => ( |
||||||
|
<Gajet item={item} setGajetId={setGajetId} gajetId={gajetId} /> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default GajetList; |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
.mainCart{ |
||||||
|
margin-top: 5rem; |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
justify-content: center;} |
||||||
@ -1,13 +0,0 @@ |
|||||||
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; |
|
||||||
} |
|
||||||
@ -1,17 +1,7 @@ |
|||||||
import React from 'react'; |
import React from "react"; |
||||||
import ReactDOM from 'react-dom'; |
import ReactDOM from "react-dom"; |
||||||
import './index.css'; |
import App from "./App"; |
||||||
import App from './App'; |
import 'bootstrap/dist/css/bootstrap.min.css'; |
||||||
import reportWebVitals from './reportWebVitals'; |
import './index.scss' |
||||||
|
|
||||||
ReactDOM.render( |
ReactDOM.render(<App />, document.getElementById("root")); |
||||||
<React.StrictMode> |
|
||||||
<App /> |
|
||||||
</React.StrictMode>, |
|
||||||
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(); |
|
||||||
|
|||||||
@ -0,0 +1,4 @@ |
|||||||
|
body{ |
||||||
|
padding: 0; |
||||||
|
font-family: 'IranSans'; |
||||||
|
} |
||||||
|
Before Width: | Height: | Size: 2.6 KiB |
@ -1,13 +0,0 @@ |
|||||||
const reportWebVitals = onPerfEntry => { |
|
||||||
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; |
|
||||||
@ -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'; |
|
||||||