initial commit

apps/web/app/components/ui/Button/ArrowIcon.tsx

@@ -0,0 +1,32 @@
+import "./ArrowIcon.css";
+
+export type ArrowIconDirection = "forward" | "backward";
+
+export type ArrowIconProps = {
+  /**
+   * `forward` follows reading order - it points right in LTR and left in RTL,
+   * which is what the Arabic home hero does. `backward` is the opposite, for
+   * "previous" affordances such as pagination.
+   */
+  direction?: ArrowIconDirection;
+  className?: string;
+};
+
+/**
+ * The arrow that rides along with the CTA label ("Discover SHARP-ER ->").
+ *
+ * Purely decorative: the label next to it carries the meaning, so the element
+ * is hidden from assistive technology. It paints in `currentColor`, so it takes
+ * the colour of whatever button or link it sits in with no props.
+ */
+export function ArrowIcon({ direction = "forward", className }: ArrowIconProps) {
+  return (
+    <span
+      aria-hidden="true"
+      data-direction={direction}
+      className={className ? `sh-arrow-icon ${className}` : "sh-arrow-icon"}
+    >
+      <span className="sh-arrow-icon__glyph" />
+    </span>
+  );
+}