add colored horizontal rule block

web/src/components/blocks/HorizontalRuleBlock.tsx

@@ -0,0 +1,24 @@
+import { HorizontalRuleBlock as HorizontalRuleBlockType } from "@/gql/graphql";
+import Image from "../general/Image";
+import styles from "./imageWithTextBlock.module.scss";
+
+export const HorizontalRuleBlock = ({
+  block,
+}: {
+  block: HorizontalRuleBlockType;
+}) => {
+  const knownColors = [
+    "deepBrick",
+    "neufPink",
+    "goldenOrange",
+    "goldenBeige",
+    "chateauBlue",
+  ];
+  const defaultColor = "chateauBlue";
+  const color =
+    typeof block?.color === "string" && knownColors.includes(block.color)
+      ? block.color
+      : defaultColor;
+
+  return <hr attr-color={color} />;
+};