👿

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

2024/09/24に公開

Next.js

 はじめにみなさん、こんにちは 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クローンの全体図がこちらです。
昔に比べたら上出来です。

はじめに

そもそもNextuiのDividerは？

どうしたか。

終わりに

Discussion