UBC/Alley-HSBC-Frontend
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

breaking home up into components

Browse Source
This commit is contained in:
CodeServer 2022-03-03 02:04:16 +00:00
parent be20a12a56
commit 775c468548
6 changed files with 99 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/components/home/Home.tsx
View File

@ -1,89 +1,18 @@
import people from "./images/people.png"; import MeetingsPanel from "./MeetingsPanel";
import plus from "./images/plus.png"; import ShortCuts from "./ShortCuts";
import phoneCall from "./images/phone-call.png";
import circle from "./images/circle.png";
const Home: React.FC = () => { const Home: React.FC = () => {
return ( return (
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Digital Walk-Around</title>
</head>
<body>
<div className="container-fluid"> <div className="container-fluid">
<div className="row main-home"> <div className="row main-home">
<div className="col-8"> <div className="col-8">
<div className="meetings-panel"> <MeetingsPanel />
<div className="row current-time">
<label>10:34 AM</label>
</div>
<div className="row current-date">
<label>Sunday, 03 Feb 2022</label>
</div>
<div className="row meeting">
<div className="col-12">
<div className="row">
<label>Metting Name</label>
</div>
<div className="row">
<label>Metting time</label>
</div>
</div>
</div>
</div>
</div> </div>
<div className="col-4 short-cuts"> <div className="col-4 short-cuts">
<div className="row row-1"> <ShortCuts />
<div className="col-6">
<div className="row">
<a className="tile btn">
<img src={people} />
</a>
</div>
<div className="row">
<label>New Meeting</label>
</div>
</div>
<div className="col-6">
<div className="row">
<a className="tile btn">
<img src={plus} />
</a>
</div>
<div className="row">
<label>Join</label>
</div>
</div>
</div>
<div className="row row-2">
<div className="col-6">
<div className="row">
<a className="tile btn">
<img src={phoneCall} />
</a>
</div>
<div className="row">
<label>Call Favourites</label>
</div>
</div>
<div className="col-6">
<div className="row">
<a className="tile btn">
<img src={circle} />
</a>
</div>
<div className="row">
<label>Recordings</label>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</body>
</html>
); );
}; };

17
src/components/home/Meeting.tsx Normal file
View File

@ -0,0 +1,17 @@
const Meeting: React.FC = () => {
return (
<div className="row meeting">
<div className="col-12">
<div className="row">
<label>Metting Name</label>
</div>
<div className="row">
<label>Metting time</label>
</div>
</div>
</div>
);
};
export default Meeting;

18
src/components/home/MeetingsPanel.tsx Normal file
View File

@ -0,0 +1,18 @@
import Meeting from "./Meeting";
const MeetingsPanel: React.FC = () => {
return (
<div className="meetings-panel">
<div className="row current-time">
<label>10:34 AM</label>
</div>
<div className="row current-date">
<label>Sunday, 03 Feb 2022</label>
</div>
<Meeting />
</div>
);
};
export default MeetingsPanel;

57
src/components/home/ShortCuts.tsx Normal file
View File

@ -0,0 +1,57 @@
import people from "./images/people.png";
import plus from "./images/plus.png";
import phoneCall from "./images/phone-call.png";
import circle from "./images/circle.png";
const ShortCuts: React.FC = () => {
return (
<>
<div className="row row-1">
<div className="col-6">
<div className="row">
<a className="tile btn">
<img src={people} />
</a>
</div>
<div className="row">
<label>New Meeting</label>
</div>
</div>
<div className="col-6">
<div className="row">
<a className="tile btn">
<img src={plus} />
</a>
</div>
<div className="row">
<label>Join</label>
</div>
</div>
</div>
<div className="row row-2">
<div className="col-6">
<div className="row">
<a className="tile btn">
<img src={phoneCall} />
</a>
</div>
<div className="row">
<label>Call Favourites</label>
</div>
</div>
<div className="col-6">
<div className="row">
<a className="tile btn">
<img src={circle} />
</a>
</div>
<div className="row">
<label>Recordings</label>
</div>
</div>
</div>
</>
);
};
export default ShortCuts;

2
src/style/App.css
View File

@ -135,4 +135,4 @@ label {
margin-top: 15%; margin-top: 15%;
margin-left: 15%; margin-left: 15%;
} }
/*# sourceMappingURL=style.css.map */ /*# sourceMappingURL=App.css.map */

4
src/style/App.css.map
View File

@ -2,7 +2,7 @@
"version": 3, "version": 3,
"mappings": "AGAA,AAAA,MAAM,CAAC;EACH,KAAK,EAAE,gBAAgB;CAAG;;AAC9B,AAAA,MAAM,CAAC;EACH,KAAK,EAAE,iBAAiB;CAAG;;AAC/B,AAAA,MAAM,CAAC;EACH,KAAK,EAAE,cAAc;CAAG;;AAC5B,AAAA,MAAM,CAAC;EACH,KAAK,EAAE,iBAAiB;CAAG;;AAC/B,AAAA,MAAM,CAAC;EACH,KAAK,EAAE,iBAAiB;CAAG;;AAC/B,AAAA,MAAM,CAAC;EACH,KAAK,EAAE,cAAc;CAAG;;AAC5B,AAAA,MAAM,CAAC;EACH,KAAK,EAAE,iBAAiB;CAAG;;AAC/B,AAAA,MAAM,CAAC;EACH,KAAK,EAAE,iBAAiB;CAAG;;AAC/B,AAAA,MAAM,CAAC;EACH,KAAK,EAAE,cAAc;CAAG;;AAC5B,AAAA,OAAO,CAAC;EACJ,KAAK,EAAE,iBAAiB;CAAG;;AAC/B,AAAA,OAAO,CAAC;EACJ,KAAK,EAAE,iBAAiB;CAAG;;AAC/B,AAAA,OAAO,CAAC;EACJ,KAAK,EAAE,eAAe;CAAG;;CAE7B,AAAA,AAAA,KAAC,EAAO,MAAM,AAAb,EAAe;EACZ,IAAI,EAAE,QAAQ;CAAG;;AAErB,AAAA,IAAI,CAAC;EACD,UAAU,EAAE,UAAU;EACtB,OAAO,EAAE,IAAI;EACb,SAAS,EAAE,IAAI;CAEK;;AALxB,AAII,IAJA,CAIA,CAAC,CAAC;EACE,KAAK,EAAE,IAAI;CAAG;;AAEtB,AAAA,gBAAgB,CAAC;EACb,KAAK,EAAE,IAAI;EACX,YAAY,EAAE,IAAI;EAClB,WAAW,EAAE,IAAI;CAAG;;AAExB,AAAA,KAAK,CAAC;EACF,OAAO,EAAE,YAAY;CAAG;;AKzC5B,AACI,UADM,CACN,eAAe,CAAC;EACZ,OAAO,EAAE,KAAK;EACd,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,IAAI;EACjB,YAAY,EAAE,KAAK;EACnB,YAAY,EPNS,OAAO;EOO5B,YAAY,EAAE,GAAG;EACjB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,aAAa,EAAE,IAAI;EACnB,QAAQ,EAAE,MAAM;CAaS;;AAxBjC,AAYQ,UAZE,CACN,eAAe,CAWX,IAAI,CAAC;EACD,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,CAAC;CAAG;;AAdxB,AAeQ,UAfE,CACN,eAAe,CAcX,aAAa,CAAC;EACV,UAAU,EAAE,MAAM;EAClB,gBAAgB,EAAE,IAAI;CAAG;;AAjBrC,AAkBQ,UAlBE,CACN,eAAe,CAiBX,aAAa,CAAC;EACV,UAAU,EAAE,MAAM;EAClB,gBAAgB,EAAE,IAAI;CAAG;;AApBrC,AAqBQ,UArBE,CACN,eAAe,CAoBX,QAAQ,CAAC;EACL,gBAAgB,EPtBC,OAAO;EOuBxB,UAAU,EAAE,MAAM;EAClB,UAAU,EAAE,IAAI;CAAG;;AAxB/B,AA2BQ,UA3BE,CA0BN,WAAW,CACP,MAAM,CAAC;EACH,UAAU,EAAE,IAAI;CAAG;;AA5B/B,AA6BQ,UA7BE,CA0BN,WAAW,CAGP,MAAM,CAAC;EACH,UAAU,EAAE,GAAG;CAAG;;AA9B9B,AA+BQ,UA/BE,CA0BN,WAAW,CAKP,KAAK,CAAC;EACF,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,MAAM;CAAG;;AAjCjC,AAkCQ,UAlCE,CA0BN,WAAW,CAQP,KAAK,CAAC;EACF,gBAAgB,EPnCC,OAAO;EOoCxB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,aAAa,EAAE,KAAK;CAKK;;AA3CrC,AAuCY,UAvCF,CA0BN,WAAW,CAQP,KAAK,CAKD,GAAG,CAAC;EACA,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,GAAG;EACX,UAAU,EAAE,GAAG;EACf,WAAW,EAAE,GAAG;CAAG", "mappings": "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",
"sources": [ "sources": [
"style.sass", "App.sass",
"_variables.sass", "_variables.sass",
"base/_base-dir.sass", "base/_base-dir.sass",
"base/_base.sass", "base/_base.sass",
@ -13,5 +13,5 @@
"modules/_mainHome.sass" "modules/_mainHome.sass"
], ],
"names": [], "names": [],
"file": "style.css" "file": "App.css"
} }