sdy

remove RoomList component

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 -};