セパレーター

import React from 'react';
import * as Separator from '@radix-ui/react-separator';
import './styles.css';

const SeparatorDemo = () => (
  <div style={{ width: '100%', maxWidth: 300, margin: '0 15px' }}>
    <div className="Text" style={{ fontWeight: 500 }}>
      Radix Primitives
    </div>
    <div className="Text">An open-source UI component library.</div>
    <Separator.Root className="SeparatorRoot" style={{ margin: '15px 0' }} />
    <div style={{ display: 'flex', height: 20, alignItems: 'center' }}>
      <div className="Text">Blog</div>
      <Separator.Root
        className="SeparatorRoot"
        decorative
        orientation="vertical"
        style={{ margin: '0 15px' }}
      />
      <div className="Text">Docs</div>
      <Separator.Root
        className="SeparatorRoot"
        decorative
        orientation="vertical"
        style={{ margin: '0 15px' }}
      />
      <div className="Text">Source</div>
    </div>
  </div>
);

export default SeparatorDemo;
Expand code