-
Notifications
You must be signed in to change notification settings - Fork 38
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(web): support create beta project (#451)
Co-authored-by: nina992 <nouralali992@gmail.com> Co-authored-by: Hiroki Isogai <prog@d2deck.com>
- Loading branch information
1 parent
16d7ace
commit 7c89bfd
Showing
37 changed files
with
365 additions
and
158 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
Binary file added
BIN
+20.7 KB
web/src/classic/components/atoms/Icon/Icons/defaultBetaProjectImage.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
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
18 changes: 18 additions & 0 deletions
18
web/src/classic/components/molecules/Common/ProjectTypeSelectionModal/index.stories.tsx
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,18 @@ | ||
import { action } from "@storybook/addon-actions"; | ||
import { Meta, Story } from "@storybook/react"; | ||
|
||
import ProjectTypeSelectionModal, { Props } from "."; | ||
|
||
export default { | ||
title: "molecules/common/ProjectTypeSelectionModal", | ||
component: ProjectTypeSelectionModal, | ||
} as Meta; | ||
|
||
export const Default: Story<Props> = args => ( | ||
<ProjectTypeSelectionModal | ||
{...args} | ||
open | ||
onClose={action("onClose")} | ||
onSubmit={action("onSubmit")} | ||
/> | ||
); |
104 changes: 104 additions & 0 deletions
104
web/src/classic/components/molecules/Common/ProjectTypeSelectionModal/index.tsx
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,104 @@ | ||
import React, { useCallback } from "react"; | ||
|
||
import Icon from "@reearth/classic/components/atoms/Icon"; | ||
import Modal from "@reearth/classic/components/atoms/Modal"; | ||
import Text from "@reearth/classic/components/atoms/Text"; | ||
import { useT } from "@reearth/services/i18n"; | ||
import { styled, useTheme } from "@reearth/services/theme"; | ||
import { ProjectType } from "@reearth/types"; | ||
|
||
export interface Props { | ||
open?: boolean; | ||
onClose?: () => void; | ||
onSubmit?: (projectType: ProjectType) => void; | ||
} | ||
|
||
const ProjectTypeSelectionModal: React.FC<Props> = ({ open, onClose, onSubmit }) => { | ||
const t = useT(); | ||
const theme = useTheme(); | ||
const handleTypeSelect = useCallback( | ||
(projectType: ProjectType) => { | ||
onSubmit?.(projectType); | ||
onClose?.(); | ||
}, | ||
[onSubmit, onClose], | ||
); | ||
|
||
const handleCloseModal = useCallback(() => { | ||
onClose?.(); | ||
}, [onClose]); | ||
|
||
return ( | ||
<ModalWrapper isVisible={open} onClose={handleCloseModal}> | ||
<TitleText size="xl" color={theme.other.white} weight={"bold"}> | ||
{t("Choose Project Type")} | ||
</TitleText> | ||
<ProjectTypeContainer> | ||
<ProjectTypeItem onClick={() => handleTypeSelect("classic")}> | ||
<Icon icon="logo" size={101} /> | ||
<Text size="s" color={theme.other.white} weight={"bold"}> | ||
{t("classic")} | ||
</Text> | ||
<HintText size="xs" color={theme.main.weak} weight="normal"> | ||
{t("Create project with classic UI")} | ||
</HintText> | ||
</ProjectTypeItem> | ||
<ProjectTypeItem onClick={() => handleTypeSelect("beta")}> | ||
<Icon icon="logoColorful" size={101} /> | ||
<Text size="s" color={theme.other.white} weight={"bold"}> | ||
{t("Beta")} | ||
</Text> | ||
<HintText size="xs" color={theme.main.weak} weight="normal"> | ||
{t( | ||
"Create project with the latest features and UI system (projects might break without prior notice)", | ||
)} | ||
</HintText> | ||
</ProjectTypeItem> | ||
</ProjectTypeContainer> | ||
</ModalWrapper> | ||
); | ||
}; | ||
|
||
const ModalWrapper = styled(Modal)` | ||
padding: 20px 32px 36px; | ||
gap: 12px; | ||
width: 756px; | ||
height: 528px; | ||
`; | ||
|
||
const TitleText = styled(Text)` | ||
margin-top: 56px; | ||
text-align: center; | ||
`; | ||
const ProjectTypeContainer = styled.div` | ||
display: flex; | ||
flex-direction: row; | ||
justify-content: center; | ||
align-items: center; | ||
padding: 32px 56px 32px 36px; | ||
gap: 102px; | ||
height: 373px; | ||
`; | ||
|
||
const ProjectTypeItem = styled.div` | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: center; | ||
align-items: center; | ||
padding: 20px; | ||
gap: 12px; | ||
width: 194px; | ||
height: 194px; | ||
border: 1px dashed #4a4a4a; | ||
cursor: pointer; | ||
`; | ||
|
||
const HintText = styled(Text)` | ||
margin-top: 12px; | ||
width: 154px; | ||
height: 42px; | ||
line-height: 14px; | ||
text-align: center; | ||
`; | ||
|
||
export default ProjectTypeSelectionModal; |
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
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
Oops, something went wrong.