add colored horizontal rule block

web/src/components/blocks/Blocks.tsx

@@ -1,6 +1,7 @@
 import { RichTextBlock } from "./RichTextBlock";
 import { ImageWithTextBlock } from "./ImageWithTextBlock";
 import { ImageSliderBlock } from "./ImageSliderBlock";
+import { HorizontalRuleBlock } from "./HorizontalRuleBlock";
 
 export const Blocks = ({ blocks }: any) => {
   return blocks.map((block: any) => {
@@ -14,6 +15,9 @@ export const Blocks = ({ blocks }: any) => {
       case "ImageSliderBlock":
         return <ImageSliderBlock block={block} />;
         break;
+      case "HorizontalRuleBlock":
+        return <HorizontalRuleBlock block={block} />;
+        break;
       default:
         return <div>Unsupported block type {block.blockType}</div>;
         console.log("unsupported block", 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} />;
+};