Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit ff87aee

Browse filesBrowse files
vadimkorrvadimkorr
committed
Use Tabs component
1 parent faf9e5a commit ff87aee
Copy full SHA for ff87aee

20 files changed

+179
-18
lines changed

‎.env

Copy file name to clipboard
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
SKIP_PREFLIGHT_CHECK=true

‎src/App.js

Copy file name to clipboardExpand all lines: src/App.js
+47-3Lines changed: 47 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,57 @@
11
import './App.scss'
22

3-
import TabHeaderItem from './TabHeaderItem'
3+
import LayoutCentered from './LayoutCentered'
4+
import Tabs from './Tabs'
5+
6+
const tabs = [
7+
{
8+
text: 'Profile',
9+
renderContent: () => (
10+
<LayoutCentered>
11+
<span>Profile Tab</span>
12+
</LayoutCentered>
13+
),
14+
},
15+
{
16+
text: 'Contact',
17+
renderContent: () => (
18+
<LayoutCentered>
19+
<span>Contact Tab</span>
20+
</LayoutCentered>
21+
),
22+
},
23+
{
24+
text: 'Settings',
25+
renderContent: () => (
26+
<LayoutCentered>
27+
<span>Settings Tab</span>
28+
</LayoutCentered>
29+
),
30+
},
31+
{
32+
text: 'Messages',
33+
renderContent: () => (
34+
<LayoutCentered>
35+
<span>Messages Tab</span>
36+
</LayoutCentered>
37+
),
38+
},
39+
{
40+
text: 'Bookmarks',
41+
renderContent: () => (
42+
<LayoutCentered>
43+
<span>Bookmarks Tab</span>
44+
</LayoutCentered>
45+
),
46+
},
47+
]
448

549
function App() {
650
return (
751
<div className="app__main-container">
8-
<div className="app__title-container">Title</div>
52+
<div className="app__title-container">Tabs Component</div>
953
<div className="app__content-container">
10-
<TabHeaderItem />
54+
<Tabs tabs={tabs} />
1155
</div>
1256
</div>
1357
)

‎src/App.scss

Copy file name to clipboardExpand all lines: src/App.scss
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,6 @@
2525
padding: 20px;
2626
box-sizing: border-box;
2727

28-
background-color: #b6c2e0;
28+
background-color: #efe9da;
2929
}
3030
}

‎src/LayoutCentered/LayoutCentered.jsx

Copy file name to clipboard
+7Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react'
2+
3+
import './LayoutCentered.scss'
4+
5+
export function LayoutCentered({ children }) {
6+
return <div className="layout-centered__container">{children}</div>
7+
}

‎src/LayoutCentered/LayoutCentered.scss

Copy file name to clipboard
+7Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.layout-centered__container {
2+
height: 100%;
3+
width: 100%;
4+
display: flex;
5+
align-items: center;
6+
justify-content: center;
7+
}

‎src/LayoutCentered/index.js

Copy file name to clipboard
+3Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { LayoutCentered } from './LayoutCentered'
2+
3+
export { LayoutCentered as default }

‎src/TabHeaderItem/TabHeaderItem.jsx renamed to ‎src/Tabs/TabHeaderItem/TabHeaderItem.jsx

Copy file name to clipboard
File renamed without changes.

‎src/TabHeaderItem/TabHeaderItem.scss renamed to ‎src/Tabs/TabHeaderItem/TabHeaderItem.scss

Copy file name to clipboardExpand all lines: src/Tabs/TabHeaderItem/TabHeaderItem.scss
+4-10Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,4 @@
1-
$background-color-active: #42c987;
2-
$background-color: #8bd8bd;
3-
$border-radius: 10;
4-
5-
@function px($value) {
6-
@return #{$value}px;
7-
}
1+
@import '../../base.scss';
82

93
@mixin corner {
104
width: px($border-radius);
@@ -24,7 +18,7 @@ $border-radius: 10;
2418
height: px(2 * $border-radius);
2519
width: px($border-radius);
2620
border-top-left-radius: px($border-radius);
27-
box-shadow: 0 px(-$border-radius) 0 0 $background-color-active;
21+
box-shadow: 0 px(-$border-radius) 0 0 $tab-bg-color-active;
2822
}
2923
}
3024

@@ -55,7 +49,7 @@ $border-radius: 10;
5549
align-items: center;
5650
justify-content: center;
5751

58-
background-color: $background-color;
52+
background-color: $tab-bg-color;
5953
border-top-left-radius: px($border-radius);
6054
border-top-right-radius: px($border-radius);
6155

@@ -64,7 +58,7 @@ $border-radius: 10;
6458
}
6559

6660
&--active {
67-
background-color: $background-color-active;
61+
background-color: $tab-bg-color-active;
6862
}
6963
}
7064
.tab-header-item__right-corner {

‎src/TabHeaderItem/TabHeaderItem.stories.jsx renamed to ‎src/Tabs/TabHeaderItem/TabHeaderItem.stories.jsx

Copy file name to clipboard
File renamed without changes.

‎src/TabHeaderItem/index.js renamed to ‎src/Tabs/TabHeaderItem/index.js

Copy file name to clipboard
File renamed without changes.

‎src/Tabs/Tabs/Tabs.jsx

Copy file name to clipboard
+28Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React, { useState } from 'react'
2+
3+
import TabsHeader from '../TabsHeader'
4+
5+
import './Tabs.scss'
6+
7+
export function Tabs({ tabs }) {
8+
const [activeIndex, setActiveIndex] = useState(0)
9+
10+
function handleTabClick(index) {
11+
setActiveIndex(index)
12+
}
13+
14+
return (
15+
<div className="tabs__container">
16+
<div className="tabs__header-container">
17+
<TabsHeader
18+
activeIndex={activeIndex}
19+
tabs={tabs}
20+
onTabClick={handleTabClick}
21+
/>
22+
</div>
23+
<div className="tabs__content-container">
24+
{tabs[activeIndex].renderContent()}
25+
</div>
26+
</div>
27+
)
28+
}

‎src/Tabs/Tabs/Tabs.scss

Copy file name to clipboard
+26Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
@import '../../base.scss';
2+
3+
.tabs__container {
4+
height: 100%;
5+
width: 100%;
6+
padding: 10px;
7+
box-sizing: border-box;
8+
border-radius: px($border-radius);
9+
background-color: $tabs-container-bg-color;
10+
display: flex;
11+
flex-direction: column;
12+
13+
.tabs__header-container {
14+
}
15+
16+
.tabs__content-container {
17+
flex: 1;
18+
width: 100%;
19+
padding: 10px;
20+
box-sizing: border-box;
21+
22+
background-color: $tab-bg-color-active;
23+
border-bottom-left-radius: px($border-radius);
24+
border-bottom-right-radius: px($border-radius);
25+
}
26+
}

‎src/Tabs/Tabs/Tabs.stories.jsx

Copy file name to clipboard
+33Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from 'react'
2+
3+
import { Tabs } from './Tabs'
4+
5+
export default {
6+
title: 'Tabs',
7+
component: Tabs,
8+
argTypes: {
9+
tabs: { control: 'object' },
10+
activeIndex: { control: 'number' },
11+
},
12+
}
13+
14+
const Template = (args) => <Tabs {...args} />
15+
16+
export const Base = Template.bind({})
17+
Base.args = {
18+
tabs: [
19+
{
20+
text: 'Profile',
21+
renderContent: () => <div>Profile Tab</div>,
22+
},
23+
{
24+
text: 'Contact',
25+
renderContent: () => <div>Contact Tab</div>,
26+
},
27+
{
28+
text: 'Settings',
29+
renderContent: () => <div>Settings Tab</div>,
30+
},
31+
],
32+
activeIndex: 0,
33+
}

‎src/Tabs/Tabs/index.js

Copy file name to clipboard
+3Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { Tabs } from './Tabs.jsx'
2+
3+
export { Tabs as default }

‎src/TabsHeader/TabsHeader.jsx renamed to ‎src/Tabs/TabsHeader/TabsHeader.jsx

Copy file name to clipboardExpand all lines: src/Tabs/TabsHeader/TabsHeader.jsx
+6-4Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,18 @@ import TabHeaderItem from '../TabHeaderItem'
44

55
import './TabsHeader.scss'
66

7-
export function TabsHeader({ tabs, activeIndex }) {
8-
function handleClick() {}
7+
export function TabsHeader({ tabs, activeIndex, onTabClick }) {
8+
function handleClick(index) {
9+
onTabClick(index)
10+
}
911

1012
return (
11-
<div className="tabs-header__container" onClick={handleClick}>
13+
<div className="tabs-header__container">
1214
{tabs.map((tab, index) => (
1315
<div className="tabs-header__header-item-container" key={index}>
1416
<TabHeaderItem
1517
text={tab.text}
16-
onClick={tab.onClick}
18+
onClick={() => handleClick(index)}
1719
active={index === activeIndex}
1820
/>
1921
</div>

‎src/TabsHeader/TabsHeader.scss renamed to ‎src/Tabs/TabsHeader/TabsHeader.scss

Copy file name to clipboard
File renamed without changes.

‎src/TabsHeader/TabsHeader.stories.jsx renamed to ‎src/Tabs/TabsHeader/TabsHeader.stories.jsx

Copy file name to clipboardExpand all lines: src/Tabs/TabsHeader/TabsHeader.stories.jsx
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export default {
88
argTypes: {
99
tabs: { control: 'object' },
1010
activeIndex: { control: 'number' },
11+
onTabClick: { action: 'clicked' },
1112
},
1213
}
1314

‎src/TabsHeader/index.js renamed to ‎src/Tabs/TabsHeader/index.js

Copy file name to clipboard
File renamed without changes.

‎src/Tabs/index.js

Copy file name to clipboard
+3Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import Tabs from './Tabs'
2+
3+
export { Tabs as default }

‎src/base.scss

Copy file name to clipboard
+9Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
$tabs-container-bg-color: #9c6453;
2+
3+
$tab-bg-color-active: #42c987;
4+
$tab-bg-color: #8bd8bd;
5+
$border-radius: 10;
6+
7+
@function px($value) {
8+
@return #{$value}px;
9+
}

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.