fix: time and divider (#20)

* add: control over divider colors + Connected component

* fix: code quality

* fix: time and divider

* lint

src/components/primitives/Divider.tsx

@@ -44,9 +44,7 @@ export type DividerProps = Component<
 >;
 
 export default function Divider({ vertical = false, horizontal = true, look, className, ...props }: DividerProps) {
-  if (horizontal) return <div className={mergeClass(dividerStyles({ look }), className)} {...props} />;
+  if (horizontal && !vertical) return <div className={mergeClass(dividerStyles({ look }), className)} {...props} />;
 
-  return (
-    <div className={mergeClass(dividerStyles({ look, vertical: vertical ?? !horizontal }), className)} {...props} />
-  );
+  return <div className={mergeClass(dividerStyles({ look, vertical: true }), className)} {...props} />;
 }

src/components/primitives/Time.tsx

@@ -3,21 +3,23 @@ import { useMemo } from "react";
 
 export type TimeProps = {
   timestamp: number | bigint;
+  prefix?: string;
   relative?: "hours" | "day" | "auto";
 };
 
-export default function Time({ timestamp }: TimeProps) {
+export default function Time({ timestamp, prefix }: TimeProps) {
   const time = useMemo(() => {
     const then = moment(Number(timestamp)).fromNow();
 
     return then
+      .replace("in ", (prefix && `${prefix} `) ?? "in ")
       .replace("/ minute| minutes/g", "m")
       .replace(/\ba\b/, "1")
       .replace(/ seconds| second/g, "s")
-      .replace(/ hours| hour/g, "h")
-      .replace(/ days| day/g, "d")
-      .replace(/ months| month/g, "d");
-  }, [timestamp]);
+      .replace(/ hours| hour/g, "hours")
+      .replace(/ days| day/g, " days")
+      .replace(/ months| month/g, " months");
+  }, [timestamp, prefix]);
 
   return time;
 }