From 03ff978f7b22cf2db8093a02c1717bf75b053c1c Mon Sep 17 00:00:00 2001 From: supriyahatele Date: Wed, 21 Feb 2024 21:42:47 +0530 Subject: [PATCH 1/2] day2 --- index.html | 1 + src/App.jsx | 5 ++- src/components/ConfirmPage.jsx | 61 ++++++++++++++++++++++++++++++++++ 3 files changed, 66 insertions(+), 1 deletion(-) create mode 100644 src/components/ConfirmPage.jsx diff --git a/index.html b/index.html index 0c589ec..88a6d26 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ Vite + React +
diff --git a/src/App.jsx b/src/App.jsx index ba24e66..3392368 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,13 +1,16 @@ import './App.css' +import ConfirmPage from './components/ConfirmPage' function App() { return (
- +
) } export default App + + diff --git a/src/components/ConfirmPage.jsx b/src/components/ConfirmPage.jsx new file mode 100644 index 0000000..507735d --- /dev/null +++ b/src/components/ConfirmPage.jsx @@ -0,0 +1,61 @@ +import React from 'react' + +function ConfirmPage() { + return ( +
+

navbar

+
+
+ + Confirm and pay +
+

Your trip

+
+

Dates

+

4-9 Mar

+
+
+
+
+
+

Pay with

+
+ mstcrd + + + +
+ + +
+
+

Required for your trip

+
+

Phone nmber

+ +
+

Add and confirm your phone number to get trip updates.

+
+

Cancellation policy

+

Cancel before 26 Feb for a partial refund. After that, the reservation is non-refundable

+ Learn more +
+

Ground rules

+

We ask every guest to remember a few simple things about what makes a great guest.

+ +
+

By selecting the button below, I agree to the Host's House Rules, Ground rules for guests, Airbnb's Rebooking and Refund Policy and that Airbnb can charge my payment method if I’m responsible for damage.

+ + +
+ ) +} + +export default ConfirmPage \ No newline at end of file From 7f11ec402c8fee383999d9e7499fab5fcd1477a3 Mon Sep 17 00:00:00 2001 From: supriyahatele Date: Thu, 22 Feb 2024 21:40:42 +0530 Subject: [PATCH 2/2] update:taiwind added to the confirmPage --- package-lock.json | 77 +++++++++++++++++++++++++++++ package.json | 1 + src/components/ConfirmPage.jsx | 89 ++++++++++++++++++++++++++-------- tailwind.config.js | 2 +- 4 files changed, 148 insertions(+), 21 deletions(-) diff --git a/package-lock.json b/package-lock.json index cbbc741..d2ef3d2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "redux-thunk": "^3.1.0" }, "devDependencies": { + "@tailwindcss/typography": "^0.5.10", "@types/react": "^18.2.55", "@types/react-dom": "^18.2.19", "@vitejs/plugin-react": "^4.2.1", @@ -1177,6 +1178,34 @@ "win32" ] }, + "node_modules/@tailwindcss/typography": { + "version": "0.5.10", + "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.10.tgz", + "integrity": "sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw==", + "dev": true, + "dependencies": { + "lodash.castarray": "^4.4.0", + "lodash.isplainobject": "^4.0.6", + "lodash.merge": "^4.6.2", + "postcss-selector-parser": "6.0.10" + }, + "peerDependencies": { + "tailwindcss": ">=3.0.0 || insiders" + } + }, + "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": { + "version": "6.0.10", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz", + "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==", + "dev": true, + "dependencies": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -3439,6 +3468,18 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lodash.castarray": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz", + "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==", + "dev": true + }, + "node_modules/lodash.isplainobject": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz", + "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==", + "dev": true + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -6047,6 +6088,30 @@ "dev": true, "optional": true }, + "@tailwindcss/typography": { + "version": "0.5.10", + "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.10.tgz", + "integrity": "sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw==", + "dev": true, + "requires": { + "lodash.castarray": "^4.4.0", + "lodash.isplainobject": "^4.0.6", + "lodash.merge": "^4.6.2", + "postcss-selector-parser": "6.0.10" + }, + "dependencies": { + "postcss-selector-parser": { + "version": "6.0.10", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz", + "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==", + "dev": true, + "requires": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + } + } + } + }, "@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -7690,6 +7755,18 @@ "p-locate": "^5.0.0" } }, + "lodash.castarray": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz", + "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==", + "dev": true + }, + "lodash.isplainobject": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz", + "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==", + "dev": true + }, "lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", diff --git a/package.json b/package.json index b58defd..f662234 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "redux-thunk": "^3.1.0" }, "devDependencies": { + "@tailwindcss/typography": "^0.5.10", "@types/react": "^18.2.55", "@types/react-dom": "^18.2.19", "@vitejs/plugin-react": "^4.2.1", diff --git a/src/components/ConfirmPage.jsx b/src/components/ConfirmPage.jsx index 507735d..d9e700c 100644 --- a/src/components/ConfirmPage.jsx +++ b/src/components/ConfirmPage.jsx @@ -2,37 +2,51 @@ import React from 'react' function ConfirmPage() { return ( -
-

navbar

-
-
+
+ +
+
+
- Confirm and pay -
-

Your trip

+ Confirm and pay +
+
+

Your trip

+
+
+

Dates

+

4-9 Mar

+
+ +
-

Dates

-

4-9 Mar

+

Guests

-
-
-

Pay with

-
- mstcrd - - -
+ +
+
+

Pay with

+
+ mstcrd + + + +
+
+ +
- +
+ +
-

Required for your trip

Phone nmber

@@ -53,8 +67,43 @@ function ConfirmPage() {

By selecting the button below, I agree to the Host's House Rules, Ground rules for guests, Airbnb's Rebooking and Refund Policy and that Airbnb can charge my payment method if I’m responsible for damage.

+
+
+
+
+ +

Noble room into the ...

+

Room in...

+

4.88 (173)

+
+
+

Price details

+
+

₹3,764.9 x 5 nights

+

₹18,824.5

+
+
+

Cleaning fee

+

₹1,792.81

+
+
+

Airbnb service fee

+

₹2,910.62

+
+
+

Taxes

+

₹1,030.86

+
+
+
+
+

Total (INR)

+

₹24,558.79

+
+
+ ) } diff --git a/tailwind.config.js b/tailwind.config.js index bd1bc7b..11ffb5d 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,5 +6,5 @@ export default { theme: { extend: {}, }, - plugins: [], + plugins: [ require('@tailwindcss/typography')], } \ No newline at end of file