demo/acme-web code browser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import type { InputHTMLAttributes } from "react";
import { color, radius, space } from "./tokens";

type Props = InputHTMLAttributes<HTMLInputElement> & { label: string };

export function Input({ label, ...rest }: Props) {
  return (
    <label style={{ display: "grid", gap: space.xs, color: color.muted }}>
      {label}
      <input
        {...rest}
        style={{ padding: space.sm, borderRadius: radius, border: "1px solid " + color.line }}
      />
    </label>
  );
}