From 29ab1467f543bf3f1eca9003d14a432ca9e06f4d Mon Sep 17 00:00:00 2001
From: Mayor vargas <uwihanganyeobed@gmail.com>
Date: Mon, 27 Nov 2023 17:52:56 +0200
Subject: [PATCH] This is my branch

---
 src/Alerts & notifications pushed/Alert.jsx   | 43 ++++++++++
 src/Alerts & notifications pushed/App.jsx     | 15 ++++
 .../variants.jsx                              | 43 ++++++++++
 src/Buttons-pushed/App.jsx                    | 38 +++++++++
 src/Buttons-pushed/Components/Buttons.jsx     | 82 +++++++++++++++++++
 src/Buttons-pushed/Components/styles.css      | 43 ++++++++++
 6 files changed, 264 insertions(+)
 create mode 100644 src/Alerts & notifications pushed/Alert.jsx
 create mode 100644 src/Alerts & notifications pushed/App.jsx
 create mode 100644 src/Alerts & notifications pushed/variants.jsx
 create mode 100644 src/Buttons-pushed/App.jsx
 create mode 100644 src/Buttons-pushed/Components/Buttons.jsx
 create mode 100644 src/Buttons-pushed/Components/styles.css

diff --git a/src/Alerts & notifications pushed/Alert.jsx b/src/Alerts & notifications pushed/Alert.jsx
new file mode 100644
index 0000000..a1a4f2e
--- /dev/null
+++ b/src/Alerts & notifications pushed/Alert.jsx	
@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+
+const Alert = ({ variant }) => {
+  const [open, setOpen] = useState(true);
+
+  if (open)
+    return (
+      <div
+        className="alert-container"
+        style={{
+          background: variant.mainColor,
+          border: `0.1rem solid ${variant.secondaryColor}`,
+        }}
+      >
+        <div
+          className="symbol-container"
+          style={{ background: variant.secondaryColor }}
+        >
+          <span className="material-symbols-outlined symbol">
+            {variant.symbol}
+          </span>{" "}
+        </div>
+        <div className="description-container">
+          <span className="description-title" title={variant.title}>
+            {variant.title}:
+          </span>
+          <span className="description-text" title={variant.text}>
+            {variant.text}
+          </span>
+        </div>
+        <a
+          href="#"
+          className="symbol-close-link"
+          onClick={() => setOpen(false)}
+        >
+          <button className="material-symbols-outlined mystyle">Yes and continue</button>
+        </a>
+      </div>
+    );
+  else return null;
+};
+
+export default Alert;
diff --git a/src/Alerts & notifications pushed/App.jsx b/src/Alerts & notifications pushed/App.jsx
new file mode 100644
index 0000000..ac2fa9d
--- /dev/null
+++ b/src/Alerts & notifications pushed/App.jsx	
@@ -0,0 +1,15 @@
+import React from "react";
+import Alert from "./Alert";
+import { variants } from "./variants";
+
+function App() {
+  return (
+    <div className="">
+      {variants.map((variant, index) => (
+        <Alert key={index} variant={variant} />
+      ))}
+    </div>
+  );
+}
+
+export default App;
diff --git a/src/Alerts & notifications pushed/variants.jsx b/src/Alerts & notifications pushed/variants.jsx
new file mode 100644
index 0000000..f8a4a5e
--- /dev/null
+++ b/src/Alerts & notifications pushed/variants.jsx	
@@ -0,0 +1,43 @@
+export const variants = [
+   // red
+   {
+     mainColor: "#FDEDED",
+     secondaryColor: "#F16360",
+     symbol: "Delete",
+     title: "Error",
+     text: "Attempted error!! Please try again.",
+   },
+   // blue
+   {
+     mainColor: "#E5F6FD",
+     secondaryColor: "#1AB1F5",
+     symbol: "Log",
+     title: "Information",
+     text: "Sign-in as Admin or as guest ",
+   },
+   // green
+   {
+     mainColor: "#EDFEEE",
+     secondaryColor: "#5CB660",
+     symbol: "Save",
+     title: "Success",
+     text: "Save assets in the stock",
+   },
+   // yellow
+   {
+     mainColor: "#FFF4E5",
+     secondaryColor: "#FFA117",
+     symbol: "Warn",
+     title: "Warning",
+     text: "Saving, please wait",
+   },
+   // pink
+   {
+     mainColor: "#FFC0CB",
+     secondaryColor: "#FF69B4",
+     symbol: "Good",
+     title: "Feedback",
+     text: " Congratulations stay tuned to binary Hub",
+   },
+ ];
+ 
\ No newline at end of file
diff --git a/src/Buttons-pushed/App.jsx b/src/Buttons-pushed/App.jsx
new file mode 100644
index 0000000..2493d66
--- /dev/null
+++ b/src/Buttons-pushed/App.jsx
@@ -0,0 +1,38 @@
+// App.jsx
+import React from "react";
+import Button from "./Components/Buttons";
+
+const App = () => {
+  return (
+    <React.Fragment>
+      <h1
+        style={{
+          textAlign: "center",
+          fontSize: "17px",
+          marginBottom: "20px",
+        }}
+      >
+        Some of Reusable Button Components
+      </h1>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexWrap: "wrap",
+          gap: "10px",
+        }}
+      >
+        <Button variant="success">Save/Success Button</Button>
+        <Button variant="danger">Remove Button</Button>
+        <Button variant="warning">Warning/saving Button</Button>
+        <Button variant="primary"> Sign in Button</Button>
+        <Button variant="secondary">Stock Button</Button>
+        <Button variant="dark">Dark Button</Button>
+        <Button variant="light">Create Button</Button>
+      </div>
+    </React.Fragment>
+  );
+};
+
+export default App;
diff --git a/src/Buttons-pushed/Components/Buttons.jsx b/src/Buttons-pushed/Components/Buttons.jsx
new file mode 100644
index 0000000..81b7055
--- /dev/null
+++ b/src/Buttons-pushed/Components/Buttons.jsx
@@ -0,0 +1,82 @@
+// Button.jsx
+
+import React from 'react';
+import styled from 'styled-components';
+
+const ButtonComponent = styled.button`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  border-radius: 9px;
+  padding: 0.3rem; /* Add the missing semicolon and adjust the value */
+  height: ${props =>
+    props.size === 'sm'
+      ? '30px'
+      : props.size === 'md'
+      ? '37px'
+      : props.size === 'lg'
+      ? '40px'
+      : '34px'};
+  font-family: 'Inter', sans-serif;
+  font-weight: 500;
+  border: 1px solid transparent;
+  background-color: ${props =>
+    props.variant === 'light'
+      ? '#FFF;'
+      : props.variant === 'dark'
+      ? '#212529'
+      : props.variant === 'primary'
+      ? '#2D90D2'
+      : props.variant === 'secondary'
+      ? '#E8F1F8;'
+      : props.variant === 'success'
+      ? '#00A524;'
+      : props.variant === 'info'
+      ? '#0dcaf0'
+      : props.variant === 'warning'
+      ? 'rgba(252, 191, 34, 1)'
+      : props.variant === 'danger'
+      ? '#FFF'
+      : '#f8f9fa'}; /* Add # before f8f9fa */
+  color: ${props =>
+    props.variant === 'light'
+      ? '#212529'
+      : props.variant === 'dark'
+      ? '#ffffff'
+      : props.variant === 'primary'
+      ? '#ffffff'
+      : props.variant === 'secondary'
+      ? '#ffffff'
+      : props.variant === 'success'
+      ? '#ffffff'
+      : props.variant === 'info'
+      ? '#ffffff'
+      : props.variant === 'warning'
+      ? '#ffffff'
+      : props.variant === 'danger'
+      ? 'rgba(237, 0, 0, 1);'
+      : '#212529'};
+`;
+
+const Button = ({ type, variant, className, size, id, onClick, children }) => {
+  return (
+    <ButtonComponent
+      type={type ? type : 'button'}
+      className={className ? `btn-component ${className}` : 'btn-component'}
+      id={id}
+      onClick={onClick}
+      size={size}
+      variant={variant}
+    >
+      {children}
+    </ButtonComponent>
+  );
+};
+
+export default Button;
diff --git a/src/Buttons-pushed/Components/styles.css b/src/Buttons-pushed/Components/styles.css
new file mode 100644
index 0000000..534f5c3
--- /dev/null
+++ b/src/Buttons-pushed/Components/styles.css
@@ -0,0 +1,43 @@
+/* styles.css */
+
+.button {
+   padding: 10px 15px;
+   border: none;
+   cursor: pointer;
+   border-radius: 5px;
+   font-size: 16px;
+   margin: 5px;
+ }
+ 
+ /* Button Styles */
+ .button.blue {
+   background-color: blue;
+   color: white;
+ }
+ 
+ .button.clear-white-blue {
+   background-color: #ffffff;
+   color: blue;
+ }
+ 
+ .button.white-with-border-blue {
+   background-color: #ffffff;
+   color: blue;
+   border: 2px solid blue;
+ }
+ 
+ .button.red {
+   background-color: red;
+   color: white;
+ }
+ 
+ .button.green {
+   background-color: green;
+   color: white;
+ }
+ 
+ .button.yellow {
+   background-color: yellow;
+   color: black;
+ }
+ 
\ No newline at end of file