Showing
1 changed file
with
0 additions
and
115 deletions
front/src/Components/RoomList.js
deleted
100644 → 0
1 | -import React from "react"; | ||
2 | -import styled from "styled-components"; | ||
3 | -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; | ||
4 | -import { faArrowRight } from "@fortawesome/free-solid-svg-icons"; | ||
5 | -import { Link } from "react-router-dom"; | ||
6 | - | ||
7 | -const Wrapper = styled.div` | ||
8 | - display: flex; | ||
9 | - flex-direction: column; | ||
10 | - justify-content: center; | ||
11 | - align-items: center; | ||
12 | - background-color: #a5b1c2; | ||
13 | - border-radius: 10px; | ||
14 | - box-shadow: 1px 1px 10px #8395a7; | ||
15 | - min-width: 23.75rem; | ||
16 | - width: auto; | ||
17 | - max-height: none; | ||
18 | - padding: 0.5rem 0.7rem 0 1rem; | ||
19 | -`; | ||
20 | - | ||
21 | -const RoomContainer = styled.div` | ||
22 | - display: flex; | ||
23 | - flex-direction: column; | ||
24 | - width: 100%; | ||
25 | - overflow-y: scroll; | ||
26 | - min-height: 70px; | ||
27 | - justify-content: center; | ||
28 | - align-items: center; | ||
29 | - &::-webkit-scrollbar { | ||
30 | - width: 10px; | ||
31 | - } | ||
32 | - &::-webkit-scrollbar-track { | ||
33 | - background-color: transparent; | ||
34 | - } | ||
35 | - &::-webkit-scrollbar-thumb { | ||
36 | - border-radius: 3px; | ||
37 | - background-color: gray; | ||
38 | - } | ||
39 | - &::-webkit-scrollbar-button { | ||
40 | - width: 0; | ||
41 | - height: 0; | ||
42 | - } | ||
43 | -`; | ||
44 | - | ||
45 | -const RoomUL = styled.ul` | ||
46 | - width: 100%; | ||
47 | - display: flex; | ||
48 | - flex-direction: row; | ||
49 | - justify-content: space-between; | ||
50 | - svg { | ||
51 | - color: white; | ||
52 | - opacity: 0.7; | ||
53 | - } | ||
54 | -`; | ||
55 | - | ||
56 | -const RoomItem = styled.li` | ||
57 | - font-family: "Ubuntu", sans-serif; | ||
58 | -`; | ||
59 | - | ||
60 | -const CreateContainer = styled.div` | ||
61 | - padding-top: 1.9rem; | ||
62 | - padding-bottom: 1.7rem; | ||
63 | - box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.04); | ||
64 | -`; | ||
65 | - | ||
66 | -const StyledLink = styled(Link)` | ||
67 | - width: 100%; | ||
68 | - display: flex; | ||
69 | - flex-direction: row; | ||
70 | - justify-content: space-between; | ||
71 | - align-items: center; | ||
72 | - text-decoration: none; | ||
73 | - cursor: pointer; | ||
74 | - color: #079992; | ||
75 | - svg { | ||
76 | - color: #079992; | ||
77 | - &:hover { | ||
78 | - border-bottom: 1px solid #079992; | ||
79 | - } | ||
80 | - } | ||
81 | - li { | ||
82 | - color: black; | ||
83 | - &:hover { | ||
84 | - color: #079992; | ||
85 | - } | ||
86 | - } | ||
87 | - span { | ||
88 | - &:hover { | ||
89 | - border-bottom: 1px solid #079992; | ||
90 | - } | ||
91 | - } | ||
92 | -`; | ||
93 | - | ||
94 | -export default ({ roomArray }) => { | ||
95 | - return ( | ||
96 | - <Wrapper> | ||
97 | - <RoomContainer> | ||
98 | - <RoomUL> | ||
99 | - {roomArray && | ||
100 | - roomArray.map((e) => ( | ||
101 | - <StyledLink to={e.name} key={e.id}> | ||
102 | - <RoomItem>{e.name}</RoomItem> | ||
103 | - <FontAwesomeIcon icon={faArrowRight} /> | ||
104 | - </StyledLink> | ||
105 | - ))} | ||
106 | - </RoomUL> | ||
107 | - </RoomContainer> | ||
108 | - <CreateContainer> | ||
109 | - <StyledLink to="/"> | ||
110 | - <span>Create New Room</span> | ||
111 | - </StyledLink> | ||
112 | - </CreateContainer> | ||
113 | - </Wrapper> | ||
114 | - ); | ||
115 | -}; |
-
Please register or login to post a comment