From 2395b1e2d8a879c13efa3fea319d1c028cd9e5c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”>
Date: Thu, 28 Jul 2022 14:19:08 +0300
Subject: [PATCH] Radio Component v1.0
---
src/components/Radio.tsx | 46 ++++++++++++++++++++++++++++++++++++++++
1 file changed, 46 insertions(+)
create mode 100644 src/components/Radio.tsx
diff --git a/src/components/Radio.tsx b/src/components/Radio.tsx
new file mode 100644
index 0000000..0157cd3
--- /dev/null
+++ b/src/components/Radio.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+/**
+ * [*]This is a Radio component.
+ *
+ * [*]when you click on the label the radio will be selected
+ *
+ * [*] when you call this component pass the following:
+ * [1]. label
+ * [2]. id
+ * [3]. name
+ *
+ * [*] A good example will be:
+ * <Radio label=" Will Smith" id="one" name="radio" />
+ */
+type RadioProps = {
+ /**
+ * the text that will be shown besie the radio
+ */
+ label: string;
+ /**
+ * please provide a unique id
+ */
+ id: string;
+ /**
+ * The name of radio element
+ */
+ name: string;
+} & Omit<React.HTMLProps<HTMLInputElement>, "type">;
+
+const Radio = ({ label, id, name, ...props }: RadioProps) => {
+ return (
+ <div>
+ <input
+ className="hover:bg-sky-700 focus:bg-sky-900 active:bg-sky-300 "
+ type="Radio"
+ name={name}
+ value={label}
+ id={id}
+ {...props}
+ />
+ <label htmlFor={id}>{label}</label>
+ </div>
+ );
+};
+
+export default Radio;