From 3e5dadc3ba7988179311e5eeddabd25cedca2e37 Mon Sep 17 00:00:00 2001 From: Jordan Trouw Date: Tue, 7 Nov 2023 16:43:36 -0800 Subject: [PATCH] updated layout and added extra information for users --- docs/getting-started/_category_.json | 2 +- docs/getting-started/components/index.ts | 1 + .../components/installation/cli-tabs.tsx | 171 ++++++++++++++++++ .../components/installation/index.ts | 1 + .../components/installation/install-xyo.tsx | 82 +++++++++ .../{exercises.md => exercises-ext.md} | 4 +- .../{intro.md => get-to-know.md} | 21 ++- docs/getting-started/learn.md | 30 --- .../{add-xyo.md => quickstart.mdx} | 31 +--- docs/getting-started/sample-dapps.md | 17 -- docs/getting-started/use-dapps.md | 41 ----- docs/glossary.md | 8 +- docs/index.md | 10 +- src/components/CodeBlocks/CodeTabWithCopy.tsx | 150 +++++++++++++++ src/components/CodeBlocks/cli-code.tsx | 150 +++++++++++++++ src/components/Demo/brandingTheme.ts | 1 - 16 files changed, 586 insertions(+), 134 deletions(-) create mode 100644 docs/getting-started/components/index.ts create mode 100644 docs/getting-started/components/installation/cli-tabs.tsx create mode 100644 docs/getting-started/components/installation/index.ts create mode 100644 docs/getting-started/components/installation/install-xyo.tsx rename docs/getting-started/{exercises.md => exercises-ext.md} (98%) rename docs/getting-started/{intro.md => get-to-know.md} (66%) delete mode 100644 docs/getting-started/learn.md rename docs/getting-started/{add-xyo.md => quickstart.mdx} (54%) delete mode 100644 docs/getting-started/sample-dapps.md delete mode 100644 docs/getting-started/use-dapps.md create mode 100644 src/components/CodeBlocks/CodeTabWithCopy.tsx create mode 100644 src/components/CodeBlocks/cli-code.tsx diff --git a/docs/getting-started/_category_.json b/docs/getting-started/_category_.json index 9ecfaab..063bbcf 100644 --- a/docs/getting-started/_category_.json +++ b/docs/getting-started/_category_.json @@ -4,6 +4,6 @@ "description": "Getting Started Guides", "type": "generated-index" }, - "position": 2 + "position": 3 } diff --git a/docs/getting-started/components/index.ts b/docs/getting-started/components/index.ts new file mode 100644 index 0000000..2e9b403 --- /dev/null +++ b/docs/getting-started/components/index.ts @@ -0,0 +1 @@ +export {InstallXyoOptions} from './installation' \ No newline at end of file diff --git a/docs/getting-started/components/installation/cli-tabs.tsx b/docs/getting-started/components/installation/cli-tabs.tsx new file mode 100644 index 0000000..468f7a0 --- /dev/null +++ b/docs/getting-started/components/installation/cli-tabs.tsx @@ -0,0 +1,171 @@ +import { Paper, alpha, styled, useTheme } from '@mui/material' +import Box, { BoxProps } from '@mui/material/Box' +import Tab from '@mui/material/Tab' +import Tabs from '@mui/material/Tabs' +import Typography from '@mui/material/Typography' +import * as React from 'react' + + +interface SingleCliTabProps { + tabTitle: string + tabContent: string +} + +interface CliTabsProps extends BoxProps { + tabs: SingleCliTabProps[] +} + +interface TabPanelProps { + children?: React.ReactNode + index: number + value: number +} + + +function TabPanel(props: TabPanelProps) { + const { children, value, index, ...other } = props + + return ( + + ) +} + + +const AntTabs = styled(Tabs)({ + borderBottom: '1px solid #e8e8e8', + '& .MuiTabs-indicator': { + backgroundColor: '#1890ff', + }, +}); + +const AntTab = styled((props: StyledTabProps) => )( + ({ theme }) => ({ + textTransform: 'none', + minWidth: 0, + [theme.breakpoints.up('sm')]: { + minWidth: 0, + }, + fontWeight: theme.typography.fontWeightRegular, + marginRight: theme.spacing(1), + color: 'rgba(0, 0, 0, 0.85)', + fontFamily: [ + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + 'Roboto', + '"Helvetica Neue"', + 'Arial', + 'sans-serif', + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', + ].join(','), + '&:hover': { + color: '#40a9ff', + opacity: 1, + }, + '&.Mui-selected': { + color: '#1890ff', + fontWeight: theme.typography.fontWeightMedium, + }, + '&.Mui-focusVisible': { + backgroundColor: '#d1eaff', + }, + }), +); + +interface StyledTabsProps { + children?: React.ReactNode; + value: number; + onChange: (event: React.SyntheticEvent, newValue: number) => void; +} + +const StyledTabs = styled((props: StyledTabsProps) => ( + }} + /> +))({ + '& .MuiTabs-indicator': { + display: 'flex', + justifyContent: 'center', + backgroundColor: 'transparent', + }, + '& .MuiTabs-indicatorSpan': { + maxWidth: 40, + width: '100%', + backgroundColor: '#635ee7', + }, +}); + +interface StyledTabProps { + label: string; +} + +const StyledTab = styled((props: StyledTabProps) => ( + +))(({ theme }) => ({ + textTransform: 'none', + fontWeight: theme.typography.fontWeightBold, + fontSize: theme.typography.pxToRem(15), + marginRight: theme.spacing(1), + color: 'rgba(255, 255, 255, 0.7)', + '&.Mui-selected': { + color: '#fff', + }, + '&.Mui-focusVisible': { + backgroundColor: 'rgba(100, 95, 228, 0.32)', + }, +})); + + + +function a11yProps(index: number) { + return { + id: `simple-tab-${index}`, + 'aria-controls': `simple-tabpanel-${index}`, + } +} +export const CliTabs: React.FC = ({tabs, ...props}) => { + const [value, setValue] = React.useState(0) +const theme = useTheme() + const handleChange = (event: React.SyntheticEvent, newValue: number) => { + setValue(newValue) + } + + return ( + + + + + {tabs.map((item, index) => { + return ( + + ) + })} + + + {tabs.map((item, index) => { + return ( + + + {item.tabContent} + + ) + })} + + + ) +} diff --git a/docs/getting-started/components/installation/index.ts b/docs/getting-started/components/installation/index.ts new file mode 100644 index 0000000..5dd4922 --- /dev/null +++ b/docs/getting-started/components/installation/index.ts @@ -0,0 +1 @@ +export * from './install-xyo' \ No newline at end of file diff --git a/docs/getting-started/components/installation/install-xyo.tsx b/docs/getting-started/components/installation/install-xyo.tsx new file mode 100644 index 0000000..6c0c0ea --- /dev/null +++ b/docs/getting-started/components/installation/install-xyo.tsx @@ -0,0 +1,82 @@ +import * as React from 'react' +import Tabs from '@mui/material/Tabs' +import Tab from '@mui/material/Tab' +import Typography from '@mui/material/Typography' +import Box from '@mui/material/Box' +import { CliTabs } from './cli-tabs' +import { Link } from '@mui/material' + +interface TabPanelProps { + children?: React.ReactNode + index: number + value: number +} + +function TabPanel(props: TabPanelProps) { + const { children, value, index, ...other } = props + + return ( + + ) +} + +function a11yProps(index: number) { + return { + id: `simple-tab-${index}`, + 'aria-controls': `simple-tabpanel-${index}`, + } +} +export const InstallXyoOptions: React.FC = (props) => { + const [value, setValue] = React.useState(0) + + const handleChange = (event: React.SyntheticEvent, newValue: number) => { + setValue(newValue) + } + + return ( + + + + + + + + + + + + + + + + + You can find the instructions for the XYO Android SDK{' '} + + here + . + + + + You can find the instructions for the XYO Android SDK{' '} + + here + . + + + + ) +} \ No newline at end of file diff --git a/docs/getting-started/exercises.md b/docs/getting-started/exercises-ext.md similarity index 98% rename from docs/getting-started/exercises.md rename to docs/getting-started/exercises-ext.md index 7f452e5..5f76114 100644 --- a/docs/getting-started/exercises.md +++ b/docs/getting-started/exercises-ext.md @@ -1,8 +1,8 @@ --- -sidebar_position: 2 +sidebar_position: 3 --- -# Exercises +# Exercises (Extended) Now that you've learned a little more about the components of the XYO Network and how it fits together in the XYO Platform, it's time for some demos! These demos will expand your understanding of the XYO Platform, and introduce you to some new concepts. diff --git a/docs/getting-started/intro.md b/docs/getting-started/get-to-know.md similarity index 66% rename from docs/getting-started/intro.md rename to docs/getting-started/get-to-know.md index 94a7407..1f74a49 100644 --- a/docs/getting-started/intro.md +++ b/docs/getting-started/get-to-know.md @@ -1,9 +1,9 @@ --- -sidebar_position: 1 +sidebar_position: 2 --- -# Intro -Taking your first steps with XYO? Try out the following demo and read more about what XYO can do. +# Get to Know XYO +The following examples offer a preview at just how easy XYO can be. Explore a Node, learn some of the basic XYO vocabulary, and review some resources that can take you where you need to be. ## Your first node @@ -22,19 +22,24 @@ className="code-sandbox-div" Next, try uncommenting the following lines of code: +**Line 14:** `// ,MemoryArchivist: "StorageForSystemInfoWitnessData",` + +**Line 17:** `// SystemInfoWitness: "WitnessCurrentSystemInformation",` + +**Line 20:** `// Bridge: "BridgeToPublicXyoNode",` + _Tip: All Modules in "yourModules" need a comma between them. Keep the leading comma in the Archivist Module line, otherwise you'll receive a bug!_ -1. `Archivist` — An Archivist is where Bound Witness and Payload data is stored. A shared, hosted, or self-hosted archivist can be used. It is even possible to run an archivist on the same device as the Sentinel and Bridge. -2. `Witness` — A Witness captures real-world data. -3. `Bridge` — A Bridge transfers Bound Witness and payload data form Sentinels to an Archivist. In many cases, the same device that is running the Sentinel also acts as the Bridge. +1. `Archivist` — An Archivist stores Bound Witness and Payload data. Learn more [here](/glossary#archivist). +2. `Witness` — A Witness captures real-world data. Learn more [here](/glossary#witness). +3. `Bridge` — A Bridge serves as a connection between different nodes. Learn more [here](/glossary#bridge). A few other useful words to learn: [TODO - Glossary Definition Variables] 1. `Sentinel` — [TODO] -2. `Witness` — [TODO] -3. `Bridge` — [TODO] +2. `Diviner` — [TODO] Need a quick reminder on what's what? The [Glossary](/glossary) can help you out! diff --git a/docs/getting-started/learn.md b/docs/getting-started/learn.md deleted file mode 100644 index 087f257..0000000 --- a/docs/getting-started/learn.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -sidebar_position: 10 ---- - -# Learn -These resources can help you learn more about XYO. - -## Your first node - -The following CodeSandbox demonstrates an XYO Node. - -A Node is a container that house Sentinels, Bridges, Archivists, and Diviners. (More on those, next!) - -Right now, the Node is empty and has a custom name. Try editing the name and see what happens! - - - -## Exercises -We've created a few more [exercises](https://xyo.network/dapp) to teach you more about ways you can implement XYO. - -## Demos -Explore our demos on [xyo.network](https://xyo.network/dapp) or on our GitHub. - -## Glossary -Need a quick reminder on what's what? The [Glossary](/glossary) can help you out! \ No newline at end of file diff --git a/docs/getting-started/add-xyo.md b/docs/getting-started/quickstart.mdx similarity index 54% rename from docs/getting-started/add-xyo.md rename to docs/getting-started/quickstart.mdx index 60a9534..d9f7315 100644 --- a/docs/getting-started/add-xyo.md +++ b/docs/getting-started/quickstart.mdx @@ -1,41 +1,28 @@ --- -sidebar_position: 4 +sidebar_position: 1 --- -# Add XYO to an existing project +# Quickstart: Install XYO +If you're ready to add XYO to the project you're working on, there's a few steps you'll need to complete. Want to learn more about XYO before adding it directly to your project? Head over to our [**Getting Started Guide**](/getting-started/develop) Let's discover **XYO Platform in less than 5 minutes**. -## Start using XYO + +import { InstallXyoOptions } from './components'; -Get started by **exploring dApps that use XYO in your browser**. - -### Open the XYO Explorer + + \ No newline at end of file diff --git a/docs/getting-started/sample-dapps.md b/docs/getting-started/sample-dapps.md deleted file mode 100644 index 4ca8f65..0000000 --- a/docs/getting-started/sample-dapps.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -sidebar_position: 3 ---- - -# Sample dApps -Learn more about sample dApps created by the XYO team - -## XYO dApp Library -The [XYO dApp Library](https://xyo.network/dapp) is designed to showcase XYO Technology with real-world data behind it. The dApps include a [Token Price Aggregator](https://xyo.network/dapp/price-aggregator), a [Uniswap Pair Renderer](https://xyo.network/dapp/uniswap-pairs), and a [Gas Price Aggregator](https://xyo.network/dapp/gas-price-aggregator). - -Each dApp aggregates data from multiple sources, creates Bound Witnesses with XYO Technology and secures that information in an Archivist. - -```tsx code=getting-started/button-demo deps=["mui","react"] - - - -``` \ No newline at end of file diff --git a/docs/getting-started/use-dapps.md b/docs/getting-started/use-dapps.md deleted file mode 100644 index 77039dc..0000000 --- a/docs/getting-started/use-dapps.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -sidebar_position: 7 ---- - -# Use XYO dApps - -Let's discover **XYO Platform in less than 5 minutes**. - -## Start using XYO - -Get started by **exploring dApps that use XYO in your browser**. - -### Open the XYO Explorer - -Use Chrome or another compatible browser to navigate to [explore.xyo.network](https://explore.xyo.network) - - -## Build a dApp using XYO - -Get started by **creating a dApp in Javascript/Typescript**. - -## Add XYO features to an existing dApp or Application - -Get started by **adding a feature to a NodeJS Application**. - -Get started by **adding a feature to a React Website**. - -Get started by **adding a feature to an iOS Mobile App**. - -Get started by **adding a feature to an Android Mobile App**. - - -## Host your own XYO Node - -Get started by **hosting a Node in your browser**. - -Get started by **hosting a Node on your computer**. - -Get started by **hosting a Node in the cloud**. - -Get started by **hosting a Node on a stand-alone device**. diff --git a/docs/glossary.md b/docs/glossary.md index 8b79f3b..2b26710 100644 --- a/docs/glossary.md +++ b/docs/glossary.md @@ -5,8 +5,6 @@ sidebar_position: 6 # Glossary Looking for a quick reminder on definitions or usages for XYO technology? You're in the right place. -(Glossary expansion coming soon! 🚧) - @@ -32,7 +30,8 @@ Types of Modules include: Node modules provide scoping, so you can easily create public and private collections of modules. With a Node, you can also design unique collections with very specific access inclusions and exclusion. This scoping is key to organization, as well as sovereignty for data and projects created with XYO. -It is important to note that a Node module is not the same as a simple "node" in a network. A "node" may refer to a singular instance of something inside a larger, greater network. A Node module is specifically a collection of XYO modules. +> :warning: **"Node" vs. "node"**: It is important to note that a Node module is not the same as a simple "node" in a network. A "node" may refer to a singular instance of something inside a larger, greater network. A Node module is specifically a collection of XYO modules. + ### Sentinel **A Sentinel tells one or more modules what to do.** @@ -74,9 +73,6 @@ A Diviner takes in data, transforms it, and delivers an answer or new form of th For example, a "Summary" Diviner might work the same way a "Reduce" does — a diviner that takes in some amount of data, and transforms it it into a summary of that same data, like a sum or an average -## Bound Witness Blocks -A series of blocks that contain the data collected by a Sentinel. - ## XYO Core Values ### Sovereignty diff --git a/docs/index.md b/docs/index.md index 4dc179d..9f883f0 100644 --- a/docs/index.md +++ b/docs/index.md @@ -4,7 +4,7 @@ slug: / --- # What is XYO? ## Introduction -XYO is an open-source platform for creating and enhancing a software through data-based **sovereignty**, **provenance**, and **permanence**. +XYO is an open-source platform for creating and enhancing a software through data-based [**sovereignty**](/glossary#sovereignty), [**provenance**](/glossary#provenance), and [**permanence**](/glossary#permanence). Encompassing both a network and protocol, XYO can be used for aggregating, verifying, organizing, and utilizing decentralized data from any hardware node capable of running XYO-enabled software or firmware. @@ -16,8 +16,6 @@ XYO is designed to be easy to implement, with several SDKs now available and an ## Advantages of XYO XYO’s features include: -- **Optional Blockchain:** Whether you want to add a few decentralized plugins or completely re-vamp your project, XYO allows you to add just as much decentralization as you want. All XYO Modules have [sovereign](/glossary#sovereignty) ledgers, improving performance -- **Optional Blockchain:** Built-in data validation, helping to protect your data from both errors and attacks. -- **Optional Blockchain:** Optional, fully integrated blockchain functionality. -- **Optional Blockchain:** An easy-to-use, human-readable, JSON-based data structure for storage and organization. -- \ No newline at end of file +- **Blockchain Protection:** Built-in data validation, helping to protect your data from both errors and attacks. +- **Optional Decentralization:** Whether you want to add a few decentralized plugins or completely re-vamp your project, XYO allows you to add just as much decentralization as you want. All XYO Modules have [sovereign](/glossary#sovereignty) ledgers, improving performance, ease of application, and transaction speed. +- **Data Clarity:** XYO provides an easy-to-use, human-readable, JSON-based data structure for storage and organization. Prioritizing a data structure as JSON means more compatibility across technologies. \ No newline at end of file diff --git a/src/components/CodeBlocks/CodeTabWithCopy.tsx b/src/components/CodeBlocks/CodeTabWithCopy.tsx new file mode 100644 index 0000000..44869a7 --- /dev/null +++ b/src/components/CodeBlocks/CodeTabWithCopy.tsx @@ -0,0 +1,150 @@ +import { alpha, Paper, styled, useTheme } from '@mui/material' +import Box, { BoxProps } from '@mui/material/Box' +import Tab from '@mui/material/Tab' +import Tabs from '@mui/material/Tabs' +import Typography from '@mui/material/Typography' +import * as React from 'react' + +interface SingleCliTabProps { + tabTitle: string + tabContent: string +} + +interface CliTabsProps extends BoxProps { + tabs: SingleCliTabProps[] +} + +interface TabPanelProps { + children?: React.ReactNode + index: number + value: number +} + +function TabPanel(props: TabPanelProps) { + const { children, value, index, ...other } = props + + return ( + + ) +} + +const AntTabs = styled(Tabs)({ + '& .MuiTabs-indicator': { + backgroundColor: '#1890ff', + }, + borderBottom: '1px solid #e8e8e8', +}) + +const AntTab = styled((props: StyledTabProps) => )(({ theme }) => ({ + '&.Mui-focusVisible': { + backgroundColor: '#d1eaff', + }, + '&.Mui-selected': { + color: '#1890ff', + fontWeight: theme.typography.fontWeightMedium, + }, + [theme.breakpoints.up('sm')]: { + minWidth: 0, + }, + '&:hover': { + color: '#40a9ff', + opacity: 1, + }, + color: 'rgba(0, 0, 0, 0.85)', + fontFamily: [ + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + 'Roboto', + '"Helvetica Neue"', + 'Arial', + 'sans-serif', + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', + ].join(','), + fontWeight: theme.typography.fontWeightRegular, + marginRight: theme.spacing(1), + minWidth: 0, + textTransform: 'none', +})) + +interface StyledTabsProps { + children?: React.ReactNode + value: number + onChange: (event: React.SyntheticEvent, newValue: number) => void +} + +const StyledTabs = styled((props: StyledTabsProps) => ( + }} /> +))({ + '& .MuiTabs-indicator': { + backgroundColor: 'transparent', + display: 'flex', + justifyContent: 'center', + }, + '& .MuiTabs-indicatorSpan': { + backgroundColor: '#635ee7', + maxWidth: 40, + width: '100%', + }, +}) + +interface StyledTabProps { + label: string +} + +const StyledTab = styled((props: StyledTabProps) => )(({ theme }) => ({ + '&.Mui-focusVisible': { + backgroundColor: 'rgba(100, 95, 228, 0.32)', + }, + '&.Mui-selected': { + color: '#fff', + }, + color: 'rgba(255, 255, 255, 0.7)', + fontSize: theme.typography.pxToRem(15), + fontWeight: theme.typography.fontWeightBold, + marginRight: theme.spacing(1), + textTransform: 'none', +})) + +function a11yProps(index: number) { + return { + 'aria-controls': `simple-tabpanel-${index}`, + id: `simple-tab-${index}`, + } +} +export const CodeTabWithCopy: React.FC = ({ tabs, ...props }) => { + const [value, setValue] = React.useState(0) + const theme = useTheme() + const handleChange = (event: React.SyntheticEvent, newValue: number) => { + setValue(newValue) + } + + return ( + + + + + {tabs.map((item, index) => { + return + })} + + + {tabs.map((item, index) => { + return ( + + {item.tabContent} + + ) + })} + + + ) +} diff --git a/src/components/CodeBlocks/cli-code.tsx b/src/components/CodeBlocks/cli-code.tsx new file mode 100644 index 0000000..f60dc8c --- /dev/null +++ b/src/components/CodeBlocks/cli-code.tsx @@ -0,0 +1,150 @@ +import { alpha, Paper, styled, useTheme } from '@mui/material' +import Box, { BoxProps } from '@mui/material/Box' +import Tab from '@mui/material/Tab' +import Tabs from '@mui/material/Tabs' +import Typography from '@mui/material/Typography' +import * as React from 'react' + +interface SingleCliTabProps { + tabTitle: string + tabContent: string +} + +interface CliTabsProps extends BoxProps { + tabs: SingleCliTabProps[] +} + +interface TabPanelProps { + children?: React.ReactNode + index: number + value: number +} + +function TabPanel(props: TabPanelProps) { + const { children, value, index, ...other } = props + + return ( + + ) +} + +const AntTabs = styled(Tabs)({ + '& .MuiTabs-indicator': { + backgroundColor: '#1890ff', + }, + borderBottom: '1px solid #e8e8e8', +}) + +const AntTab = styled((props: StyledTabProps) => )(({ theme }) => ({ + '&.Mui-focusVisible': { + backgroundColor: '#d1eaff', + }, + '&.Mui-selected': { + color: '#1890ff', + fontWeight: theme.typography.fontWeightMedium, + }, + [theme.breakpoints.up('sm')]: { + minWidth: 0, + }, + '&:hover': { + color: '#40a9ff', + opacity: 1, + }, + color: 'rgba(0, 0, 0, 0.85)', + fontFamily: [ + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + 'Roboto', + '"Helvetica Neue"', + 'Arial', + 'sans-serif', + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', + ].join(','), + fontWeight: theme.typography.fontWeightRegular, + marginRight: theme.spacing(1), + minWidth: 0, + textTransform: 'none', +})) + +interface StyledTabsProps { + children?: React.ReactNode + value: number + onChange: (event: React.SyntheticEvent, newValue: number) => void +} + +const StyledTabs = styled((props: StyledTabsProps) => ( + }} /> +))({ + '& .MuiTabs-indicator': { + backgroundColor: 'transparent', + display: 'flex', + justifyContent: 'center', + }, + '& .MuiTabs-indicatorSpan': { + backgroundColor: '#635ee7', + maxWidth: 40, + width: '100%', + }, +}) + +interface StyledTabProps { + label: string +} + +const StyledTab = styled((props: StyledTabProps) => )(({ theme }) => ({ + '&.Mui-focusVisible': { + backgroundColor: 'rgba(100, 95, 228, 0.32)', + }, + '&.Mui-selected': { + color: '#fff', + }, + color: 'rgba(255, 255, 255, 0.7)', + fontSize: theme.typography.pxToRem(15), + fontWeight: theme.typography.fontWeightBold, + marginRight: theme.spacing(1), + textTransform: 'none', +})) + +function a11yProps(index: number) { + return { + 'aria-controls': `simple-tabpanel-${index}`, + id: `simple-tab-${index}`, + } +} +export const CliTabs: React.FC = ({ tabs, ...props }) => { + const [value, setValue] = React.useState(0) + const theme = useTheme() + const handleChange = (event: React.SyntheticEvent, newValue: number) => { + setValue(newValue) + } + + return ( + + + + + {tabs.map((item, index) => { + return + })} + + + {tabs.map((item, index) => { + return ( + + {item.tabContent} + + ) + })} + + + ) +} diff --git a/src/components/Demo/brandingTheme.ts b/src/components/Demo/brandingTheme.ts index 1b7b0fe..774f5e4 100644 --- a/src/components/Demo/brandingTheme.ts +++ b/src/components/Demo/brandingTheme.ts @@ -199,7 +199,6 @@ export const getDesignTokens = (mode: 'light' | 'dark') => return undefined }, - palette: { divider: mode === 'dark' ? alpha(blue[100], 0.08) : grey[100], mode,