mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
739075662c
* Migrating Icon to typescript and deprecating JS component * gw suggestions (#18434) --------- Co-authored-by: Garrett Bear <gwhisten@gmail.com>
79 lines
1.7 KiB
JavaScript
79 lines
1.7 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated';
|
|
import TabBar from '.';
|
|
|
|
export default {
|
|
title: 'Components/App/TabBar',
|
|
|
|
argTypes: {
|
|
isActive: {
|
|
action: 'isActive',
|
|
},
|
|
tabs: {
|
|
control: 'array',
|
|
},
|
|
onSelect: {
|
|
action: 'onSelect',
|
|
},
|
|
},
|
|
args: {
|
|
tabs: [
|
|
{
|
|
icon: <Icon name={ICON_NAMES.SETTING} />,
|
|
content: 'General',
|
|
key: 'general',
|
|
},
|
|
{
|
|
icon: <Icon name={ICON_NAMES.BOOK} />,
|
|
content: 'Contacts',
|
|
key: 'contacts',
|
|
},
|
|
{
|
|
icon: <i className="fa fa-flask" />,
|
|
content: 'Snaps',
|
|
key: 'snaps',
|
|
},
|
|
{
|
|
icon: <i className="fa fa-lock" />,
|
|
content: 'SecurityAndPrivacy',
|
|
key: 'securityAndPrivacy',
|
|
},
|
|
{
|
|
icon: <Icon name={ICON_NAMES.NOTIFICATION} />,
|
|
content: 'Alerts',
|
|
key: 'alerts',
|
|
},
|
|
{
|
|
icon: <i className="fa fa-plug" />,
|
|
content: 'Networks',
|
|
key: 'networks',
|
|
},
|
|
{
|
|
icon: <i className="fa fa-flask" />,
|
|
content: 'Experimental',
|
|
key: 'experimental',
|
|
},
|
|
{
|
|
icon: <i className="fa fa-info-circle" />,
|
|
content: 'About',
|
|
key: 'about',
|
|
},
|
|
],
|
|
},
|
|
};
|
|
|
|
export const DefaultStory = (args) => {
|
|
const [currentTab, setCurrentTab] = useState('');
|
|
const handleOnSelect = (key) => setCurrentTab(key);
|
|
const handleIsActive = (key) => currentTab === key;
|
|
return (
|
|
<TabBar
|
|
tabs={args.tabs}
|
|
isActive={handleIsActive}
|
|
onSelect={handleOnSelect}
|
|
/>
|
|
);
|
|
};
|
|
|
|
DefaultStory.storyName = 'Default';
|