Merge pull request 'calendar' (#3) from calendar into master
Reviewed-by: filipizydorczyk <filip.izydorczyk@protonmail.com>
This commit is contained in:
commit
cf34f0d951
104
package-lock.json
generated
104
package-lock.json
generated
@ -1083,6 +1083,61 @@
|
|||||||
"resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
|
||||||
"integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
|
"integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
|
||||||
},
|
},
|
||||||
|
"@date-io/core": {
|
||||||
|
"version": "1.3.13",
|
||||||
|
"resolved": "https://registry.npmjs.org/@date-io/core/-/core-1.3.13.tgz",
|
||||||
|
"integrity": "sha512-AlEKV7TxjeK+jxWVKcCFrfYAk8spX9aCyiToFIiLPtfQbsjmRGLIhb5VZgptQcJdHtLXo7+m0DuurwFgUToQuA=="
|
||||||
|
},
|
||||||
|
"@date-io/moment": {
|
||||||
|
"version": "1.3.13",
|
||||||
|
"resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-1.3.13.tgz",
|
||||||
|
"integrity": "sha512-3kJYusJtQuOIxq6byZlzAHoW/18iExJer9qfRF5DyyzdAk074seTuJfdofjz4RFfTd/Idk8WylOQpWtERqvFuQ==",
|
||||||
|
"requires": {
|
||||||
|
"@date-io/core": "^1.3.13"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@devexpress/dx-core": {
|
||||||
|
"version": "2.6.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@devexpress/dx-core/-/dx-core-2.6.3.tgz",
|
||||||
|
"integrity": "sha512-MMOPm+UQdxliq0IidfsgOryYCJsFVRHtILZeMyHMs9I8IFbV8DuDwkhzNNr2/RjRZ3GVm4ZuxnWjbeOSUdft8A=="
|
||||||
|
},
|
||||||
|
"@devexpress/dx-react-core": {
|
||||||
|
"version": "2.6.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@devexpress/dx-react-core/-/dx-react-core-2.6.3.tgz",
|
||||||
|
"integrity": "sha512-lKmmhHCfOBfkEFaa/SOt7DjdMLvkHqgwIiWBXaZEqK6kJk4u0Y5+yWJLUo0O9RNszaKQzAoDMQUupi47fbCPWg==",
|
||||||
|
"requires": {
|
||||||
|
"@devexpress/dx-core": "2.6.3",
|
||||||
|
"prop-types": "^15.7.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@devexpress/dx-react-scheduler": {
|
||||||
|
"version": "2.6.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@devexpress/dx-react-scheduler/-/dx-react-scheduler-2.6.3.tgz",
|
||||||
|
"integrity": "sha512-trQMLbOlkTnmi0y0AYic369XzXu58IablHiUg5Ndp7XC8pz3eysERFFd9yziOUz0LnxcpPP204D9zUZQAPUfpA==",
|
||||||
|
"requires": {
|
||||||
|
"@devexpress/dx-scheduler-core": "2.6.3"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@devexpress/dx-react-scheduler-material-ui": {
|
||||||
|
"version": "2.6.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@devexpress/dx-react-scheduler-material-ui/-/dx-react-scheduler-material-ui-2.6.3.tgz",
|
||||||
|
"integrity": "sha512-UuORS7BSErFgjmVDfWTfrwDlDSTifBRM8Y6KiwDwn2ew25wHP8MKyCiPSY9A36H2s10iXX/D7tJokF//lA31AA==",
|
||||||
|
"requires": {
|
||||||
|
"@date-io/moment": "^1.3.11",
|
||||||
|
"@material-ui/pickers": "^3.2.10",
|
||||||
|
"clsx": "^1.0.4",
|
||||||
|
"prop-types": "^15.7.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@devexpress/dx-scheduler-core": {
|
||||||
|
"version": "2.6.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@devexpress/dx-scheduler-core/-/dx-scheduler-core-2.6.3.tgz",
|
||||||
|
"integrity": "sha512-yZp9vvzuLvkw+dUASp6WLxrqyvTqB9Nx+k56fnCYz8o18yMWBuYtGZvg34p3pdry930HEfLLRVrRXBWcQI8mzg==",
|
||||||
|
"requires": {
|
||||||
|
"moment": "^2.24.0",
|
||||||
|
"rrule": "^2.6.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
"@emotion/hash": {
|
"@emotion/hash": {
|
||||||
"version": "0.8.0",
|
"version": "0.8.0",
|
||||||
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
|
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
|
||||||
@ -1340,6 +1395,19 @@
|
|||||||
"@babel/runtime": "^7.4.4"
|
"@babel/runtime": "^7.4.4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"@material-ui/pickers": {
|
||||||
|
"version": "3.2.10",
|
||||||
|
"resolved": "https://registry.npmjs.org/@material-ui/pickers/-/pickers-3.2.10.tgz",
|
||||||
|
"integrity": "sha512-B8G6Obn5S3RCl7hwahkQj9sKUapwXWFjiaz/Bsw1fhYFdNMnDUolRiWQSoKPb1/oKe37Dtfszoywi1Ynbo3y8w==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.6.0",
|
||||||
|
"@date-io/core": "1.x",
|
||||||
|
"@types/styled-jsx": "^2.2.8",
|
||||||
|
"clsx": "^1.0.2",
|
||||||
|
"react-transition-group": "^4.0.0",
|
||||||
|
"rifm": "^0.7.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"@material-ui/styles": {
|
"@material-ui/styles": {
|
||||||
"version": "4.10.0",
|
"version": "4.10.0",
|
||||||
"resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.10.0.tgz",
|
"resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.10.0.tgz",
|
||||||
@ -1799,6 +1867,14 @@
|
|||||||
"resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
|
||||||
"integrity": "sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw=="
|
"integrity": "sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw=="
|
||||||
},
|
},
|
||||||
|
"@types/styled-jsx": {
|
||||||
|
"version": "2.2.8",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/styled-jsx/-/styled-jsx-2.2.8.tgz",
|
||||||
|
"integrity": "sha512-Yjye9VwMdYeXfS71ihueWRSxrruuXTwKCbzue4+5b2rjnQ//AtyM7myZ1BEhNhBQ/nL/RE7bdToUoLln2miKvg==",
|
||||||
|
"requires": {
|
||||||
|
"@types/react": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
"@types/testing-library__dom": {
|
"@types/testing-library__dom": {
|
||||||
"version": "6.14.0",
|
"version": "6.14.0",
|
||||||
"resolved": "https://registry.npmjs.org/@types/testing-library__dom/-/testing-library__dom-6.14.0.tgz",
|
"resolved": "https://registry.npmjs.org/@types/testing-library__dom/-/testing-library__dom-6.14.0.tgz",
|
||||||
@ -8282,6 +8358,12 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"luxon": {
|
||||||
|
"version": "1.24.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/luxon/-/luxon-1.24.1.tgz",
|
||||||
|
"integrity": "sha512-CgnIMKAWT0ghcuWFfCWBnWGOddM0zu6c4wZAWmD0NN7MZTnro0+833DF6tJep+xlxRPg4KtsYEHYLfTMBQKwYg==",
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
"make-dir": {
|
"make-dir": {
|
||||||
"version": "2.1.0",
|
"version": "2.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
|
||||||
@ -8772,6 +8854,11 @@
|
|||||||
"minimist": "^1.2.5"
|
"minimist": "^1.2.5"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"moment": {
|
||||||
|
"version": "2.26.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/moment/-/moment-2.26.0.tgz",
|
||||||
|
"integrity": "sha512-oIixUO+OamkUkwjhAVE18rAMfRJNsNe/Stid/gwHSOfHrOtw9EhAY2AHvdKZ/k/MggcYELFCJz/Sn2pL8b8JMw=="
|
||||||
|
},
|
||||||
"move-concurrently": {
|
"move-concurrently": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
|
||||||
@ -11831,6 +11918,14 @@
|
|||||||
"resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
|
||||||
"integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM="
|
"integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM="
|
||||||
},
|
},
|
||||||
|
"rifm": {
|
||||||
|
"version": "0.7.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/rifm/-/rifm-0.7.0.tgz",
|
||||||
|
"integrity": "sha512-DSOJTWHD67860I5ojetXdEQRIBvF6YcpNe53j0vn1vp9EUb9N80EiZTxgP+FkDKorWC8PZw052kTF4C1GOivCQ==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.3.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"rimraf": {
|
"rimraf": {
|
||||||
"version": "2.6.3",
|
"version": "2.6.3",
|
||||||
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
|
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
|
||||||
@ -11848,6 +11943,15 @@
|
|||||||
"inherits": "^2.0.1"
|
"inherits": "^2.0.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"rrule": {
|
||||||
|
"version": "2.6.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/rrule/-/rrule-2.6.4.tgz",
|
||||||
|
"integrity": "sha512-sLdnh4lmjUqq8liFiOUXD5kWp/FcnbDLPwq5YAc/RrN6120XOPb86Ae5zxF7ttBVq8O3LxjjORMEit1baluahA==",
|
||||||
|
"requires": {
|
||||||
|
"luxon": "^1.21.3",
|
||||||
|
"tslib": "^1.10.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"rsvp": {
|
"rsvp": {
|
||||||
"version": "4.8.5",
|
"version": "4.8.5",
|
||||||
"resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",
|
"resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",
|
||||||
|
@ -4,6 +4,9 @@
|
|||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"-": "0.0.1",
|
"-": "0.0.1",
|
||||||
|
"@devexpress/dx-react-core": "^2.6.3",
|
||||||
|
"@devexpress/dx-react-scheduler": "^2.6.3",
|
||||||
|
"@devexpress/dx-react-scheduler-material-ui": "^2.6.3",
|
||||||
"@material-ui/core": "^4.10.0",
|
"@material-ui/core": "^4.10.0",
|
||||||
"@material-ui/icons": "^4.9.1",
|
"@material-ui/icons": "^4.9.1",
|
||||||
"@testing-library/jest-dom": "^4.2.4",
|
"@testing-library/jest-dom": "^4.2.4",
|
||||||
|
12
src/App.scss
12
src/App.scss
@ -1,4 +1,14 @@
|
|||||||
body {
|
body {
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
}
|
}
|
||||||
|
.wraper{
|
||||||
|
display: flex;
|
||||||
|
&__rightbar{
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
&__calendar{
|
||||||
|
width: 85%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
18
src/App.tsx
18
src/App.tsx
@ -2,6 +2,9 @@ import React, { useState } from "react";
|
|||||||
import TopBar from "./components/TopBar/";
|
import TopBar from "./components/TopBar/";
|
||||||
import Transfer from "./components/Transfer/";
|
import Transfer from "./components/Transfer/";
|
||||||
import "./App.scss";
|
import "./App.scss";
|
||||||
|
import Schedule from "./components/Calendar/";
|
||||||
|
import { appointments } from "./components/Calendar/appointments";
|
||||||
|
import RightBar from "./components/RightBar";
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [isOpen, setOpen] = useState(false);
|
const [isOpen, setOpen] = useState(false);
|
||||||
@ -16,10 +19,10 @@ function App() {
|
|||||||
handleTransfer={(e) => {
|
handleTransfer={(e) => {
|
||||||
setOpen(!isOpen);
|
setOpen(!isOpen);
|
||||||
}}
|
}}
|
||||||
handleLanguage={(e)=>{
|
handleLanguage={(e) => {
|
||||||
alert("Language");
|
alert("Language");
|
||||||
}}
|
}}
|
||||||
handleProfile={(e)=>{
|
handleProfile={(e) => {
|
||||||
alert("Profile");
|
alert("Profile");
|
||||||
}}
|
}}
|
||||||
isOpen={isOpen}
|
isOpen={isOpen}
|
||||||
@ -30,7 +33,16 @@ function App() {
|
|||||||
setOpen(!isOpen);
|
setOpen(!isOpen);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<h1>{text}</h1>
|
<div className="wraper">
|
||||||
|
<div className="wraper__calendar">
|
||||||
|
<Schedule data={appointments} />
|
||||||
|
</div>
|
||||||
|
<div className="wraper__rightbar">
|
||||||
|
<RightBar />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1>{text}</h1>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
23
src/components/Calendar/appointments.ts
Normal file
23
src/components/Calendar/appointments.ts
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
export const appointments = [
|
||||||
|
{
|
||||||
|
title: 'Snmutna buzia',
|
||||||
|
startDate: new Date(2020, 5, 3, 9, 45),
|
||||||
|
endDate: new Date(2020, 5, 3, 11, 30),
|
||||||
|
id: 0,
|
||||||
|
location: 'Room 1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Twoja stara beszamel',
|
||||||
|
startDate: new Date(2020, 5, 1, 9, 45),
|
||||||
|
endDate: new Date(2020, 5, 1, 11, 30),
|
||||||
|
id: 0,
|
||||||
|
location: 'Room 1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Twoja stara beszamel',
|
||||||
|
startDate: new Date(2020, 5, 1, 9, 45),
|
||||||
|
endDate: new Date(2020, 5, 1, 11, 30),
|
||||||
|
id: 0,
|
||||||
|
location: 'Room 1',
|
||||||
|
},
|
||||||
|
];
|
0
src/components/Calendar/index.scss
Normal file
0
src/components/Calendar/index.scss
Normal file
128
src/components/Calendar/index.tsx
Normal file
128
src/components/Calendar/index.tsx
Normal file
@ -0,0 +1,128 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { ViewState } from "@devexpress/dx-react-scheduler";
|
||||||
|
import { AppointmentModel } from "@devexpress/dx-react-scheduler";
|
||||||
|
import {
|
||||||
|
Scheduler,
|
||||||
|
WeekView,
|
||||||
|
Appointments,
|
||||||
|
AppointmentTooltip,
|
||||||
|
} from "@devexpress/dx-react-scheduler-material-ui";
|
||||||
|
import moment from "moment";
|
||||||
|
import "moment/locale/pl";
|
||||||
|
import "./index.scss";
|
||||||
|
import { makeStyles, Theme, createStyles } from "@material-ui/core/styles";
|
||||||
|
|
||||||
|
|
||||||
|
interface CalendarProps {
|
||||||
|
data: Array<AppointmentModel>;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CalendarState {currentDate: Date;}
|
||||||
|
|
||||||
|
const formatDayScaleDate = (
|
||||||
|
date: moment.MomentInput,
|
||||||
|
options: { weekday: any }
|
||||||
|
) => {
|
||||||
|
const momentDate = moment(date).locale("pl");
|
||||||
|
const { weekday } = options;
|
||||||
|
return momentDate.format(weekday ? "dddd" : " ").toUpperCase();
|
||||||
|
};
|
||||||
|
|
||||||
|
const useStyles = makeStyles((theme: Theme) =>
|
||||||
|
createStyles({
|
||||||
|
dayScaleCell: {
|
||||||
|
paddingTop: 10,
|
||||||
|
paddingBottom: 10,
|
||||||
|
},
|
||||||
|
timeTableLayout: {
|
||||||
|
border: "1px solid rgba(224, 224, 224, 1);",
|
||||||
|
borderCollapse: "separate",
|
||||||
|
},
|
||||||
|
timeTableCell: {
|
||||||
|
//borderRadius: 15,
|
||||||
|
},
|
||||||
|
appointmentLayer: {
|
||||||
|
borderRadius: 15,
|
||||||
|
marginLeft: 5,
|
||||||
|
textAlign: "center",
|
||||||
|
},
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
//don't know how to set proper type of function arguments
|
||||||
|
const DayScaleCell = ({ formatDate, ...restProps }: any) => {
|
||||||
|
const classes = useStyles();
|
||||||
|
return (
|
||||||
|
<WeekView.DayScaleCell
|
||||||
|
{...restProps}
|
||||||
|
formatDate={formatDayScaleDate}
|
||||||
|
today={false}
|
||||||
|
className={classes.dayScaleCell}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const TimeTableCell = ({ ...restProps }: any) => {
|
||||||
|
const classes = useStyles();
|
||||||
|
return (
|
||||||
|
<WeekView.TimeTableCell {...restProps} className={classes.timeTableCell} />
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const TimeTableLayout = ({ ...restProps }: any) => {
|
||||||
|
const classes = useStyles();
|
||||||
|
return (
|
||||||
|
<WeekView.TimeTableLayout
|
||||||
|
{...restProps}
|
||||||
|
className={classes.timeTableLayout}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const Appointment = ({ ...restProps }: any) => {
|
||||||
|
const classes = useStyles();
|
||||||
|
return (
|
||||||
|
<Appointments.Appointment
|
||||||
|
{...restProps}
|
||||||
|
className={classes.appointmentLayer}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default class Calendar extends React.PureComponent<
|
||||||
|
CalendarProps,
|
||||||
|
CalendarState
|
||||||
|
> {
|
||||||
|
|
||||||
|
constructor(props: CalendarProps) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
currentDate: new Date("2020-06-01"),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { data } = this.props;
|
||||||
|
const { currentDate } = this.state;
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Scheduler data={data} locale={"PL-PL"} firstDayOfWeek={1}>
|
||||||
|
<ViewState defaultCurrentDate={currentDate} />
|
||||||
|
<WeekView
|
||||||
|
startDayHour={8}
|
||||||
|
endDayHour={20}
|
||||||
|
excludedDays={[0, 6]}
|
||||||
|
cellDuration={60}
|
||||||
|
dayScaleCellComponent={DayScaleCell}
|
||||||
|
timeTableLayoutComponent={TimeTableLayout}
|
||||||
|
timeTableCellComponent={TimeTableCell}
|
||||||
|
/>
|
||||||
|
<Appointments appointmentComponent={Appointment} />
|
||||||
|
<AppointmentTooltip />
|
||||||
|
</Scheduler>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
23
src/components/RightBar/index.scss
Normal file
23
src/components/RightBar/index.scss
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
.shop-cart {
|
||||||
|
padding-top: 10px;
|
||||||
|
padding-left: 15px;
|
||||||
|
padding-right: 15px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
font-family: Lato;
|
||||||
|
}
|
||||||
|
.paper {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 10px;
|
||||||
|
height: 60px;
|
||||||
|
width: 90%;
|
||||||
|
background-color: #d4a8ff !important;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
border-bottom: 1px solid;
|
||||||
|
}
|
||||||
|
|
33
src/components/RightBar/index.tsx
Normal file
33
src/components/RightBar/index.tsx
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
import React from "react";
|
||||||
|
import "./index.scss";
|
||||||
|
import Paper from "@material-ui/core/Paper";
|
||||||
|
interface RightBarProps {}
|
||||||
|
|
||||||
|
interface RightBarState {}
|
||||||
|
|
||||||
|
export default class RightBar extends React.Component<
|
||||||
|
RightBarProps,
|
||||||
|
RightBarState
|
||||||
|
> {
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="shop-cart">
|
||||||
|
<div className="text">
|
||||||
|
Hubert Wrzesiński<br></br>
|
||||||
|
Semestr zimowy 2020/2021
|
||||||
|
</div>
|
||||||
|
<Paper className="paper">1</Paper>
|
||||||
|
<Paper className="paper">2</Paper>
|
||||||
|
<Paper className="paper">3</Paper>
|
||||||
|
<Paper className="paper">4</Paper>
|
||||||
|
<Paper className="paper">5</Paper>
|
||||||
|
<Paper className="paper">6</Paper>
|
||||||
|
<Paper className="paper">7</Paper>
|
||||||
|
<Paper className="paper">8</Paper>
|
||||||
|
<Paper className="paper">9</Paper>
|
||||||
|
<Paper className="paper">10</Paper>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
27
src/teest.tsx
Normal file
27
src/teest.tsx
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { withStyles } from '@material-ui/core/styles';
|
||||||
|
import Button from '@material-ui/core/Button';
|
||||||
|
|
||||||
|
const styles = {
|
||||||
|
root: {
|
||||||
|
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
|
||||||
|
border: 0,
|
||||||
|
borderRadius: 3,
|
||||||
|
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
|
||||||
|
color: 'white',
|
||||||
|
height: 48,
|
||||||
|
padding: '0 30px',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
function HigherOrderComponent(props: { classes: any; }) {
|
||||||
|
const { classes } = props;
|
||||||
|
return <Button className={classes.root}>Higher-order component</Button>;
|
||||||
|
}
|
||||||
|
|
||||||
|
HigherOrderComponent.propTypes = {
|
||||||
|
classes: PropTypes.object.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default withStyles(styles)(HigherOrderComponent);
|
Loading…
Reference in New Issue
Block a user