first commit

calcom/packages/ui/components/divider/Divider.tsx

@@ -0,0 +1,23 @@
+import { classNames } from "@calcom/lib";
+
+export function Divider({ className, ...props }: JSX.IntrinsicElements["hr"]) {
+  className = classNames("border-subtle my-1", className);
+  return <hr className={className} {...props} />;
+}
+
+export function VerticalDivider({ className, ...props }: JSX.IntrinsicElements["svg"]) {
+  className = classNames("mx-3 text-muted", className);
+  return (
+    <svg
+      className={className}
+      {...props}
+      width="2"
+      height="16"
+      viewBox="0 0 2 16"
+      ry="6"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <rect width="2" height="16" rx="1" fill="currentColor" />
+    </svg>
+  );
+}

calcom/packages/ui/components/divider/divider.stories.mdx

@@ -0,0 +1,42 @@
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+
+import {
+  Examples,
+  Example,
+  Note,
+  Title,
+  CustomArgsTable,
+  VariantsTable,
+  VariantRow,
+} from "@calcom/storybook/components";
+
+import { Divider, VerticalDivider } from "./Divider";
+
+<Meta title="UI/Divider" component={Divider} />
+
+<Title title="Divider" suffix="Brief" subtitle="Version 2.0 — Last Update: 05 jan 2023" />
+
+## Definition
+
+Shows the current copy right as well as app version name.
+
+<Canvas>
+  <Story name="Divider">
+    <VariantsTable titles={[]} columnMinWidth={150}>
+      <VariantRow variant="Horizontal">
+        <div className="dark:text-inverted">
+          Text above
+          <Divider />
+          Text below
+        </div>
+      </VariantRow>
+      <VariantRow variant="Vertical">
+        <div className="dark:text-inverted flex">
+          Text left
+          <VerticalDivider />
+          Text right
+        </div>
+      </VariantRow>
+    </VariantsTable>
+  </Story>
+</Canvas>

calcom/packages/ui/components/divider/index.ts

@@ -0,0 +1 @@
+export { Divider, VerticalDivider } from "./Divider";