refactor(SeparatorWithText): simplify, replace before/after/borders with div bg

Author: adaptive-shield-matrix

lib/static/separator/SeparatorWithText.tsx

@@ -1,17 +1,16 @@
-import { classMerge } from "~ui/utils/classMerge"
+import { classArr } from "~ui/utils/classArr"
 import type { MayHaveChildrenAndClass } from "~ui/utils/MayHaveChildrenAndClass"
 
 export function SeparatorWithText(p: MayHaveChildrenAndClass) {
   return (
-    <div
-      class={classMerge(
-        "flex items-center",
-        "before:mt-0.5 before:flex-1 before:border-t",
-        "after:mt-0.5 after:flex-1 after:border-t",
-        p.class,
-      )}
-    >
+    <div class={classArr("w-full flex flex-row items-center")}>
+      <Line />
       {p.children}
+      <Line />
     </div>
   )
 }
+
+function Line() {
+  return <div class="flex-1 h-0.5 bg-gray-400 dark:bg-gray-600 mx-4" />
+}