forked from hexbear-collective/hexbear-frontend
8 changed files with 209 additions and 47 deletions
-
1package.json
-
97src/components/AutosizeTextArea.tsx
-
29src/components/Tabs.tsx
-
31src/components/user.tsx
-
6src/custom.css
-
54src/stories/Tabs.stories.tsx
-
2src/theme.tsx
-
36yarn.lock
@ -0,0 +1,29 @@ |
|||
import React from 'react'; |
|||
import { |
|||
Tabs, |
|||
TabList as ReachTabList, |
|||
Tab as ReachTab, |
|||
TabPanels as ReachTabPanels, |
|||
TabPanel as ReachTabPanel, |
|||
} from '@reach/tabs'; |
|||
import '@reach/tabs/styles.css'; |
|||
import Block from './elements/Block'; |
|||
import { Box } from 'theme-ui'; |
|||
import styled from 'styled-components'; |
|||
|
|||
export const TabList = props => ( |
|||
<Box as={ReachTabList} bg="background" {...props} /> |
|||
); |
|||
|
|||
export const Tab = props => ( |
|||
<Box |
|||
as={ReachTab} |
|||
css={{ height: '54px', fontSize: '14px', fontWeight: '600' }} |
|||
color="text" |
|||
{...props} |
|||
/> |
|||
); |
|||
|
|||
export const TabPanels = props => <Box as={ReachTabPanels} {...props} />; |
|||
|
|||
export const TabPanel = props => <Box as={ReachTabPanel} {...props} />; |
@ -0,0 +1,54 @@ |
|||
import React, { useState } from 'react'; |
|||
import { |
|||
Box, |
|||
Label, |
|||
Input, |
|||
Select, |
|||
Textarea, |
|||
Radio, |
|||
Flex, |
|||
Checkbox, |
|||
Slider, |
|||
Text, |
|||
} from 'theme-ui'; |
|||
import { ThemeSystemProvider } from '../components/ThemeSystemProvider'; |
|||
import { themes } from '../theme'; |
|||
import { Tabs } from '@reach/tabs'; |
|||
import { Tab, TabList, TabPanel, TabPanels } from '../components/Tabs'; |
|||
|
|||
export default { title: 'Tabs' }; |
|||
|
|||
export const Basic = () => { |
|||
return ( |
|||
<div> |
|||
{Object.keys(themes).map(theme => { |
|||
return ( |
|||
<ThemeSystemProvider key={theme} initialTheme={theme}> |
|||
<Tabs> |
|||
<TabList> |
|||
<Tab>Overview</Tab> |
|||
<Tab>Comments</Tab> |
|||
<Tab>Posts</Tab> |
|||
<Tab>Saved</Tab> |
|||
</TabList> |
|||
<TabPanels> |
|||
<TabPanel> |
|||
<Text>Overview</Text> |
|||
</TabPanel> |
|||
<TabPanel> |
|||
<Text>Comments</Text> |
|||
</TabPanel> |
|||
<TabPanel> |
|||
<Text>Posts</Text> |
|||
</TabPanel> |
|||
<TabPanel> |
|||
<Text>Saved</Text> |
|||
</TabPanel> |
|||
</TabPanels> |
|||
</Tabs> |
|||
</ThemeSystemProvider> |
|||
); |
|||
})} |
|||
</div> |
|||
); |
|||
}; |
@ -1746,6 +1746,14 @@ |
|||
"@reach/utils" "0.10.5" |
|||
tslib "^2.0.0" |
|||
|
|||
"@reach/[email protected]": |
|||
version "0.11.2" |
|||
resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.11.2.tgz#c66a905c5401d1ac3da8d26165b8d27d6e778fa6" |
|||
integrity sha512-YZ21b0Kb88wJ0t7QjSznWOYskARQMnmXY9Y2XZ5RyYcZ2krT4s3+ghghpfaPs6BKcrZDonZCrU65OFDJPa1jAw== |
|||
dependencies: |
|||
"@reach/utils" "0.11.2" |
|||
tslib "^2.0.0" |
|||
|
|||
"@reach/[email protected]^0.10.5": |
|||
version "0.10.5" |
|||
resolved "https://registry.yarnpkg.com/@reach/combobox/-/combobox-0.10.5.tgz#60e442ee7d1c63022cc3079e1aa4713aa1d398d4" |
|||
@ -1768,6 +1776,14 @@ |
|||
"@reach/utils" "0.10.5" |
|||
tslib "^2.0.0" |
|||
|
|||
"@reach/[email protected]": |
|||
version "0.11.2" |
|||
resolved "https://registry.yarnpkg.com/@reach/descendants/-/descendants-0.11.2.tgz#49ea1b5eb91aba8ae6dce57f6575c38aff1f9756" |
|||
integrity sha512-63Wdx32/RyjGRJc4UZKK7F1sIrb6jeGkDwvQH0hv0lRAhEjsiSQ1t2JTYDml3testFP48J0B2xS7JzNeY0zoQw== |
|||
dependencies: |
|||
"@reach/utils" "0.11.2" |
|||
tslib "^2.0.0" |
|||
|
|||
"@reach/[email protected]^0.10.5": |
|||
version "0.10.5" |
|||
resolved "https://registry.yarnpkg.com/@reach/menu-button/-/menu-button-0.10.5.tgz#b023044fa199bc256572830740049a50fea1d690" |
|||
@ -1824,6 +1840,17 @@ |
|||
prop-types "^15.6.1" |
|||
react-lifecycles-compat "^3.0.4" |
|||
|
|||
"@reach/[email protected]^0.11.2": |
|||
version "0.11.2" |
|||
resolved "https://registry.yarnpkg.com/@reach/tabs/-/tabs-0.11.2.tgz#75a73d069ff4832259a191e7e321818c9d09a2c8" |
|||
integrity sha512-iVDXfmdpJmBavyyiJbm9sUddlelra+x5MaF5Y4QwV7Q+w3t9RLqTePQAOX+2MX0BJgvasX/YItMBO2JumWxGPQ== |
|||
dependencies: |
|||
"@reach/auto-id" "0.11.2" |
|||
"@reach/descendants" "0.11.2" |
|||
"@reach/utils" "0.11.2" |
|||
prop-types "^15.7.2" |
|||
tslib "^2.0.0" |
|||
|
|||
"@reach/[email protected]": |
|||
version "0.10.5" |
|||
resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.10.5.tgz#fbac944d29565f6dd7abd0e1b13950e99b1e470b" |
|||
@ -1833,6 +1860,15 @@ |
|||
tslib "^2.0.0" |
|||
warning "^4.0.3" |
|||
|
|||
"@reach/[email protected]": |
|||
version "0.11.2" |
|||
resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.11.2.tgz#be1f03650db56fd67a16d3fc70e5262cdb139cec" |
|||
integrity sha512-fBTolYj+rKTROXmf0zHO0rCWSvw7J0ALmYj5QxW4DmITMOH5uyRuWDWOfqohIGFbOtF/sum50WTB3tvx76d+Aw== |
|||
dependencies: |
|||
"@types/warning" "^3.0.0" |
|||
tslib "^2.0.0" |
|||
warning "^4.0.3" |
|||
|
|||
"@rollup/[email protected]^14.0.0": |
|||
version "14.0.0" |
|||
resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-14.0.0.tgz#4285f9ec2db686a31129e5a2b415c94aa1f836f0" |
|||
|
Write
Preview
Loading…
Cancel
Save
Reference in new issue