-
Notifications
You must be signed in to change notification settings - Fork 44
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(web): Re:Earth Beta routing and basic component structure (#444)
- Loading branch information
Showing
8 changed files
with
211 additions
and
32 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import { styled } from "@reearth/services/theme"; | ||
|
||
const LeftPanel: React.FC = () => { | ||
return <Wrapper>LeftPanel</Wrapper>; | ||
}; | ||
|
||
export default LeftPanel; | ||
|
||
const Wrapper = styled.div` | ||
background: #232226; | ||
width: 235px; | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
import { useEditorNavigation, Tab } from "@reearth/beta/hooks"; | ||
import { styled } from "@reearth/services/theme"; | ||
|
||
export type { Tab }; | ||
|
||
type Props = { | ||
sceneId?: string; | ||
currentTab?: Tab; | ||
}; | ||
|
||
const Navbar: React.FC<Props> = ({ sceneId, currentTab }) => { | ||
const handleEditorNavigation = useEditorNavigation({ sceneId }); | ||
|
||
return ( | ||
<Wrapper> | ||
<p>Navbar</p> | ||
<div> | ||
<p>current path: {location.pathname}</p> | ||
<p> current tab: {currentTab}</p> | ||
</div> | ||
<div> | ||
<button | ||
onClick={() => handleEditorNavigation("scene")} | ||
style={{ background: "white", marginRight: "3px" }}> | ||
Scene | ||
</button> | ||
<button | ||
onClick={() => handleEditorNavigation("story")} | ||
style={{ background: "white", marginRight: "3px" }}> | ||
Storytelling | ||
</button> | ||
<button | ||
onClick={() => handleEditorNavigation("widgets")} | ||
style={{ background: "white", marginRight: "3px" }}> | ||
Widgets | ||
</button> | ||
<button | ||
onClick={() => handleEditorNavigation("publish")} | ||
style={{ background: "white", marginRight: "3px" }}> | ||
Publish | ||
</button> | ||
</div> | ||
</Wrapper> | ||
); | ||
}; | ||
|
||
export default Navbar; | ||
|
||
const Wrapper = styled.div` | ||
display: flex; | ||
justify-content: space-between; | ||
height: 53px; | ||
background: #171618; | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import { styled } from "@reearth/services/theme"; | ||
|
||
const RightPanel: React.FC = () => { | ||
return <Wrapper>RightPanel</Wrapper>; | ||
}; | ||
|
||
export default RightPanel; | ||
|
||
const Wrapper = styled.div` | ||
background: #232226; | ||
width: 235px; | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import { styled } from "@reearth/services/theme"; | ||
|
||
const Visualizer: React.FC = () => { | ||
return <Wrapper>Visualizer</Wrapper>; | ||
}; | ||
|
||
export default Visualizer; | ||
|
||
const Wrapper = styled.div` | ||
background: #3f3d45; | ||
flex: 1; | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
export { useEditorNavigation } from "./navigationHooks"; | ||
export type { Tab } from "./navigationHooks"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import { useCallback } from "react"; | ||
import { useNavigate } from "react-router-dom"; | ||
|
||
export type Tab = "scene" | "story" | "widgets" | "publish"; | ||
|
||
export const useEditorNavigation = ({ sceneId }: { sceneId?: string }) => { | ||
const navigate = useNavigate(); | ||
|
||
return useCallback( | ||
(tab: Tab) => { | ||
navigate(tab !== "scene" ? `/scene/${sceneId}/${tab}` : ""); | ||
}, | ||
[sceneId, navigate], | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
import { useEffect, useState } from "react"; | ||
import { useLocation, useParams } from "react-router-dom"; | ||
|
||
import LeftPanel from "@reearth/beta/features/LeftPanel"; | ||
import Navbar, { Tab } from "@reearth/beta/features/Navbar"; | ||
import RightPanel from "@reearth/beta/features/RightPanel"; | ||
import Visualizer from "@reearth/beta/features/Visualizer"; | ||
import { styled } from "@reearth/services/theme"; | ||
|
||
type Props = {}; | ||
|
||
const tabs = ["scene", "story", "widgets", "publish"]; | ||
|
||
const Editor: React.FC<Props> = () => { | ||
const [currentTab, setTab] = useState<Tab | undefined>(); | ||
const location = useLocation(); | ||
const { sceneId } = useParams(); | ||
|
||
useEffect(() => { | ||
const splitPathname = location.pathname.split("/"); | ||
const tab = | ||
splitPathname[ | ||
splitPathname.length === 4 ? splitPathname.length - 1 : splitPathname.length - 2 | ||
]; | ||
|
||
if (!tabs.includes(tab)) { | ||
setTab("scene"); | ||
} else { | ||
setTab(tab as Tab); | ||
} | ||
}, [location.pathname]); | ||
|
||
return ( | ||
<Wrapper> | ||
<Navbar sceneId={sceneId} currentTab={currentTab} /> | ||
<MainSection> | ||
<LeftPanel /> | ||
<Visualizer /> | ||
<RightPanel /> | ||
</MainSection> | ||
</Wrapper> | ||
); | ||
}; | ||
|
||
export default Editor; | ||
|
||
const Wrapper = styled.div` | ||
display: flex; | ||
flex-direction: column; | ||
height: 100%; | ||
`; | ||
|
||
const MainSection = styled.div` | ||
display: flex; | ||
flex: 1; | ||
`; |