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 './App.css'; |
||||
import React, { useState } from "react"; |
||||
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 ( |
||||
<div className="App"> |
||||
<header className="App-header"> |
||||
<img src={logo} className="App-logo" alt="logo" /> |
||||
<p> |
||||
Edit <code>src/App.js</code> and save to reload. |
||||
</p> |
||||
<a |
||||
className="App-link" |
||||
href="https://reactjs.org" |
||||
target="_blank" |
||||
rel="noopener noreferrer" |
||||
> |
||||
Learn React |
||||
</a> |
||||
</header> |
||||
</div> |
||||
<> |
||||
<Router> |
||||
<Switch> |
||||
<Route path="/gajet-list"> |
||||
<GajetList gajets={gajets} setGajetId={setGajetId} gajetId={gajetId} /> |
||||
</Route> |
||||
<Route path="/gajet"> |
||||
<GajetPage gajetId={gajetId} /> |
||||
</Route> |
||||
</Switch> |
||||
</Router> |
||||
</> |
||||
); |
||||
} |
||||
}; |
||||
|
||||
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 ReactDOM from 'react-dom'; |
||||
import './index.css'; |
||||
import App from './App'; |
||||
import reportWebVitals from './reportWebVitals'; |
||||
import React from "react"; |
||||
import ReactDOM from "react-dom"; |
||||
import App from "./App"; |
||||
import 'bootstrap/dist/css/bootstrap.min.css'; |
||||
import './index.scss' |
||||
|
||||
ReactDOM.render( |
||||
<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(); |
||||
ReactDOM.render(<App />, document.getElementById("root")); |
||||
|
||||
@ -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'; |
||||