import { Anchor } from '@btri-ui/base';
import React from 'react';
const { Link } = Anchor;

const links = [
  {
    title: '一级默认',
    href: '#1',
    links: [
      {
        title: '二级默认',
        href: '#1-1',
        links: [
          {
            title: '三级默认',
            href: '#1-1-1',
          },
          {
            title: '三级默认',
            href: '#1-1-2',
          },
        ],
      },
    ],
  },
  {
    title: '一级默认',
    href: '#2',
  },
  {
    title: '一级默认',
    href: '#3',
  },
  {
    title: '一级默认',
    href: '#4',
  },
];

function RenderLink(links) {
  return links.map(link => {
    if (link.links) {
      return (
        <>
          <Link href={link.href} title={link.title}>
            {link.links && RenderLink(link.links)}
          </Link>
        </>
      );
    }
    return <Link href={link.href} title={link.title}></Link>;
  });
}

const App = () => (
  <div style={{ width: 200 }}>
    <Anchor affix={false} hideLine={true} showInkInFixed={true}>
      <Link links={links}></Link>
    </Anchor>
  </div>
);

export default App;