London_10-Saliha_Popal/ cyf-hotel-react

CYF-HOTEL-REACT/src/CustomerProfile.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+const CustomerProfile =(props) =>{
+  // if (props.customersProfile.vip === true) 
+  return (
+    <div>
+     <p>Customer ID: { props.customersProfile.id}</p>
+     <p>Customer Email: { props.customersProfile.email}</p>
+     {props.customersProfile.vip && (<p>Customer Phone Number: { props.customersProfile.phoneNumber}</p>)}
+    </div>
+  )
+}
+
+export default CustomerProfile;

CYF-HOTEL-REACT/src/Loading.jsx

@@ -0,0 +1,30 @@
+import React, {useState} from 'react'
+import ClipLoader from "react-spinners/ClipLoader";
+
+const override = {
+  display: "block",
+  margin: "0 auto",
+  borderColor: "red",
+};
+
+function Loading() {
+
+  let [loading, setLoading] = useState(true);
+  let [color, setColor] = useState("#ffffff");
+
+  return (
+    <div className="sweet-loading">
+      <ClipLoader
+        color={color}
+        loading={loading}
+        cssOverride={override}
+        size={150}
+        aria-label="Loading Spinner"
+        data-testid="loader"
+      />
+    </div>
+    )
+}
+
+export default Loading;
+

CYF-HOTEL-REACT/src/Order.js

@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+import RestaurantButton from './RestaurantButton';
+
+function Order({orderType}) {
+  const [Orders, setOrders] = useState(0);
+
+  const orderOne = () => {
+    setOrders(Orders => Orders + 1);
+  };
+
+  return (
+    <li
+    className='li'>
+      {orderType}: {Orders} <RestaurantButton handleClick={orderOne} />
+    </li>
+  );
+}
+
+export default Order;

CYF-HOTEL-REACT/src/RestaurantButton.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+function RestaurantButton({ handleClick }) {
+  return <button className='add' onClick={handleClick}>Add</button>;
+}
+
+export default RestaurantButton;
+
+

CYF-HOTEL-REACT/src/Test.js

@@ -0,0 +1,35 @@
+import { useState } from "react";
+
+const Test= ()=> {
+
+
+const [showbutton,setShowbutton]= useState(true);
+const [showalert,setShowalert]= useState(false);
+
+const Alert =()=>{
+    return(
+    <div    className="alert alert-warning alert-dismissible fade show" role="alert">
+    <p>this is my alert </p>
+    <button  className="btn-close" aria-label="Close" onClick={handleclick}>  close   </button>
+    </div>)
+}
+
+const handleclick =()=> {  
+
+    setShowbutton(!showbutton);
+    setShowalert(!showalert);
+
+     };
+
+    return(
+ <>   
+{ 
+showbutton ? (<button className="btn btn-primary" onClick= {handleclick}>test </button>  ): ( <Alert/>  )
+ }
+
+</>
+    );
+
+}
+
+export default Test;