diff --git a/package-lock.json b/package-lock.json index 1349153..d79848d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -61,6 +61,7 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.21.8.tgz", "integrity": "sha512-YeM22Sondbo523Sz0+CirSPnbj9bG3P0CdHcBZdqUuaeOaYEFbOLoGU7lebvGP6P5J/WE9wOn7u7C4J9HvS1xQ==", "dev": true, + "peer": true, "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.21.4", @@ -964,6 +965,7 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz", "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==", "dev": true, + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -1129,6 +1131,7 @@ "url": "https://tidelift.com/funding/github/npm/browserslist" } ], + "peer": true, "dependencies": { "caniuse-lite": "^1.0.30001449", "electron-to-chromium": "^1.4.284", @@ -1450,6 +1453,7 @@ "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.41.0.tgz", "integrity": "sha512-WQDQpzGBOP5IrXPo4Hc0814r4/v2rrIsB0rhT7jtunIalgg6gYXWhRMOejVO8yH21T/FGaxjmFjBMNqcIlmH1Q==", "dev": true, + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.4.0", @@ -2837,6 +2841,7 @@ "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "peer": true, "dependencies": { "loose-envify": "^1.1.0" }, @@ -3277,6 +3282,7 @@ "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.8.tgz", "integrity": "sha512-uYB8PwN7hbMrf4j1xzGDk/lqjsZvCDbt/JC5dyfxc19Pg8kRm14LinK/uq+HSLNswZEoKmweGdtpbnxRtrAXiQ==", "dev": true, + "peer": true, "dependencies": { "esbuild": "^0.17.5", "postcss": "^8.4.23", @@ -3436,6 +3442,7 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.21.8.tgz", "integrity": "sha512-YeM22Sondbo523Sz0+CirSPnbj9bG3P0CdHcBZdqUuaeOaYEFbOLoGU7lebvGP6P5J/WE9wOn7u7C4J9HvS1xQ==", "dev": true, + "peer": true, "requires": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.21.4", @@ -4004,7 +4011,8 @@ "version": "8.8.2", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz", "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==", - "dev": true + "dev": true, + "peer": true }, "acorn-jsx": { "version": "5.3.2", @@ -4121,6 +4129,7 @@ "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz", "integrity": "sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==", "dev": true, + "peer": true, "requires": { "caniuse-lite": "^1.0.30001449", "electron-to-chromium": "^1.4.284", @@ -4365,6 +4374,7 @@ "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.41.0.tgz", "integrity": "sha512-WQDQpzGBOP5IrXPo4Hc0814r4/v2rrIsB0rhT7jtunIalgg6gYXWhRMOejVO8yH21T/FGaxjmFjBMNqcIlmH1Q==", "dev": true, + "peer": true, "requires": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.4.0", @@ -5342,6 +5352,7 @@ "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "peer": true, "requires": { "loose-envify": "^1.1.0" } @@ -5638,6 +5649,7 @@ "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.8.tgz", "integrity": "sha512-uYB8PwN7hbMrf4j1xzGDk/lqjsZvCDbt/JC5dyfxc19Pg8kRm14LinK/uq+HSLNswZEoKmweGdtpbnxRtrAXiQ==", "dev": true, + "peer": true, "requires": { "esbuild": "^0.17.5", "fsevents": "~2.3.2", diff --git a/src/App.jsx b/src/App.jsx index 98d0f49..9b79731 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,10 +1,52 @@ import "./App.css"; +import IdCard from "./components/IdCard"; +import Greetings from "./components/greetings"; +import BoxColor from "./components/BoxColor"; +import Random from "./components/random"; + function App() { return ( -
-

LAB | React Training

+
+ + + + + + Mariam + Aminat + Latifat + Mariam + + + + + +
+ + + + ); } diff --git a/src/components/BoxColor.jsx b/src/components/BoxColor.jsx new file mode 100644 index 0000000..b8d9e16 --- /dev/null +++ b/src/components/BoxColor.jsx @@ -0,0 +1,18 @@ +function BoxColor({ r, g, b }) { +const divStyle ={ + bachgroundColor: `rgb(${r}, ${g}, ${b})`, + color: 'black', + padding: '20px', + margin: '10px 0', + border: '1px solid #ccc' +}; + + return ( +
+ rgb({r}, {g}, {b}) +
+ ); +} + + +export default BoxColor; \ No newline at end of file diff --git a/src/components/Greetings.jsx b/src/components/Greetings.jsx new file mode 100644 index 0000000..e03c5cc --- /dev/null +++ b/src/components/Greetings.jsx @@ -0,0 +1,23 @@ +function Greetings({ lang, children }) { + let Greeting; + + if (lang === "de") { + greeting = "Hallo"; + } else if (lang === "fr") { + greeting = "Bonjour"; + } else if (lang === "pt") { + greeting = "Ola"; + } else if (lang === "es") { + greeting = "Hola"; + } else { + greeting = "Hello"; + } + + return ( +

+ {Greeting} {children} +

+ ); + } + + export default Greetings; \ No newline at end of file diff --git a/src/components/IdCard.jsx b/src/components/IdCard.jsx new file mode 100644 index 0000000..239b297 --- /dev/null +++ b/src/components/IdCard.jsx @@ -0,0 +1,15 @@ +function IdCard({ lastName, firstName, gender, height, birth, picture}) { + return ( +
+ {`${firstName} + +

First Name: {firstName}

+

Last Name: {lastName}

+

Gender: {gender}

+

Height: {height} cm

+

Birthday: {birth.toDateString( )}

+
+ ); +} + +export default IdCard; diff --git a/src/components/Random.jsx b/src/components/Random.jsx new file mode 100644 index 0000000..620e5a3 --- /dev/null +++ b/src/components/Random.jsx @@ -0,0 +1,12 @@ +function Random({ min, max }) { +const randomNumber = +Math.floor(Math.random() * (max - min + 1)) + min; + +return ( +

+ Random value between {min} and {max} → {randomNumber} +

+); +} + +export default Random; \ No newline at end of file diff --git a/vite.config.js.timestamp-1772319140734-440a74ce5bf6e8.mjs b/vite.config.js.timestamp-1772319140734-440a74ce5bf6e8.mjs new file mode 100644 index 0000000..c70a76d --- /dev/null +++ b/vite.config.js.timestamp-1772319140734-440a74ce5bf6e8.mjs @@ -0,0 +1,10 @@ +// vite.config.js +import { defineConfig } from "file:///C:/Users/maria/lab-react-props-training/node_modules/vite/dist/node/index.js"; +import react from "file:///C:/Users/maria/lab-react-props-training/node_modules/@vitejs/plugin-react/dist/index.mjs"; +var vite_config_default = defineConfig({ + plugins: [react()] +}); +export { + vite_config_default as default +}; +//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcuanMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFxtYXJpYVxcXFxsYWItcmVhY3QtcHJvcHMtdHJhaW5pbmdcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIkM6XFxcXFVzZXJzXFxcXG1hcmlhXFxcXGxhYi1yZWFjdC1wcm9wcy10cmFpbmluZ1xcXFx2aXRlLmNvbmZpZy5qc1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vQzovVXNlcnMvbWFyaWEvbGFiLXJlYWN0LXByb3BzLXRyYWluaW5nL3ZpdGUuY29uZmlnLmpzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcclxuaW1wb3J0IHJlYWN0IGZyb20gJ0B2aXRlanMvcGx1Z2luLXJlYWN0J1xyXG5cclxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cclxuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHtcclxuICBwbHVnaW5zOiBbcmVhY3QoKV0sXHJcbn0pXHJcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFBK1MsU0FBUyxvQkFBb0I7QUFDNVUsT0FBTyxXQUFXO0FBR2xCLElBQU8sc0JBQVEsYUFBYTtBQUFBLEVBQzFCLFNBQVMsQ0FBQyxNQUFNLENBQUM7QUFDbkIsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K