NextuiのDividerが使えなかったので、Dividerを他の参考にして自作した。

はじめに

みなさん、こんにちは torihaziです

最近、Xクローンを作っているのですが

こういうやつがNextuiのDividerで作れなかったので

これを機に作ってみました。

多分よくあるやつです！

あとNextui x tailwindです

そもそもNextuiのDividerは？

https://nextui.org/docs/components/divider

みた感じこの人、childrenというか

textをpropsか何かで渡せないらしいです。

---- text ------

みたいな感じですね。

<Divider />

しかないらしくて。

個人的には

<Divider text={text} />
<Divider>テキスト</Divider>

みたいな感じを期待していたんですけど。

で、これは困った、ということで作りました。

どうしたか。

import { ReactNode } from "react";

// NextuiのDividerにはテキストを挟み込めないので自作
export const Divider = ({
  children,
  className,
}: {
  children?: ReactNode;
  className?: string;
}) => {
  return (
    <div className={`flex items-center justify-center my-2 ${className}`}>
      <div className="flex-1 border-b" />
      {children}
      <div className="flex-1 border-b" />
    </div>
  );
};

こんな感じにして、呼ぶときは

~~
<Divider className="w-[300px]">または</Divider>
<Divider className="w-[300px]"></Divider>
~~~

てすると

こんな感じになります。

他のやつは

<div className="flex-1 border-b mr-2" />

とかmarginつけてたんですが、そうすると文字ないときに不自然になるのでやめました。

終わりに

Nextuiがすごいというからなんでもすごいのかと思ったら

かなり序盤でずっこけました。

あ、ちなみにそれ使ったXクローンの全体図がこちらです。

昔に比べたら上出来です。