feat: links

packages/website-ue/src/components/Link/index.css

@@ -0,0 +1,14 @@
+.link {
+  color: var(--accent-11);
+  text-decoration-color: currentColor;
+
+  &[data-underline="hover"],
+  &[data-underline="never"] {
+    text-decoration: none;
+  }
+
+  &[data-underline="hover"]:hover,
+  &[data-underline="hover"]:focus {
+    text-decoration: underline;
+  }
+}

packages/website-ue/src/components/Link/index.tsx

@@ -0,0 +1,17 @@
+import type { ComponentProps } from "react";
+import { classNames } from "../../core/ui/classNames";
+import "./index.css";
+
+export interface LinkProps extends ComponentProps<"a"> {
+  underline?: "always" | "hover" | "never";
+}
+
+export function Link({ className, underline = "always", ...props }: LinkProps) {
+  return (
+    <a
+      className={classNames("link", className)}
+      {...props}
+      data-underline={underline}
+    />
+  );
+}