- Edit src/App.js and save to reload.
-
+ Francois
+ Espanoil
+ English
+
+
- );
+ )
}
-export default App;
+export default App
\ No newline at end of file
diff --git a/src/components/Greetings.js b/src/components/Greetings.js
new file mode 100644
index 0000000..82a7d14
--- /dev/null
+++ b/src/components/Greetings.js
@@ -0,0 +1,30 @@
+import React from 'react';
+
+const Greetings = ({ lang, children }) => {
+ // Define greeting text based on the `lang` prop
+ let greeting;
+ switch (lang) {
+ case 'de':
+ greeting = 'Hallo';
+ break;
+ case 'en':
+ greeting = 'Hello';
+ break;
+ case 'es':
+ greeting = 'Hola';
+ break;
+ case 'fr':
+ greeting = 'Bonjour';
+ break;
+ default:
+ greeting = 'Hello';
+ }
+
+ return (
+
+ {greeting} {children}
+
+ );
+};
+
+export default Greetings;
diff --git a/src/components/IdCard.js b/src/components/IdCard.js
new file mode 100644
index 0000000..e78369b
--- /dev/null
+++ b/src/components/IdCard.js
@@ -0,0 +1,21 @@
+import React from 'react'
+
+const IdCard = ({ firstName, lastName, gender, height, birth, image }) => {
+ return (
+
+
+ );
+ }
+
+
+export default IdCard
\ No newline at end of file
diff --git a/src/components/Random.js b/src/components/Random.js
new file mode 100644
index 0000000..0e4d654
--- /dev/null
+++ b/src/components/Random.js
@@ -0,0 +1,12 @@
+import React from 'react'
+
+const Random = ({min,max}) => {
+ const rand=Math.floor(Math.random() * (max - min + 1)) + min;
+ return (
+
+ 
+
+
+
+ First Name: {firstName}
+Last Name: {lastName}
+Gender: {gender}
+Height: {height}
+Birth: {birth.toDateString()}
+
+
+ )
+}
+
+export default Random
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index ec2585e..bd6213e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1,3 @@
-body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..e5b64f3
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: ["./src/**/*.{html,js}"],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+}
+
From 51b69eda25dda63c446d7442b45bce0cb8a3175e Mon Sep 17 00:00:00 2001
From: Muhammad Irshad <85778819+Irshadmdk19@users.noreply.github.com>
Date: Tue, 19 Nov 2024 07:18:48 +0530
Subject: [PATCH 2/3] Interation 4 and 5
---
src/App.js | 17 +++++++++++++++++
src/components/BoxColor.js | 15 +++++++++++++++
src/components/CreditCard.js | 33 +++++++++++++++++++++++++++++++++
3 files changed, 65 insertions(+)
create mode 100644 src/components/BoxColor.js
create mode 100644 src/components/CreditCard.js
diff --git a/src/App.js b/src/App.js
index d428af4..a4f15f2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,6 +2,8 @@ import React from 'react'
import IdCard from './components/IdCard'
import Greetings from './components/Greetings'
import Random from './components/Random'
+import BoxColor from './components/BoxColor'
+import CreditCard from './components/CreditCard'
const App = () => {
return (
@@ -27,6 +29,21 @@ const App = () => {