vierkant.tsx -> ui.tsx

1 files changed, 26 insertions, 0 deletions

diff --git a/src/components/ui.tsx b/src/components/ui.tsx
new file mode 100644
index 0000000..558eab8
--- /dev/null
+++ b/src/components/ui.tsx
@@ -0,0 +1,26 @@
+import { CSSProperties, ReactNode } from "react";
+
+interface VierkantProps {
+	href?: string;
+	width?: string;
+	height?: string;
+	style?: CSSProperties;
+	children?: ReactNode;
+}
+
+export function Vierkant(props: VierkantProps) {
+	return <a style={{
+		padding: 24,
+		backgroundColor: "var(--background)",
+		borderRadius: 8,
+		color: "var(--text)",
+		margin: 6, // geen margin collapse = 12px marge
+		display: "inline-block",
+		position: "relative",
+		boxSizing: "border-box",
+		width: props.width ? props.width : undefined,
+		height: props.height ? props.height : undefined,
+		...props.style
+	}} href={props.href}>{props.children}</a>
+}
+