diff --git a/src/App/index.scss b/src/App/index.scss index ae1529d..92145af 100644 --- a/src/App/index.scss +++ b/src/App/index.scss @@ -14,7 +14,7 @@ width: 100% } - margin-top: 30px; + margin-top: 20px; } .tabs { diff --git a/src/App/index.tsx b/src/App/index.tsx index a0cd528..d3052f9 100644 --- a/src/App/index.tsx +++ b/src/App/index.tsx @@ -7,15 +7,6 @@ import WYSIWYGEditor from 'src/WYSIWYGEditor'; import Header from 'src/Header'; import {restore} from '../utils'; -const App = () => { - return ( - <> -
- - - ); -}; - export type PlaygroundProperties = { content?: string; persistRestore?: boolean; @@ -42,7 +33,8 @@ const mode = { }, }; -function Playground(props: PlaygroundProperties) { + +const App = () => { const urlMode = restore('mode'); const [items, activeTab, handleSetInputAreaTabActive] = useTabs({ @@ -53,15 +45,20 @@ function Playground(props: PlaygroundProperties) { initial: mode[urlMode] ? urlMode : EditorType.SPLIT, }); + return ( + <> +
+ + {mode[activeTab].node} + + + ); +}; + +function Playground({children}) { return (
- -
{mode[activeTab].node}
+
{children}
); } diff --git a/src/Header/header.scss b/src/Header/header.scss index a4a0f51..61a8d53 100644 --- a/src/Header/header.scss +++ b/src/Header/header.scss @@ -8,14 +8,28 @@ width: 100%; box-shadow: inset 0 -1px 0 var(--g-color-line-generic); + + &__tab { + height: 100%; + + font-size: var(--g-text-body-2-font-size); + } + + &__tabs { + height: 100%; + } } .wrapper { display: flex; - justify-content: space-between; align-items: center; - + gap: 30px; + height: 100%; width: 1328px; + + > .g-tabs_direction_horizontal { + box-shadow: none; + } } .link { @@ -25,3 +39,7 @@ .text { font-size: var(--g-text-body-2-font-size); } + +.documentation { + margin-left: auto; +} \ No newline at end of file diff --git a/src/Header/index.tsx b/src/Header/index.tsx index 34c5a85..31e6102 100644 --- a/src/Header/index.tsx +++ b/src/Header/index.tsx @@ -1,16 +1,24 @@ import React from 'react'; -import {Link} from '@gravity-ui/uikit'; +import {Link, Tabs} from '@gravity-ui/uikit'; import './header.scss'; -function Header() { +function Header({activeTab, items, handleSetInputAreaTabActive}) { return (
- +

{prop}

} + wrapTo={(item, node) =>
{node}
} + /> + Документация
diff --git a/src/overrides.scss b/src/overrides.scss index 780e67e..ad1ba15 100644 --- a/src/overrides.scss +++ b/src/overrides.scss @@ -15,4 +15,10 @@ .pc-device-emulation-mobile__frame_device_mobile { height: 100%; } + + --g-tabs-item-height: 100%; + + .g-tabs__item-title { + font-size: var(--g-text-body-2-font-size); + } }