-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
dda4572
commit 5290549
Showing
5 changed files
with
104 additions
and
63 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,50 @@ | ||
| import React, { ReactNode } from "react"; | ||
| import React, { Children } from "react"; | ||
| import clsx from "clsx"; | ||
|
|
||
| interface TabsProps { | ||
| children: ReactNode; | ||
| children?: React.ReactNode; | ||
| value: string | undefined; | ||
| onClick?: (value: string | undefined) => void; | ||
| } | ||
|
|
||
| export const Tabs = ({ children }: TabsProps) => { | ||
| return <div className="w-full min-h-[30px] flex flex-row gap-[40px]">{children}</div>; | ||
| interface TabProps extends TabsProps { | ||
| selectedTab?: string | undefined; | ||
| } | ||
|
|
||
| export const Tabs = ({ children, onClick, value }: TabsProps) => { | ||
| return ( | ||
| <div className="w-full min-h-[30px] flex flex-row gap-[40px] mx-[10px]"> | ||
| {Children.toArray(children).map((child, idx) => ( | ||
| <Tab | ||
| key={idx} | ||
| selectedTab={value} | ||
| value={(child as React.ReactElement<TabProps>).props.value} | ||
| onClick={onClick} | ||
| /> | ||
| ))} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| interface TabProps { | ||
| children: ReactNode; | ||
| value: string; | ||
| } | ||
| export const Tab = ({ value, selectedTab, onClick }: TabProps) => { | ||
| const handleClick = () => { | ||
| onClick && onClick(value); | ||
| }; | ||
| const boolean = value === selectedTab; | ||
|
|
||
| export const Tab = ({ children, value }: TabProps) => { | ||
| return ( | ||
| <> | ||
| <div className="h-full w-auto cursor-pointer text-textSecondary flex items-center">{children}</div> | ||
| <div onClick={handleClick} className="h-full w-auto cursor-pointer flex items-center"> | ||
| <p | ||
| className={clsx("mb-0", { | ||
| "text-textBlue": boolean, | ||
| "font-semibold": boolean, | ||
| "text-textSecondary": !boolean, | ||
| })} | ||
| > | ||
| {value} | ||
| </p> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,27 @@ | ||
| import React from "react"; | ||
| import { Tab, Tabs } from "components/Common/Tabs"; | ||
| import React, { useState } from "react"; | ||
| import Auto from "./Components/Auto"; | ||
| import Builder from "./Components/Builder"; | ||
|
|
||
|
|
||
| const SectionsContainer = () => { | ||
| const [selectedTab, setSelectedTab] = useState<string | undefined>("Builder"); | ||
|
|
||
| const handleTabClick = (value?: string | undefined) => { | ||
| setSelectedTab(value); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="w-full h-full flex flex-col gap-[10px]"> | ||
| <div className="min-h-[30px] mx-[15px] flex items-center"> | ||
| <Tabs value={selectedTab} onClick={handleTabClick}> | ||
| <Tab value="Builder">Builder</Tab> | ||
| <Tab value="Auto">Auto</Tab> | ||
| </Tabs> | ||
| <div className="w-full h-full flex flex-col gap-[10px]"> | ||
| {selectedTab === "Builder" && <Builder />} | ||
| {selectedTab === "Auto" && <Auto />} | ||
| </div> | ||
| {/* <Auto/> */} | ||
| <Builder/> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default SectionsContainer; | ||
| export default SectionsContainer; |
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 |
|---|---|---|
| @@ -1,20 +1,26 @@ | ||
| import Header from "common/Header/Header"; | ||
| import React from "react"; | ||
| import EditorPreviewContainer from "../../components/Editor/EditorPreviewContainer"; | ||
| import SectionsContainer from "../../components/Editor/SectionsContainer"; | ||
|
|
||
| const ReadmeBuilder = () => { | ||
| return ( | ||
| <div className="w-full h-[calc(100%_-_64px)]"> | ||
| <div className="max-w-full h-full p-[35px] flex flex-row gap-[30px]"> | ||
| <div className="max-w-[400px] w-full h-full"> | ||
| <SectionsContainer/> | ||
| <div className="w-full h-full flex flex-col"> | ||
| <div className="h-[80px] flex-Center"> | ||
| <Header /> | ||
| </div> | ||
| <div className="w-full h-[calc(100%_-_64px)]"> | ||
| <div className="max-w-full h-full p-[30px] pt-[20px] flex flex-row gap-[30px]"> | ||
| <div className="max-w-[400px] w-full h-full"> | ||
| <SectionsContainer /> | ||
| </div> | ||
| <div className="max-w-full w-full h-full flex flex-row gap-[30px]"> | ||
| <EditorPreviewContainer /> | ||
| </div> | ||
| </div> | ||
| <div className="max-w-full w-full h-full flex flex-row gap-[30px]"> | ||
| <EditorPreviewContainer/> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default ReadmeBuilder; | ||
| export default ReadmeBuilder; |