c119c44c13
When this is merged https://gitlab.com/ligolang/ligo-web-ide/ will be marked as deprecated. This MR does not hook up the webide build to the main CI. The CI integration will come in a subsequent MR for the sake of making review easier.
95 lines
2.0 KiB
TypeScript
95 lines
2.0 KiB
TypeScript
import React, { useState } from 'react';
|
|
import styled, { css } from 'styled-components';
|
|
|
|
import { ConfigureTabComponent } from './configure-tab';
|
|
import { OutputTabComponent } from './output-tab';
|
|
|
|
const Container = styled.div`
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
`;
|
|
|
|
const Header = styled.div`
|
|
display: flex;
|
|
border-bottom: 5px solid var(--blue_trans1);
|
|
min-height: 2.5em;
|
|
`;
|
|
|
|
const Label = styled.span`
|
|
cursor: pointer;
|
|
user-select: none;
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
&:hover {
|
|
color: var(--orange);
|
|
}
|
|
`;
|
|
|
|
const Tab = styled.div<{ selected?: boolean }>`
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
`;
|
|
|
|
const Underline = styled.div<{ selectedTab: number }>`
|
|
position: relative;
|
|
top: -5px;
|
|
background-color: var(--orange);
|
|
height: 5px;
|
|
margin-bottom: -5px;
|
|
width: calc(100% / 2);
|
|
transition: transform 0.2s ease-in;
|
|
|
|
${props =>
|
|
css`
|
|
transform: translateX(calc(${props.selectedTab} * 100%));
|
|
`}
|
|
`;
|
|
|
|
const Content = styled.div`
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
`;
|
|
|
|
export const TabsPanelComponent = () => {
|
|
const TABS = [
|
|
{ index: 0, label: 'Configure', id: 'configure-tab' },
|
|
{ index: 1, label: 'Output', id: 'output-tab' }
|
|
];
|
|
|
|
const [selectedTab, selectTab] = useState(TABS[0]);
|
|
|
|
return (
|
|
<Container>
|
|
<Header>
|
|
{TABS.map(tab => (
|
|
<Tab id={tab.id} selected={selectedTab.index === tab.index}>
|
|
<Label onClick={() => selectTab(tab)}>{tab.label}</Label>
|
|
</Tab>
|
|
))}
|
|
</Header>
|
|
<Underline selectedTab={selectedTab.index}></Underline>
|
|
<Content>
|
|
<ConfigureTabComponent
|
|
selected={selectedTab.index === 0}
|
|
onRun={() => {
|
|
selectTab(TABS[1]);
|
|
}}
|
|
></ConfigureTabComponent>
|
|
<OutputTabComponent
|
|
selected={selectedTab.index === 1}
|
|
onCancel={() => {
|
|
selectTab(TABS[0]);
|
|
}}
|
|
></OutputTabComponent>
|
|
</Content>
|
|
</Container>
|
|
);
|
|
};
|