From d340b209df23e9bef3677fe3299fd8781eb7e14b Mon Sep 17 00:00:00 2001
From: Sreenima05-09-03 <131434989+Sreenima05-09-03@users.noreply.github.com>
Date: Thu, 26 Sep 2024 18:50:47 +0530
Subject: [PATCH 01/12] Create boxcolor.css

---
 components/boxcolor/boxcolor.css | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 components/boxcolor/boxcolor.css

diff --git a/components/boxcolor/boxcolor.css b/components/boxcolor/boxcolor.css
new file mode 100644
index 0000000..afe40c8
--- /dev/null
+++ b/components/boxcolor/boxcolor.css
@@ -0,0 +1,10 @@
+.cbox{
+    margin:10px;
+    padding:30px;
+    text-align: center;
+    border:2px solid #000000;
+    height: 100px;
+    font-weight:500;
+    font-size: xx-large;
+    display: flex;
+}

From f73af4c584427c6573b34741abcea65f894caa2f Mon Sep 17 00:00:00 2001
From: Sreenima05-09-03 <131434989+Sreenima05-09-03@users.noreply.github.com>
Date: Thu, 26 Sep 2024 18:51:27 +0530
Subject: [PATCH 02/12] Create boxcolor.jsx

---
 components/boxcolor/boxcolor.jsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 components/boxcolor/boxcolor.jsx

diff --git a/components/boxcolor/boxcolor.jsx b/components/boxcolor/boxcolor.jsx
new file mode 100644
index 0000000..a42a2a5
--- /dev/null
+++ b/components/boxcolor/boxcolor.jsx
@@ -0,0 +1,15 @@
+import "./BoxColor.css"
+function BoxColor(props)
+{
+    const toHex = (number) => {
+        let hex = number.toString(16);
+        return hex.length === 1 ? "0" + hex : hex;
+    };
+    let color='#'+(toHex(props.r))+(toHex(props.g))+(toHex(props.b))
+    return <div className='cbox' style={{backgroundColor:color}}>
+          <p>rgb({props.r},{props.g},{props.b})</p>
+          <p>{color}</p>
+    </div>
+}
+
+export default BoxColor

From aac90dc4c7763c2825072bd2298dd9d3cc517537 Mon Sep 17 00:00:00 2001
From: Sreenima05-09-03 <131434989+Sreenima05-09-03@users.noreply.github.com>
Date: Thu, 26 Sep 2024 18:52:52 +0530
Subject: [PATCH 03/12] Create carousel.css

---
 components/carousel/carousel.css | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 components/carousel/carousel.css

diff --git a/components/carousel/carousel.css b/components/carousel/carousel.css
new file mode 100644
index 0000000..15e706a
--- /dev/null
+++ b/components/carousel/carousel.css
@@ -0,0 +1,12 @@
+.carousel{
+    display:flex;
+    width:100%;
+    justify-content:center;
+    align-items:center;
+}
+.carousel button{
+    padding:10px 15px;
+}
+.carousel img{
+    margin:10px;
+}

From 02628b7203a67da724144e7bd664b89860048c36 Mon Sep 17 00:00:00 2001
From: Sreenima05-09-03 <131434989+Sreenima05-09-03@users.noreply.github.com>
Date: Thu, 26 Sep 2024 18:53:37 +0530
Subject: [PATCH 04/12] Create carousel.jsx

---
 components/carousel/carousel.jsx | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 components/carousel/carousel.jsx

diff --git a/components/carousel/carousel.jsx b/components/carousel/carousel.jsx
new file mode 100644
index 0000000..454a977
--- /dev/null
+++ b/components/carousel/carousel.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import './Carousel.css'
+
+function Carousel(props)
+{
+    let arr=props.images
+    let len=arr.length
+    const[img_num , setImg]=React.useState(2)
+    function left()
+    {
+        if(img_num===0)
+        setImg(len-1)
+        else
+        setImg((img_num-1)%len)
+    }
+    function right()
+    {
+        setImg((img_num+1)%len)
+    }
+    return <div className='carousel'>
+        <button onClick={left}>Left</button>
+        <img src={arr[img_num]} alt='pic' style={{width:'300px'}}/>
+        <button onClick={right}>Right</button>
+    </div>
+}
+export default Carousel

From 74ab62206281b981e5419fe6b90a055ea5b75ede Mon Sep 17 00:00:00 2001
From: Sreenima05-09-03 <131434989+Sreenima05-09-03@users.noreply.github.com>
Date: Thu, 26 Sep 2024 18:54:27 +0530
Subject: [PATCH 05/12] Create clickable.jsx

---
 components/carousel/clickable.jsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 components/carousel/clickable.jsx

diff --git a/components/carousel/clickable.jsx b/components/carousel/clickable.jsx
new file mode 100644
index 0000000..728c7fc
--- /dev/null
+++ b/components/carousel/clickable.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+function Clickable(props)
+{
+    const [img,putGlasses]=React.useState(props.img)
+    function glasses()
+    {
+        putGlasses(props.imgClicked)
+    }
+    return  <div> 
+    <img src={img} alt='pic' onClick={glasses} style={{width:'150px'}}/>
+    </div>
+}
+
+export default Clickable

From 0527912eaac2f5b84d978f457af0a09401979247 Mon Sep 17 00:00:00 2001
From: Sreenima05-09-03 <131434989+Sreenima05-09-03@users.noreply.github.com>
Date: Thu, 26 Sep 2024 18:55:34 +0530
Subject: [PATCH 06/12] Create creditcard.css

---
 components/creditcard/creditcard.css | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 components/creditcard/creditcard.css

diff --git a/components/creditcard/creditcard.css b/components/creditcard/creditcard.css
new file mode 100644
index 0000000..b891e0a
--- /dev/null
+++ b/components/creditcard/creditcard.css
@@ -0,0 +1,16 @@
+.credit{
+    width:300px;
+    border-radius: 10px;
+    padding:18px;
+    height: 150px;
+
+    margin:5px;
+    display: inline-block;
+}
+.credit > div{
+    text-align: right;
+}
+.credit img{
+    width:50px;
+
+}

From 00763a140a16847a8ec720e98fa2125922d06f22 Mon Sep 17 00:00:00 2001
From: Sreenima05-09-03 <131434989+Sreenima05-09-03@users.noreply.github.com>
Date: Thu, 26 Sep 2024 18:56:07 +0530
Subject: [PATCH 07/12] Create creditcard.jsx

---
 components/creditcard/creditcard.jsx | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 components/creditcard/creditcard.jsx

diff --git a/components/creditcard/creditcard.jsx b/components/creditcard/creditcard.jsx
new file mode 100644
index 0000000..07af554
--- /dev/null
+++ b/components/creditcard/creditcard.jsx
@@ -0,0 +1,23 @@
+import './CreditCard.css'
+import visa from '../../assets/images/visa.png'
+import mastercard from '../../assets/images/mastercard.png'
+function CreditCard(props)
+{
+    const img = props.type === 'Visa' ? visa : mastercard;
+    let mon=props.expirationMonth
+    let yr=props.expirationYear%100
+    let ex=''
+    if(mon<10)
+      ex='0'+mon+'/'+yr
+
+    return <div className='credit' style={{backgroundColor: props.bgColor,color:props.color}}>
+    <div>
+        <img src={img} alt='pic' />
+        </div>
+        <h1>.... .... .... {props.number.slice(12)}</h1>
+        <p>Expires {ex} {props.bank}</p>
+        <p>{props.owner}</p>
+    </div>;
+}
+
+export default CreditCard;

From ad5952b327290f98669037753e3d813416746f73 Mon Sep 17 00:00:00 2001
From: Sreenima05-09-03 <131434989+Sreenima05-09-03@users.noreply.github.com>
Date: Thu, 26 Sep 2024 18:56:48 +0530
Subject: [PATCH 08/12] Create dice.jsx

---
 components/creditcard/dice.jsx | 46 ++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 components/creditcard/dice.jsx

diff --git a/components/creditcard/dice.jsx b/components/creditcard/dice.jsx
new file mode 100644
index 0000000..5c93b78
--- /dev/null
+++ b/components/creditcard/dice.jsx
@@ -0,0 +1,46 @@
+import dice0 from '../assets/images/dice-empty.png'
+import dice1 from '../assets/images/dice1.png'
+import dice2 from '../assets/images/dice2.png'
+import dice3 from '../assets/images/dice3.png'
+import dice4 from '../assets/images/dice4.png'
+import dice5 from '../assets/images/dice5.png'
+import dice6 from '../assets/images/dice6.png'
+
+import React from 'react';
+
+function Dice()
+{
+    const [img, throwDice]=React.useState(dice0)
+    setInterval(change,1000)
+    function change()
+    {
+        let n=parseInt(Math.random()*6)
+        switch(n)
+        {
+            case 0:
+                throwDice(dice0)
+                break;
+            case 1:
+                throwDice(dice1)
+                break;
+            case 2:
+                throwDice(dice2)
+                break;
+            case 3:
+                throwDice(dice3)
+                break;
+            case 4:
+                throwDice(dice4)
+                break;
+            case 5:
+                throwDice(dice5)
+                break;
+            default :
+                throwDice(dice6)
+                break;
+        }
+    }
+    return <div> <img src={img} alt='dice' style={{width:'100px'}}/> </div>
+}
+
+export default Dice 

From 3b447cbf3d36ac7e7bb1834f40f618da2b985211 Mon Sep 17 00:00:00 2001
From: Sreenima05-09-03 <131434989+Sreenima05-09-03@users.noreply.github.com>
Date: Thu, 26 Sep 2024 18:57:44 +0530
Subject: [PATCH 09/12] Create drivercard.css

---
 components/drivercard/drivercard.css | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 components/drivercard/drivercard.css

diff --git a/components/drivercard/drivercard.css b/components/drivercard/drivercard.css
new file mode 100644
index 0000000..14dc466
--- /dev/null
+++ b/components/drivercard/drivercard.css
@@ -0,0 +1,17 @@
+.driver{
+    display: flex;
+    width:100%;
+    border-radius: 10px;
+    background-color: rgb(68, 118, 255);
+    justify-content: center;
+    align-items: center;
+    padding:25px;
+    margin:10px;
+    color: white;
+}
+.driver img{
+    width:100px;
+    height:100px;
+    border-radius: 50%;
+    margin-right: 15px;
+}

From 8b5c16f92152126ba18ccab008d49f469dfd4595 Mon Sep 17 00:00:00 2001
From: Sreenima05-09-03 <131434989+Sreenima05-09-03@users.noreply.github.com>
Date: Thu, 26 Sep 2024 18:58:22 +0530
Subject: [PATCH 10/12] Create drivercard.jsx

---
 components/drivercard/drivercard.jsx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 components/drivercard/drivercard.jsx

diff --git a/components/drivercard/drivercard.jsx b/components/drivercard/drivercard.jsx
new file mode 100644
index 0000000..e2a4d98
--- /dev/null
+++ b/components/drivercard/drivercard.jsx
@@ -0,0 +1,17 @@
+import './DriverCard.css'
+import Rating from '../Rating/Rating';
+function DriverCard(props)
+{
+return <div className='driver'>
+    <div>
+    <img src={props.img} alt='pic' />
+</div>
+<div>
+    <h1>{props.name}</h1>
+    <Rating>{props.rating}</Rating>
+    <p>{props.car.model}-
+    {props.car.licensePlate}</p>
+</div>
+
+</div>
+}

From f4a3a537ca25f158f4d5081aebd06a37c30b4d44 Mon Sep 17 00:00:00 2001
From: Sreenima05-09-03 <131434989+Sreenima05-09-03@users.noreply.github.com>
Date: Thu, 26 Sep 2024 18:59:08 +0530
Subject: [PATCH 11/12] Create greetings.css

---
 components/greetings/greetings.css | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 components/greetings/greetings.css

diff --git a/components/greetings/greetings.css b/components/greetings/greetings.css
new file mode 100644
index 0000000..9e65a43
--- /dev/null
+++ b/components/greetings/greetings.css
@@ -0,0 +1,7 @@
+.greeting{
+    border: 2px solid black;
+    font-size: 30px;
+    font-weight: 500;
+    margin: 10px;
+    padding: 5px;
+ }

From 36e73a9ed74a6b71401933991e27d11433eb8883 Mon Sep 17 00:00:00 2001
From: Sreenima05-09-03 <131434989+Sreenima05-09-03@users.noreply.github.com>
Date: Thu, 26 Sep 2024 18:59:35 +0530
Subject: [PATCH 12/12] Create greetings.jsx

---
 components/greetings/greetings.jsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 components/greetings/greetings.jsx

diff --git a/components/greetings/greetings.jsx b/components/greetings/greetings.jsx
new file mode 100644
index 0000000..6c5af99
--- /dev/null
+++ b/components/greetings/greetings.jsx
@@ -0,0 +1,15 @@
+import "./Greetings.css";
+const Greetings = (props) => {
+    let text;
+    if(props.lang === "de"){
+        text = "Hallo";
+    } else if(props.lang === "fr" || props.lang === "es"){
+        text = "Bonjour";
+    }
+    return(
+        <>
+            <h3 className="greetings">{text} {props.children}</h3>
+        </>
+    );
+};
+export default Greetings;