Separator

import * as stylex from '@stylexjs/stylex';

import { Separator } from '@/components/ui/separator';
import { space, fontSize, fontWeight } from '@/lib/constants.stylex';
import { colors } from '@/lib/tokens.stylex';

export default function SeparatorDemo() {
  return (
    <div {...stylex.props(styles.root)}>
      <div>
        <div {...stylex.props(styles.title)}>Base UI Primitives</div>
        <div {...stylex.props(styles.muted)}>An open-source UI component library.</div>
      </div>
      <Separator />
      <div {...stylex.props(styles.row)}>
        <span>Blog</span>
        <Separator orientation="vertical" />
        <span>Docs</span>
        <Separator orientation="vertical" />
        <span>Source</span>
      </div>
    </div>
  );
}

const styles = stylex.create({
  root: {
    display: 'flex',
    flexDirection: 'column',
    fontSize: fontSize.sm,
    gap: space.s4,
  },
  title: {
    fontWeight: fontWeight.medium,
  },
  muted: {
    color: colors.mutedForeground,
  },
  row: {
    alignItems: 'center',
    display: 'flex',
    gap: space.s4,
    height: space.s5,
  },
});

import * as stylex from '@stylexjs/stylex';

import { Separator } from '@/components/ui/separator';
import { space, fontSize } from '@/lib/constants.stylex';

export default function SeparatorVertical() {
  return (
    <div {...stylex.props(styles.row)}>
      <span>Blog</span>
      <Separator orientation="vertical" />
      <span>Docs</span>
      <Separator orientation="vertical" />
      <span>Source</span>
    </div>
  );
}

const styles = stylex.create({
  row: {
    alignItems: 'center',
    display: 'flex',
    fontSize: fontSize.sm,
    gap: space.s4,
    height: space.s5,
  },
});

import * as React from 'react';

import * as stylex from '@stylexjs/stylex';

import { Separator } from '@/components/ui/separator';
import { space, fontSize, fontWeight, container } from '@/lib/constants.stylex';
import { colors } from '@/lib/tokens.stylex';

const notifications = [
  { title: 'Your invoice has been paid', time: '2h ago' },
  { title: 'New comment on your PR', time: '4h ago' },
  { title: 'Weekly digest is ready', time: '1d ago' },
];

export default function SeparatorList() {
  return (
    <div {...stylex.props(styles.root)}>
      {notifications.map((item, index) => (
        <React.Fragment key={item.title}>
          {index > 0 && <Separator />}
          <div {...stylex.props(styles.row)}>
            <span {...stylex.props(styles.title)}>{item.title}</span>
            <span {...stylex.props(styles.time)}>{item.time}</span>
          </div>
        </React.Fragment>
      ))}
    </div>
  );
}

const styles = stylex.create({
  root: {
    display: 'flex',
    flexDirection: 'column',
    gap: space.s3,
    width: container.sm,
  },
  row: {
    alignItems: 'center',
    display: 'flex',
    justifyContent: 'space-between',
  },
  title: {
    fontSize: fontSize.sm,
    fontWeight: fontWeight.medium,
  },
  time: {
    color: colors.mutedForeground,
    fontSize: fontSize.xs,
  },
});