feat: add Button component

apps/web/package.json

@@ -12,12 +12,13 @@
   "dependencies": {
     "@rentment/ui": "workspace:*",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0"
   },
   "devDependencies": {
+    "@eslint/js": "^9.13.0",
     "@rentment/eslint-config": "workspace:*",
     "@rentment/typescript-config": "workspace:*",
-    "@eslint/js": "^9.13.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",

apps/web/src/App.tsx

@@ -2,6 +2,8 @@ import { useState } from "react";
 import reactLogo from "./assets/react.svg";
 import viteLogo from "/vite.svg";
 import "./App.css";
+import { FaSignInAlt } from "react-icons/fa";
+import Button from "./components/Button/Button";
 
 function App() {
   const [count, setCount] = useState(0);
@@ -28,6 +30,113 @@ function App() {
       <p className="read-the-docs">
         Click on the Vite and React logos to learn more
       </p>
+      <div
+        style={{
+          display: "flex",
+          flexWrap: "wrap",
+          gap: "10px",
+          backgroundColor: "#AAA",
+          padding: "20px",
+        }}
+      >
+        <Button
+          text="متن دکمه"
+          color="primary"
+          variant="solid"
+          icon={<FaSignInAlt />}
+        />
+        <Button
+          text="متن دکمه"
+          color="primary"
+          variant="outline"
+          icon={<FaSignInAlt />}
+        />
+        <Button
+          text="متن دکمه"
+          color="primary"
+          variant="text"
+          icon={<FaSignInAlt />}
+        />
+
+        <Button
+          text="متن دکمه"
+          color="secondary"
+          variant="solid"
+          icon={<FaSignInAlt />}
+        />
+        <Button
+          text="متن دکمه"
+          color="secondary"
+          variant="outline"
+          icon={<FaSignInAlt />}
+        />
+        <Button
+          text="متن دکمه"
+          color="secondary"
+          variant="text"
+          icon={<FaSignInAlt />}
+        />
+
+        <Button
+          text="متن دکمه"
+          color="black"
+          variant="solid"
+          icon={<FaSignInAlt />}
+        />
+        <Button
+          text="متن دکمه"
+          color="black"
+          variant="outline"
+          icon={<FaSignInAlt />}
+        />
+        <Button
+          text="متن دکمه"
+          color="black"
+          variant="text"
+          icon={<FaSignInAlt />}
+        />
+
+        <Button
+          text="متن دکمه"
+          color="white"
+          variant="solid"
+          icon={<FaSignInAlt />}
+        />
+        <Button
+          text="متن دکمه"
+          color="white"
+          variant="outline"
+          icon={<FaSignInAlt />}
+        />
+        <Button
+          text="متن دکمه"
+          color="white"
+          variant="text"
+          icon={<FaSignInAlt />}
+        />
+
+        <Button
+          text="متن دکمه"
+          disabled={true}
+          color="primary"
+          variant="solid"
+          icon={<FaSignInAlt />}
+        />
+        <Button
+          text="متن دکمه"
+          disabled={true}
+          color="primary"
+          variant="outline"
+          icon={<FaSignInAlt />}
+        />
+        <Button
+          text="متن دکمه"
+          disabled={true}
+          color="primary"
+          variant="text"
+          icon={<FaSignInAlt />}
+        />
+      </div>
     </>
   );
 }

apps/web/src/components/Button/Button.css

@@ -0,0 +1,99 @@
+/* Base button styles */
+.button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 8px 16px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: transform 0.15s ease-in-out;
+}
+
+.button:hover:not(.disabled) {
+  transform: scale(1.05);
+}
+
+.button.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* Variant-specific styles */
+.button.solid {
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.button.outline {
+  background-color: transparent;
+  border-width: 1px;
+}
+
+.button.text {
+  background-color: transparent;
+  border: none;
+  padding: 0;
+}
+
+/* Color-specific styles */
+.button.primary {
+  --bg-color: #194bf0;
+  --text-color: #ffffff;
+  --border-color: #194bf0;
+}
+
+.button.secondary {
+  --bg-color: #fdb713;
+  --text-color: #0c0c0c;
+  --border-color: #fdb713;
+}
+
+.button.black {
+  --bg-color: #0c0c0c;
+  --text-color: #ffffff;
+  --border-color: #0c0c0c;
+}
+
+.button.white {
+  --bg-color: #ffffff;
+  --text-color: #0c0c0c;
+  --border-color: #ffffff;
+}
+
+.button.solid {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  border: none;
+}
+
+.button.outline {
+  border: 1px solid var(--border-color);
+  color: var(--border-color);
+}
+
+.button.text {
+  color: var(--border-color);
+}
+
+/* Disabled color */
+.button.disabled.solid {
+  background-color: #e0e0e0;
+  color: #9e9e9e;
+}
+
+.button.disabled.outline,
+.button.disabled.text {
+  color: #9e9e9e;
+  border-color: #e0e0e0;
+}
+
+/* Icon and text alignment */
+.button-icon {
+  display: inline-block;
+}
+
+.button-text {
+  display: inline-block;
+}

apps/web/src/components/Button/Button.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import "./Button.css";
+
+const Button = ({
+  text = "متن دکمه",
+  icon = null,
+  variant = "solid", // solid, outline, text
+  color = "primary", // primary, secondary, black, white
+  disabled = false,
+  onClick = () => {},
+}) => {
+  return (
+    <button
+      onClick={onClick}
+      className={`button ${variant} ${color} ${disabled ? "disabled" : ""}`}
+      disabled={disabled}
+    >
+      {icon && <span className="button-icon">{icon}</span>}
+      <span className="button-text">{text}</span>
+    </button>
+  );
+};
+
+export default Button;

apps/web/src/index.css

@@ -1,5 +1,11 @@
+@font-face {
+  font-family: "Estedad";
+  src: url("./public/fonts/Estedad[KSHD,wght].woff2");
+}
+
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: "Estedad", "Vazir", Inter, system-ui, Avenir, Helvetica, Arial,
+    sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
@@ -18,6 +24,7 @@ a {
   color: #646cff;
   text-decoration: inherit;
 }
+
 a:hover {
   color: #535bf2;
 }
@@ -46,9 +53,11 @@ button {
   cursor: pointer;
   transition: border-color 0.25s;
 }
+
 button:hover {
   border-color: #646cff;
 }
+
 button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
@@ -59,9 +68,11 @@ button:focus-visible {
     color: #213547;
     background-color: #ffffff;
   }
+
   a:hover {
     color: #747bff;
   }
+
   button {
     background-color: #f9f9f9;
   }