mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
tom goriunovandGitHub
f0e713b877
* UI customizations: new features Fixes #2905 * colors for graphs * introduce env variable * colors for topbar, stats, selected state and tabs * fix build * fix validator * refactor link.primary.hover color token * refactor selected colors * update styles for switch and fix some color tokens * change color for selectable controls * icon color tokens refactoring * UI customizations: new features Fixes #2905 * test for common components * tweaks * migrate from color-mode-hex cookie to color-theme cookie * clean up * update screenshots * more screenshot updates * update default color of chart line * update envs for mega eth
61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
|
|
import { Switch } from 'toolkit/chakra/switch';
|
|
|
|
import { Section, Container, SectionHeader, SamplesStack, Sample } from './parts';
|
|
|
|
const SwitchShowcase = () => {
|
|
|
|
return (
|
|
<Container value="switch">
|
|
<Section>
|
|
<SectionHeader>Size</SectionHeader>
|
|
<SamplesStack>
|
|
<Sample label="size: sm">
|
|
<Switch size="sm">
|
|
Show duck
|
|
</Switch>
|
|
</Sample>
|
|
<Sample label="size: md">
|
|
<Switch size="md">
|
|
Show duck
|
|
</Switch>
|
|
</Sample>
|
|
<Sample label="size: lg">
|
|
<Switch size="lg" defaultChecked>
|
|
Show duck
|
|
</Switch>
|
|
</Sample>
|
|
</SamplesStack>
|
|
</Section>
|
|
<Section>
|
|
<SectionHeader>Disabled</SectionHeader>
|
|
<SamplesStack>
|
|
<Sample label="disabled: true">
|
|
<Switch disabled>
|
|
Show duck
|
|
</Switch>
|
|
</Sample>
|
|
</SamplesStack>
|
|
</Section>
|
|
<Section>
|
|
<SectionHeader>Direction</SectionHeader>
|
|
<SamplesStack>
|
|
<Sample label="direction: rtl">
|
|
<Switch size="sm" direction="rtl">
|
|
Show duck
|
|
</Switch>
|
|
</Sample>
|
|
<Sample label="direction: ltr">
|
|
<Switch size="md" direction="ltr">
|
|
Show duck
|
|
</Switch>
|
|
</Sample>
|
|
</SamplesStack>
|
|
</Section>
|
|
</Container>
|
|
);
|
|
};
|
|
|
|
export default React.memo(SwitchShowcase);
|