so i am working on this project,with a swipeable bottom sheet and three other rooms inside it A click on the start room will open up the swipeable bottom sheet ,while another click on the let's go will open up any of the other three rooms.So when i click on the bottom sheet button it opens up. but when i do so to get any of the three rooms open it doesn't work i will so much appreciate your help i have been on this project for months now and still yet can't get it done. below is the code thank you
import React, {useState} from 'react';
import Header from "../components/Header";
import DailyCard from "../components/DailyCard";
import styled from "styled-components";
import RoomInfoCard from "../components/RoomInfoCard";
import {AiOutlinePlus} from "react-icons/ai";
import { BsGrid3X2Gap } from 'react-icons/bs';
import BottomSheet from '../components/BottomSheet';
import RoomCard from "../Data/RoomCard.json"
import NewRoomData from "../Data/NewRoomData.json"
const Home = () => {
const [itemsVisible, setItemsVisible] = useState(true);
const [sheetVisible, setSheetVisible] = useState(false)
const [sheetCreateRoom, setSheetCreateRoom] = useState(false)
const [loaderVisibility, setLoaderVisibility] = useState(false)
const [cardId, setCardId] = useState(1);
return (
<>
{loaderVisibility ? (
<div style={{
<>
<Header/>
<Container>
<DailyCard/>
</Container>
<RoomInfoCard/>
<Action_Btn>
<button onClick={()=> setSheetVisible(true)} >
<AiOutlinePlus style = {{marginRight : "4px"}} />
Start a room
</button>
<button>
<BsGrid3X2Gap style ={{marginRight: "4px"}}/>
</button>
</Action_Btn>
<BottomSheet
sheetTitle = "start room"
setSheetVisible={(item)=> setSheetVisible(item)}
sheetVisible={sheetVisible}
cardDetail= {RoomCard.find((item)=> item.id === cardId)}
setItemsVisible = {(item)=> setItemsVisible(item)}
setSheetCreateRoom = {(item)=>{
setLoaderVisibility(true);
setTimeout(()=>{
setSheetCreateRoom(item)
setLoaderVisibility(false)
}, 1000);
}}
/>
<BottomSheet
sheetTitle = "new room"
setSheetVisible = {(item)=> setSheetCreateRoom(item)}
sheetVisible = {sheetCreateRoom}
cardDetail = {NewRoomData}
setItemsVisible = {(item)=> setItemsVisible(item)}
/>
import React,{useState} from 'react'
import styled from 'styled-components'
import {FcGlobe} from "react-icons/fc";
import './BtnStyle.css';
const StartRoom = (props) => {
const [room, setRoom] = useState("open")
return (
<>
<SwitchLine>
</SwitchLine>
<Container>
<TextRight>
<AddTopic>
<p> + Add a Topic </p>
</AddTopic>
</TextRight>
<SelectRoom>
<button className={room === "open" ? " activeBtn" : " "} onClick={(()=> setRoom("open"))}>
<FcGlobe/>
<p>open</p>
</button>
<button className={room === "social" ? "activeBtn" : " "} onClick={(()=> setRoom("social"))} >
<FcGlobe/>
<p>social</p>
</button>
<button className={room === "closed" ? " activeBtn" : " "} onClick={(()=> setRoom("closed"))}>
<FcGlobe/>
<p>Closed</p>
</button>
<span>
Start {" "}
{
room === "closed" ? " a room"
: room === "social" ? "with people i follow"
: "open to everyone"
}
</span>
<LetGoBtn>
<div onClick={()=> {
props.setSheetCreateRoom(true)
props.setSheetVisible(true)
}} >
<p> Let's go </p>
</div>
</LetGoBtn>
</SelectRoom>
</Container>
</>
)
}
import React, {useState} from 'react';
import styled from 'styled-components';
import { AiOutlineFile } from 'react-icons/ai';
import { BsFillMicMuteFill } from 'react-icons/bs';
const NewRoom = (props) => {
const [micMuteVisible, setMicMuteVisible]= useState(false)
const card = props.cardDetails
return (
<>
<RoomDetail>
<Header>
<div>
<a href="#" onClick={()=> props.setSheetVisible(false)} >
<img src="./images/arrow.png" alt="" />
</a>
<span>Hallway</span>
</div>
<div>
<AiOutlineFile />
<img src="./images/joel.png" alt="" />
</div>
</Header>
</RoomDetail>
</>
)
}
export default NewRoom
```[here is `enter code here`what i am talkig about][1]
import React from 'react';
import SwipeableBottomSheet from "react-swipeable-bottom-sheet";
import styled from "styled-components";
import StartRoom from './bottomSheets/StartRoom'
import NewRoom from "./bottomSheets/NewRoom";
export default function BottomSheet(props) {
return (
< >
<SwipeableBottomSheet open = { props.sheetVisible }
onChange = {
() => {
props.setSheetVisible(!props.sheetVisible)
props.setItemsVisible(true) }
}
fullScreen = { props.sheetTitle === 'room detail' ? true : false } >
<div style = {
{ backgroundColor: props.sheetTitle === "profile" ? "transparent" : " " } } >
{
props.sheetTitle === "new room " ? (
<NewRoom
cardDetail = {props.cardDetail}
setSheetVisible = { (item)=> {
props.setSheetVisible(item)
props.setItemsVisible(true)
}}
/>)
: props.sheetTitle === "start room" ? (
<StartRoom
setSheetCreateRoom = { props.setSheetCreateRoom }
setSheetVisible = { (item)=>
{
props.setSheetVisible(item);
props.setItemsVisible(true);
}
}
/>
) :(
" "
)
}
</div>
</SwipeableBottomSheet>
</>
)
}