Updated the front end upto alright
This commit is contained in:
viswasri
parent
a361ab2c25
commit
5901f56eac
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema.json",
|
||||
"style": "new-york",
|
||||
"rsc": false,
|
||||
"tsx": false,
|
||||
"tailwind": {
|
||||
"config": "tailwind.config.js",
|
||||
"css": "src/index.css",
|
||||
"baseColor": "neutral",
|
||||
"cssVariables": true,
|
||||
"prefix": ""
|
||||
},
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils",
|
||||
"ui": "@/components/ui",
|
||||
"lib": "@/lib",
|
||||
"hooks": "@/hooks"
|
||||
},
|
||||
"iconLibrary": "lucide"
|
||||
}
|
||||
|
|
@ -13,24 +13,33 @@
|
|||
"@mui/icons-material": "^6.1.10",
|
||||
"@mui/material": "^6.1.10",
|
||||
"@mui/styles": "^6.1.10",
|
||||
"@radix-ui/react-slot": "^1.1.2",
|
||||
"bootstrap": "^5.3.3",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"lucide-react": "^0.484.0",
|
||||
"react": "^18.3.1",
|
||||
"react-bootstrap": "^2.10.7",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-icons": "^5.5.0",
|
||||
"react-router-dom": "^7.0.2",
|
||||
"survey-react-ui": "^1.12.13"
|
||||
"react-router-dom": "^7.4.0",
|
||||
"survey-react-ui": "^1.12.13",
|
||||
"tailwind-merge": "^3.0.2",
|
||||
"tw-animate-css": "^1.2.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.15.0",
|
||||
"@types/react": "^18.3.12",
|
||||
"@types/react-dom": "^18.3.1",
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"eslint": "^9.15.0",
|
||||
"eslint-plugin-react": "^7.37.2",
|
||||
"eslint-plugin-react-hooks": "^5.0.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.14",
|
||||
"globals": "^15.12.0",
|
||||
"postcss": "^8.5.3",
|
||||
"tailwindcss": "^4.0.17",
|
||||
"vite": "^6.0.1"
|
||||
}
|
||||
},
|
||||
|
|
@ -1345,6 +1354,37 @@
|
|||
"url": "https://opencollective.com/popperjs"
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-compose-refs": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
|
||||
"integrity": "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==",
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-slot": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
|
||||
"integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-compose-refs": "1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@react-aria/ssr": {
|
||||
"version": "3.9.7",
|
||||
"resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.7.tgz",
|
||||
|
|
@ -1957,6 +1997,43 @@
|
|||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/autoprefixer": {
|
||||
"version": "10.4.21",
|
||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
|
||||
"integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/postcss/"
|
||||
},
|
||||
{
|
||||
"type": "tidelift",
|
||||
"url": "https://tidelift.com/funding/github/npm/autoprefixer"
|
||||
},
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"dependencies": {
|
||||
"browserslist": "^4.24.4",
|
||||
"caniuse-lite": "^1.0.30001702",
|
||||
"fraction.js": "^4.3.7",
|
||||
"normalize-range": "^0.1.2",
|
||||
"picocolors": "^1.1.1",
|
||||
"postcss-value-parser": "^4.2.0"
|
||||
},
|
||||
"bin": {
|
||||
"autoprefixer": "bin/autoprefixer"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12 || >=14"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"postcss": "^8.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/available-typed-arrays": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
|
||||
|
|
@ -2037,9 +2114,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/browserslist": {
|
||||
"version": "4.24.2",
|
||||
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.2.tgz",
|
||||
"integrity": "sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==",
|
||||
"version": "4.24.4",
|
||||
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz",
|
||||
"integrity": "sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
|
|
@ -2056,9 +2133,9 @@
|
|||
}
|
||||
],
|
||||
"dependencies": {
|
||||
"caniuse-lite": "^1.0.30001669",
|
||||
"electron-to-chromium": "^1.5.41",
|
||||
"node-releases": "^2.0.18",
|
||||
"caniuse-lite": "^1.0.30001688",
|
||||
"electron-to-chromium": "^1.5.73",
|
||||
"node-releases": "^2.0.19",
|
||||
"update-browserslist-db": "^1.1.1"
|
||||
},
|
||||
"bin": {
|
||||
|
|
@ -2096,9 +2173,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/caniuse-lite": {
|
||||
"version": "1.0.30001686",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001686.tgz",
|
||||
"integrity": "sha512-Y7deg0Aergpa24M3qLC5xjNklnKnhsmSyR/V89dLZ1n0ucJIFNs7PgR2Yfa/Zf6W79SbBicgtGxZr2juHkEUIA==",
|
||||
"version": "1.0.30001707",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001707.tgz",
|
||||
"integrity": "sha512-3qtRjw/HQSMlDWf+X79N206fepf4SOOU6SQLMaq/0KkZLmSjPxAkBOQQ+FxbHKfHmYLZFfdWsO3KA90ceHPSnw==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
|
|
@ -2131,6 +2208,17 @@
|
|||
"url": "https://github.com/chalk/chalk?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/class-variance-authority": {
|
||||
"version": "0.7.1",
|
||||
"resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
|
||||
"integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
|
||||
"dependencies": {
|
||||
"clsx": "^2.1.1"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://polar.sh/cva"
|
||||
}
|
||||
},
|
||||
"node_modules/classnames": {
|
||||
"version": "2.5.1",
|
||||
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
|
||||
|
|
@ -2370,9 +2458,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.5.68",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.68.tgz",
|
||||
"integrity": "sha512-FgMdJlma0OzUYlbrtZ4AeXjKxKPk6KT8WOP8BjcqxWtlg8qyJQjRzPJzUtUn5GBg1oQ26hFs7HOOHJMYiJRnvQ==",
|
||||
"version": "1.5.128",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.128.tgz",
|
||||
"integrity": "sha512-bo1A4HH/NS522Ws0QNFIzyPcyUUNV/yyy70Ho1xqfGYzPUme2F/xr4tlEOuM6/A538U1vDA7a4XfCd1CKRegKQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/error-ex": {
|
||||
|
|
@ -2879,6 +2967,19 @@
|
|||
"is-callable": "^1.1.3"
|
||||
}
|
||||
},
|
||||
"node_modules/fraction.js": {
|
||||
"version": "4.3.7",
|
||||
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
|
||||
"integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": "*"
|
||||
},
|
||||
"funding": {
|
||||
"type": "patreon",
|
||||
"url": "https://github.com/sponsors/rawify"
|
||||
}
|
||||
},
|
||||
"node_modules/fsevents": {
|
||||
"version": "2.3.3",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
|
||||
|
|
@ -3787,6 +3888,14 @@
|
|||
"yallist": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/lucide-react": {
|
||||
"version": "0.484.0",
|
||||
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.484.0.tgz",
|
||||
"integrity": "sha512-oZy8coK9kZzvqhSgfbGkPtTgyjpBvs3ukLgDPv14dSOZtBtboryWF5o8i3qen7QbGg7JhiJBz5mK1p8YoMZTLQ==",
|
||||
"peerDependencies": {
|
||||
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/minimatch": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
|
||||
|
|
@ -3829,11 +3938,20 @@
|
|||
"dev": true
|
||||
},
|
||||
"node_modules/node-releases": {
|
||||
"version": "2.0.18",
|
||||
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
|
||||
"integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==",
|
||||
"version": "2.0.19",
|
||||
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
|
||||
"integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/normalize-range": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
|
||||
"integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/object-assign": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||
|
|
@ -4051,9 +4169,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/postcss": {
|
||||
"version": "8.4.49",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
|
||||
"integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
|
||||
"version": "8.5.3",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
|
||||
"integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
|
|
@ -4070,7 +4188,7 @@
|
|||
}
|
||||
],
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.7",
|
||||
"nanoid": "^3.3.8",
|
||||
"picocolors": "^1.1.1",
|
||||
"source-map-js": "^1.2.1"
|
||||
},
|
||||
|
|
@ -4078,6 +4196,12 @@
|
|||
"node": "^10 || ^12 || >=14"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-value-parser": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
|
||||
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/prelude-ls": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
|
||||
|
|
@ -4199,9 +4323,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/react-router": {
|
||||
"version": "7.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.0.2.tgz",
|
||||
"integrity": "sha512-m5AcPfTRUcjwmhBzOJGEl6Y7+Crqyju0+TgTQxoS4SO+BkWbhOrcfZNq6wSWdl2BBbJbsAoBUb8ZacOFT+/JlA==",
|
||||
"version": "7.4.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.4.0.tgz",
|
||||
"integrity": "sha512-Y2g5ObjkvX3VFeVt+0CIPuYd9PpgqCslG7ASSIdN73LwA1nNWzcMLaoMRJfP3prZFI92svxFwbn7XkLJ+UPQ6A==",
|
||||
"dependencies": {
|
||||
"@types/cookie": "^0.6.0",
|
||||
"cookie": "^1.0.1",
|
||||
|
|
@ -4222,11 +4346,11 @@
|
|||
}
|
||||
},
|
||||
"node_modules/react-router-dom": {
|
||||
"version": "7.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.0.2.tgz",
|
||||
"integrity": "sha512-VJOQ+CDWFDGaWdrG12Nl+d7yHtLaurNgAQZVgaIy7/Xd+DojgmYLosFfZdGz1wpxmjJIAkAMVTKWcvkx1oggAw==",
|
||||
"version": "7.4.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.4.0.tgz",
|
||||
"integrity": "sha512-VlksBPf3n2bijPvnA7nkTsXxMAKOj+bWp4R9c3i+bnwlSOFAGOkJkKhzy/OsRkWaBMICqcAl1JDzh9ZSOze9CA==",
|
||||
"dependencies": {
|
||||
"react-router": "7.0.2"
|
||||
"react-router": "7.4.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
|
|
@ -4643,6 +4767,21 @@
|
|||
"survey-core": "1.12.13"
|
||||
}
|
||||
},
|
||||
"node_modules/tailwind-merge": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.0.2.tgz",
|
||||
"integrity": "sha512-l7z+OYZ7mu3DTqrL88RiKrKIqO3NcpEO8V/Od04bNpvk0kiIFndGEoqfuzvj4yuhRkHKjRkII2z+KS2HfPcSxw==",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/dcastil"
|
||||
}
|
||||
},
|
||||
"node_modules/tailwindcss": {
|
||||
"version": "4.0.17",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.17.tgz",
|
||||
"integrity": "sha512-OErSiGzRa6rLiOvaipsDZvLMSpsBZ4ysB4f0VKGXUrjw2jfkJRd6kjRKV2+ZmTCNvwtvgdDam5D7w6WXsdLJZw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/tiny-warning": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
|
||||
|
|
@ -4658,6 +4797,14 @@
|
|||
"resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
|
||||
"integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g=="
|
||||
},
|
||||
"node_modules/tw-animate-css": {
|
||||
"version": "1.2.5",
|
||||
"resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.2.5.tgz",
|
||||
"integrity": "sha512-ABzjfgVo+fDbhRREGL4KQZUqqdPgvc5zVrLyeW9/6mVqvaDepXc7EvedA+pYmMnIOsUAQMwcWzNvom26J2qYvQ==",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/Wombosvideo"
|
||||
}
|
||||
},
|
||||
"node_modules/type-check": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
|
||||
|
|
@ -5809,6 +5956,20 @@
|
|||
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
|
||||
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
|
||||
},
|
||||
"@radix-ui/react-compose-refs": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
|
||||
"integrity": "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==",
|
||||
"requires": {}
|
||||
},
|
||||
"@radix-ui/react-slot": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
|
||||
"integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==",
|
||||
"requires": {
|
||||
"@radix-ui/react-compose-refs": "1.1.1"
|
||||
}
|
||||
},
|
||||
"@react-aria/ssr": {
|
||||
"version": "3.9.7",
|
||||
"resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.7.tgz",
|
||||
|
|
@ -6234,6 +6395,20 @@
|
|||
"is-shared-array-buffer": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"autoprefixer": {
|
||||
"version": "10.4.21",
|
||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
|
||||
"integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"browserslist": "^4.24.4",
|
||||
"caniuse-lite": "^1.0.30001702",
|
||||
"fraction.js": "^4.3.7",
|
||||
"normalize-range": "^0.1.2",
|
||||
"picocolors": "^1.1.1",
|
||||
"postcss-value-parser": "^4.2.0"
|
||||
}
|
||||
},
|
||||
"available-typed-arrays": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
|
||||
|
|
@ -6288,14 +6463,14 @@
|
|||
}
|
||||
},
|
||||
"browserslist": {
|
||||
"version": "4.24.2",
|
||||
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.2.tgz",
|
||||
"integrity": "sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==",
|
||||
"version": "4.24.4",
|
||||
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz",
|
||||
"integrity": "sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"caniuse-lite": "^1.0.30001669",
|
||||
"electron-to-chromium": "^1.5.41",
|
||||
"node-releases": "^2.0.18",
|
||||
"caniuse-lite": "^1.0.30001688",
|
||||
"electron-to-chromium": "^1.5.73",
|
||||
"node-releases": "^2.0.19",
|
||||
"update-browserslist-db": "^1.1.1"
|
||||
}
|
||||
},
|
||||
|
|
@ -6318,9 +6493,9 @@
|
|||
"integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
|
||||
},
|
||||
"caniuse-lite": {
|
||||
"version": "1.0.30001686",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001686.tgz",
|
||||
"integrity": "sha512-Y7deg0Aergpa24M3qLC5xjNklnKnhsmSyR/V89dLZ1n0ucJIFNs7PgR2Yfa/Zf6W79SbBicgtGxZr2juHkEUIA==",
|
||||
"version": "1.0.30001707",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001707.tgz",
|
||||
"integrity": "sha512-3qtRjw/HQSMlDWf+X79N206fepf4SOOU6SQLMaq/0KkZLmSjPxAkBOQQ+FxbHKfHmYLZFfdWsO3KA90ceHPSnw==",
|
||||
"dev": true
|
||||
},
|
||||
"chalk": {
|
||||
|
|
@ -6333,6 +6508,14 @@
|
|||
"supports-color": "^7.1.0"
|
||||
}
|
||||
},
|
||||
"class-variance-authority": {
|
||||
"version": "0.7.1",
|
||||
"resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
|
||||
"integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
|
||||
"requires": {
|
||||
"clsx": "^2.1.1"
|
||||
}
|
||||
},
|
||||
"classnames": {
|
||||
"version": "2.5.1",
|
||||
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
|
||||
|
|
@ -6512,9 +6695,9 @@
|
|||
}
|
||||
},
|
||||
"electron-to-chromium": {
|
||||
"version": "1.5.68",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.68.tgz",
|
||||
"integrity": "sha512-FgMdJlma0OzUYlbrtZ4AeXjKxKPk6KT8WOP8BjcqxWtlg8qyJQjRzPJzUtUn5GBg1oQ26hFs7HOOHJMYiJRnvQ==",
|
||||
"version": "1.5.128",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.128.tgz",
|
||||
"integrity": "sha512-bo1A4HH/NS522Ws0QNFIzyPcyUUNV/yyy70Ho1xqfGYzPUme2F/xr4tlEOuM6/A538U1vDA7a4XfCd1CKRegKQ==",
|
||||
"dev": true
|
||||
},
|
||||
"error-ex": {
|
||||
|
|
@ -6906,6 +7089,12 @@
|
|||
"is-callable": "^1.1.3"
|
||||
}
|
||||
},
|
||||
"fraction.js": {
|
||||
"version": "4.3.7",
|
||||
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
|
||||
"integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
|
||||
"dev": true
|
||||
},
|
||||
"fsevents": {
|
||||
"version": "2.3.3",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
|
||||
|
|
@ -7542,6 +7731,12 @@
|
|||
"yallist": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"lucide-react": {
|
||||
"version": "0.484.0",
|
||||
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.484.0.tgz",
|
||||
"integrity": "sha512-oZy8coK9kZzvqhSgfbGkPtTgyjpBvs3ukLgDPv14dSOZtBtboryWF5o8i3qen7QbGg7JhiJBz5mK1p8YoMZTLQ==",
|
||||
"requires": {}
|
||||
},
|
||||
"minimatch": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
|
||||
|
|
@ -7569,9 +7764,15 @@
|
|||
"dev": true
|
||||
},
|
||||
"node-releases": {
|
||||
"version": "2.0.18",
|
||||
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
|
||||
"integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==",
|
||||
"version": "2.0.19",
|
||||
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
|
||||
"integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
|
||||
"dev": true
|
||||
},
|
||||
"normalize-range": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
|
||||
"integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
|
||||
"dev": true
|
||||
},
|
||||
"object-assign": {
|
||||
|
|
@ -7722,16 +7923,22 @@
|
|||
"dev": true
|
||||
},
|
||||
"postcss": {
|
||||
"version": "8.4.49",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
|
||||
"integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
|
||||
"version": "8.5.3",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
|
||||
"integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"nanoid": "^3.3.7",
|
||||
"nanoid": "^3.3.8",
|
||||
"picocolors": "^1.1.1",
|
||||
"source-map-js": "^1.2.1"
|
||||
}
|
||||
},
|
||||
"postcss-value-parser": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
|
||||
"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
|
||||
"dev": true
|
||||
},
|
||||
"prelude-ls": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
|
||||
|
|
@ -7823,9 +8030,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"react-router": {
|
||||
"version": "7.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.0.2.tgz",
|
||||
"integrity": "sha512-m5AcPfTRUcjwmhBzOJGEl6Y7+Crqyju0+TgTQxoS4SO+BkWbhOrcfZNq6wSWdl2BBbJbsAoBUb8ZacOFT+/JlA==",
|
||||
"version": "7.4.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.4.0.tgz",
|
||||
"integrity": "sha512-Y2g5ObjkvX3VFeVt+0CIPuYd9PpgqCslG7ASSIdN73LwA1nNWzcMLaoMRJfP3prZFI92svxFwbn7XkLJ+UPQ6A==",
|
||||
"requires": {
|
||||
"@types/cookie": "^0.6.0",
|
||||
"cookie": "^1.0.1",
|
||||
|
|
@ -7834,11 +8041,11 @@
|
|||
}
|
||||
},
|
||||
"react-router-dom": {
|
||||
"version": "7.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.0.2.tgz",
|
||||
"integrity": "sha512-VJOQ+CDWFDGaWdrG12Nl+d7yHtLaurNgAQZVgaIy7/Xd+DojgmYLosFfZdGz1wpxmjJIAkAMVTKWcvkx1oggAw==",
|
||||
"version": "7.4.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.4.0.tgz",
|
||||
"integrity": "sha512-VlksBPf3n2bijPvnA7nkTsXxMAKOj+bWp4R9c3i+bnwlSOFAGOkJkKhzy/OsRkWaBMICqcAl1JDzh9ZSOze9CA==",
|
||||
"requires": {
|
||||
"react-router": "7.0.2"
|
||||
"react-router": "7.4.0"
|
||||
}
|
||||
},
|
||||
"react-transition-group": {
|
||||
|
|
@ -8135,6 +8342,17 @@
|
|||
"integrity": "sha512-ha12Kq1FX76zE1BbDOlhcIqn4Ob+48F8qnxZu/nfhXsn5E33NrvPfgRLmHaiTiHbgqEDkzyPyo+MupUA/ahtiw==",
|
||||
"requires": {}
|
||||
},
|
||||
"tailwind-merge": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.0.2.tgz",
|
||||
"integrity": "sha512-l7z+OYZ7mu3DTqrL88RiKrKIqO3NcpEO8V/Od04bNpvk0kiIFndGEoqfuzvj4yuhRkHKjRkII2z+KS2HfPcSxw=="
|
||||
},
|
||||
"tailwindcss": {
|
||||
"version": "4.0.17",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.17.tgz",
|
||||
"integrity": "sha512-OErSiGzRa6rLiOvaipsDZvLMSpsBZ4ysB4f0VKGXUrjw2jfkJRd6kjRKV2+ZmTCNvwtvgdDam5D7w6WXsdLJZw==",
|
||||
"dev": true
|
||||
},
|
||||
"tiny-warning": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
|
||||
|
|
@ -8150,6 +8368,11 @@
|
|||
"resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
|
||||
"integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g=="
|
||||
},
|
||||
"tw-animate-css": {
|
||||
"version": "1.2.5",
|
||||
"resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.2.5.tgz",
|
||||
"integrity": "sha512-ABzjfgVo+fDbhRREGL4KQZUqqdPgvc5zVrLyeW9/6mVqvaDepXc7EvedA+pYmMnIOsUAQMwcWzNvom26J2qYvQ=="
|
||||
},
|
||||
"type-check": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
|
||||
|
|
|
|||
13
package.json
13
package.json
|
|
@ -15,24 +15,33 @@
|
|||
"@mui/icons-material": "^6.1.10",
|
||||
"@mui/material": "^6.1.10",
|
||||
"@mui/styles": "^6.1.10",
|
||||
"@radix-ui/react-slot": "^1.1.2",
|
||||
"bootstrap": "^5.3.3",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"lucide-react": "^0.484.0",
|
||||
"react": "^18.3.1",
|
||||
"react-bootstrap": "^2.10.7",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-icons": "^5.5.0",
|
||||
"react-router-dom": "^7.0.2",
|
||||
"survey-react-ui": "^1.12.13"
|
||||
"react-router-dom": "^7.4.0",
|
||||
"survey-react-ui": "^1.12.13",
|
||||
"tailwind-merge": "^3.0.2",
|
||||
"tw-animate-css": "^1.2.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.15.0",
|
||||
"@types/react": "^18.3.12",
|
||||
"@types/react-dom": "^18.3.1",
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"eslint": "^9.15.0",
|
||||
"eslint-plugin-react": "^7.37.2",
|
||||
"eslint-plugin-react-hooks": "^5.0.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.14",
|
||||
"globals": "^15.12.0",
|
||||
"postcss": "^8.5.3",
|
||||
"tailwindcss": "^4.0.17",
|
||||
"vite": "^6.0.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
13
src/App.jsx
13
src/App.jsx
|
|
@ -1,28 +1,29 @@
|
|||
import React from 'react';
|
||||
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
||||
import Navbar from './Components/Navbar';
|
||||
import Pay from './Components/Register';
|
||||
|
||||
import Contact from './Components/Contact';
|
||||
import Donor from './Components/Donor';
|
||||
import Footer from './Components/Footer';
|
||||
import FormBuilder from './Components/FormBuilder';
|
||||
import AboutUs from './Components/AboutUs';
|
||||
import './App.css';
|
||||
import Home from './Components/Home';
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import Supporter from './Components/Supporter';
|
||||
import FundDrive from './Components/FundDrive';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Router>
|
||||
<Navbar />
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/register" element={<Pay />} />
|
||||
<Route path="/home" element={<Home />} />
|
||||
|
||||
<Route path="/aboutUs" element={<AboutUs />} />
|
||||
<Route path="/form" element={<FormBuilder />} />
|
||||
<Route path="/contact" element={<Contact />} />
|
||||
<Route path="/donor" element={<Donor />} />
|
||||
|
||||
<Route path="/supporter" element={<Supporter />} />
|
||||
<Route path="/FundDrive" element={<FundDrive />} />
|
||||
</Routes>
|
||||
</Router>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,13 +1,22 @@
|
|||
.carousel {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
padding: 20px 0px;
|
||||
max-height: 600px;
|
||||
position: relative;
|
||||
}
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||
max-height: 600px;
|
||||
padding: 0; /* Remove padding */
|
||||
}
|
||||
|
||||
.carousel-image {
|
||||
width: 100%;
|
||||
height: 600px; /* Ensures full height */
|
||||
object-fit: cover; /* Covers the container without distortion */
|
||||
display: block; /* Removes any inline spacing */
|
||||
margin: 0; /* Removes any margins */
|
||||
padding: 0; /* Ensures no extra spacing */
|
||||
}
|
||||
|
||||
|
||||
|
||||
.carousel .carousel-slider{
|
||||
|
|
@ -19,13 +28,6 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.carousel-image {
|
||||
width: 90%;
|
||||
height: auto;
|
||||
transition: opacity 1s ease-in-out;
|
||||
}
|
||||
|
||||
.carousel-indicators {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,8 @@ const Carousel = ({ images }) => {
|
|||
<img
|
||||
src={images[currentIndex]}
|
||||
alt={`Slide ${currentIndex + 1}`}
|
||||
className="carousel-image"
|
||||
className="carousel-image"
|
||||
|
||||
/>
|
||||
<div className="carousel-indicators">
|
||||
{images.map((_, index) => (
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ const Contact = () => {
|
|||
Email: <a href="mailto:VETRIVEL.EDUCATION.TRUST@gmail.com">VETRIVEL.EDUCATION.TRUST@gmail.com</a>
|
||||
</p>
|
||||
<p>
|
||||
<FaPhone /> <a href="tel:+917604883357">+91 7604883357</a>
|
||||
<FaPhone /> <a href="tel:+917604883357">+91 9632828337</a>
|
||||
</p>
|
||||
<p>
|
||||
<FaLinkedin /> <a href="https://www.linkedin.com/in/vallies/" target="_blank" rel="noopener noreferrer">Valli's LinkedIn</a>
|
||||
|
|
|
|||
|
|
@ -1,50 +0,0 @@
|
|||
.donar-form {
|
||||
width: 50%;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 10px rgb(241, 235, 235);
|
||||
}
|
||||
|
||||
.donar-form h2 {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px;
|
||||
border: none;
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
import React from 'react';
|
||||
import './Donar.css';
|
||||
|
||||
const Donar = () => {
|
||||
return (
|
||||
<div className="donar-form">
|
||||
<h2>Donar Details</h2>
|
||||
<form>
|
||||
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="aadharFront">Upload Aadhaar Front:</label>
|
||||
<input type="file" id="aadharFront" name="aadharFront" accept="image/*" required />
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="aadharBack">Upload Aadhaar Back:</label>
|
||||
<input type="file" id="aadharBack" name="aadharBack" accept="image/*" required />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="medicalDoc1">Upload Medical Document 1:</label>
|
||||
<input type="file" id="medicalDoc1" name="medicalDoc1" accept="image/*" required />
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="medicalDoc2">Upload Medical Document 2:</label>
|
||||
<input type="file" id="medicalDoc2" name="medicalDoc2" accept="image/*" />
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="medicalDoc3">Upload Medical Document 3:</label>
|
||||
<input type="file" id="medicalDoc3" name="medicalDoc3" accept="image/*" />
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="medicalDoc4">Upload Medical Document 4:</label>
|
||||
<input type="file" id="medicalDoc4" name="medicalDoc4" accept="image/*" />
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<button type="submit">Submit</button>
|
||||
|
||||
|
||||
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Donar;
|
||||
|
|
@ -1,111 +0,0 @@
|
|||
import React, { useState } from 'react';
|
||||
import './Donar.css';
|
||||
|
||||
const Donor = () => {
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
const [images, setImages] = useState({
|
||||
aadharFront: null,
|
||||
aadharBack: null,
|
||||
medicalDoc1: null,
|
||||
medicalDoc2: null,
|
||||
medicalDoc3: null,
|
||||
medicalDoc4: null,
|
||||
});
|
||||
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
setSubmitted(true);
|
||||
};
|
||||
|
||||
const handleImageChange = (event) => {
|
||||
const { name } = event.target;
|
||||
const file = event.target.files[0];
|
||||
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
setImages((prevImages) => ({
|
||||
...prevImages,
|
||||
[name]: e.target.result,
|
||||
}));
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="donar-form" style={{ textAlign: "center", maxWidth: "600px", margin: "auto" }}>
|
||||
|
||||
|
||||
{!submitted ? (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="form-group">
|
||||
<label htmlFor="name">Full Name:</label>
|
||||
<input type="text" id="name" name="name" placeholder="Enter your full name" required />
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="phone">Phone Number:</label>
|
||||
<input type="tel" id="phone" name="phone" placeholder="Enter your phone number" required />
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="email">Email:</label>
|
||||
<input type="email" id="email" name="email" placeholder="Enter your email" required />
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="dob">Date of Birth:</label>
|
||||
<input type="date" id="dob" name="dob" required />
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="age">Age:</label>
|
||||
<input type="number" id="age" name="age" placeholder="Enter your age" required />
|
||||
</div>
|
||||
|
||||
<button type="submit" style={{ fontSize: "14px", padding: "8px 15px", marginTop: "10px" }}>
|
||||
Submit Details
|
||||
</button>
|
||||
</form>
|
||||
) : (
|
||||
<div>
|
||||
<h2>Upload Documents</h2>
|
||||
<form>
|
||||
{["aadharFront", "aadharBack", "medicalDoc1", "medicalDoc2", "medicalDoc3", "medicalDoc4"].map((doc) => (
|
||||
<div key={doc} className="form-group" style={{ textAlign: "center" }}>
|
||||
<label htmlFor={doc}>
|
||||
{doc.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase())}:
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
id={doc}
|
||||
name={doc}
|
||||
accept="image/*"
|
||||
onChange={handleImageChange}
|
||||
required={doc === "aadharFront" || doc === "aadharBack" || doc === "medicalDoc1"}
|
||||
style={{ display: "block", margin: "10px auto", width: "250px" }}
|
||||
/>
|
||||
{images[doc] && (
|
||||
<img
|
||||
src={images[doc]}
|
||||
alt="Preview"
|
||||
style={{ marginTop: "10px", width: "100px", height: "100px", objectFit: "cover", borderRadius: "10px" }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
<button type="submit" style={{ fontSize: "14px", padding: "8px 15px", marginTop: "10px" }}>
|
||||
Submit Documents
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Donor;
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,205 @@
|
|||
/* Centering the form container */
|
||||
.form-container {
|
||||
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: linear-gradient(135deg, #f3f4f6, #e0e0e0);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
|
||||
}
|
||||
/* Styling for labels */
|
||||
label {
|
||||
font-size: 20px; /* Increased label font size */
|
||||
font-weight: bold;
|
||||
}
|
||||
/* Container for each radio button */
|
||||
.radio-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 380px; /* Reduced width */
|
||||
height: 35px; /* Smaller height */
|
||||
padding: 6px;
|
||||
border: 1.5px solid #ccc;
|
||||
border-radius: auto;
|
||||
border: none;
|
||||
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
|
||||
background-color: #f9f9f9;
|
||||
transition: 0.3s ease-in-out;
|
||||
font-size: 14px; /* Increased font size */
|
||||
}
|
||||
|
||||
.radio-box:hover {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
.radio-label {
|
||||
font-size: 14px; /* Reduce label font size */
|
||||
}
|
||||
/* Bigger radio buttons */
|
||||
.radio-input {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Buttons container */
|
||||
.button-group {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Bigger buttons for Next, Back, and Submit */
|
||||
.form-button {
|
||||
padding: 8px 20px;
|
||||
font-size: 18px; /* Increased font size */
|
||||
font-weight: bold;
|
||||
background-color: #2563eb;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: auto;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s ease-in-out;
|
||||
width: 150px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form-button:hover {
|
||||
background-color: #1e40af;
|
||||
}
|
||||
|
||||
.form-button:disabled {
|
||||
background-color: #a1a1aa;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Upload section adjustments */
|
||||
.upload-section {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.upload-title {
|
||||
font-size: 20px; /* Increased font size */
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.file-input {
|
||||
margin: 8px 0;
|
||||
font-size: 18px; /* Increased font size */
|
||||
}
|
||||
|
||||
/* Image preview styling */
|
||||
.image-preview {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
justify-content: center;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.uploaded-image {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
object-fit: cover;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.upload-box {
|
||||
border: 2px dashed #ccc;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin: 10px auto;
|
||||
background-color: #f9f9f9;
|
||||
cursor: pointer;
|
||||
font-size: 18px; /* Increased font size */
|
||||
}
|
||||
|
||||
.upload-box:hover {
|
||||
border-color: #007bff;
|
||||
}
|
||||
|
||||
.upload-placeholder {
|
||||
color: #888;
|
||||
font-size: 18px; /* Increased font size */
|
||||
}
|
||||
|
||||
/* Grey color for Next and Back buttons */
|
||||
.form-button.next-button,
|
||||
.form-button.back-button {
|
||||
background-color: #4b5563;
|
||||
width: 100px;
|
||||
height: 35px;
|
||||
font-size: 18px; /* Increased font size */
|
||||
}
|
||||
|
||||
.form-button.next-button:hover,
|
||||
.form-button.back-button:hover {
|
||||
background-color: #4b5563; /* Darker Grey on hover */
|
||||
}
|
||||
|
||||
/* Blue color for Submit button */
|
||||
.form-button.submit-button {
|
||||
background-color: #2563eb; /* Blue */
|
||||
width: 100px;
|
||||
height: 35px;
|
||||
font-size: 18px; /* Increased font size */
|
||||
}
|
||||
|
||||
.form-button.submit-button:hover {
|
||||
background-color: #1e40af; /* Darker Blue on hover */
|
||||
}
|
||||
|
||||
/* Input Fields */
|
||||
.input-small {
|
||||
font-size: 14px;
|
||||
margin-top: 5px;
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.2s ease-in-out;
|
||||
width: 380px; /* Reduced width */
|
||||
height: 30px; /* Smaller height */
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
|
||||
.container-box{
|
||||
border: 3px solid #eeeeee;
|
||||
padding: 20px;
|
||||
margin: 15px auto 0 auto;
|
||||
width: 33%;
|
||||
background-color: #eeeeee; /* Lighter Grey Background */
|
||||
border-radius: 10px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.center-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
background-color: #ffffff; /* or any background you like */
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,218 @@
|
|||
import React, { useState } from "react";
|
||||
import "./FundDrive.css";
|
||||
|
||||
const FundDrive = () => {
|
||||
const [step, setStep] = useState(1);
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
age: "",
|
||||
dob: "",
|
||||
category: "",
|
||||
customCategory: "",
|
||||
images: []
|
||||
});
|
||||
|
||||
const categories = [
|
||||
"Medical Fundraising",
|
||||
"Education & Scholarships",
|
||||
"Disaster Relief & Aid",
|
||||
"Memorial & Tribute Funds",
|
||||
"Community Development",
|
||||
"Social Causes",
|
||||
"Religious & Faith-Based Giving",
|
||||
"Crowdfunding for Needs",
|
||||
"Nonprofit & NGO Fundraising",
|
||||
"Others",
|
||||
];
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
setFormData({ ...formData, [e.target.name]: e.target.value });
|
||||
};
|
||||
|
||||
const handleImageUpload = (event) => {
|
||||
const files = Array.from(event.target.files);
|
||||
setFormData({ ...formData, images: [...formData.images, ...files] });
|
||||
};
|
||||
|
||||
const handleNext = () => {
|
||||
setStep(step + 1);
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
if (step > 1) setStep(step - 1);
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
alert("Fundraising submission successful!");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
|
||||
<div className="container-box">
|
||||
<form>
|
||||
{step === 1 && (
|
||||
<div className="step-box">
|
||||
<h4>Step 1:Personal Details</h4>
|
||||
<label>Name:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="input-small"
|
||||
placeholder="Enter your name"
|
||||
/>
|
||||
<label>Email:</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="input-small"
|
||||
placeholder="Enter your email"
|
||||
/>
|
||||
<label>Phone Number:</label>
|
||||
<input
|
||||
type="tel"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="input-small"
|
||||
placeholder="Enter phone number"
|
||||
/>
|
||||
<label>Age:</label>
|
||||
<input
|
||||
type="number"
|
||||
name="age"
|
||||
value={formData.age}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="input-small"
|
||||
placeholder="Enter your age"
|
||||
/>
|
||||
<label>Date of Birth:</label>
|
||||
<input
|
||||
type="date"
|
||||
name="dob"
|
||||
value={formData.dob}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="input-small"
|
||||
/>
|
||||
<br /><br />
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleNext}
|
||||
className="form-button next-button"
|
||||
disabled={!formData.name || !formData.email || !formData.phone || !formData.age || !formData.dob}
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{step === 2 && (
|
||||
<div className="form-container-box">
|
||||
<h4>Step 2:Select a category</h4>
|
||||
{categories.map((item, index) => (
|
||||
<div key={index} className="radio-box">
|
||||
<input
|
||||
type="radio"
|
||||
name="category"
|
||||
value={item}
|
||||
checked={formData.category === item}
|
||||
onChange={handleInputChange}
|
||||
className="radio-input"
|
||||
/>
|
||||
<label className="radio-label">{item}</label>
|
||||
</div>
|
||||
))}
|
||||
{formData.category === "Others" && (
|
||||
<input
|
||||
type="text"
|
||||
name="customCategory"
|
||||
placeholder="Fill the category"
|
||||
value={formData.customCategory}
|
||||
onChange={handleInputChange}
|
||||
className="custom-category-input"
|
||||
/>
|
||||
)}
|
||||
<div className="button-group">
|
||||
<button type="button" className="form-button back-button" onClick={handleBack}>Back</button>
|
||||
<button
|
||||
type="button"
|
||||
className="form-button next-button"
|
||||
onClick={handleNext}
|
||||
disabled={!formData.category || (formData.category === "Others" && !formData.customCategory.trim())}
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{step === 3 && (
|
||||
<div className="upload-section-box">
|
||||
<h4>Step 3:Upload an Image</h4>
|
||||
<h3 className="upload-title">{formData.category === "Others" ? formData.customCategory : formData.category}</h3>
|
||||
<div className="upload-box">
|
||||
<input
|
||||
type="file"
|
||||
multiple
|
||||
accept="image/*"
|
||||
onChange={handleImageUpload}
|
||||
className="file-input"
|
||||
/>
|
||||
<p className="upload-placeholder">Click or Drag & Drop to upload images</p>
|
||||
</div>
|
||||
<div className="image-preview">
|
||||
{formData.images.map((image, index) => (
|
||||
<img key={index} src={URL.createObjectURL(image)} alt={`Proof ${index + 1}`} className="uploaded-image" />
|
||||
))}
|
||||
</div>
|
||||
<div className="button-group">
|
||||
<button type="button" className="form-button back-button" onClick={handleBack}>Back</button>
|
||||
<button type="button" className="form-button submit-button" onClick={handleSubmit} disabled={formData.images.length === 0}>Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
export default FundDrive;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
import React from "react";
|
||||
|
||||
const FundRaised = () => {
|
||||
return (
|
||||
<form>
|
||||
<div className="form-group">
|
||||
<label htmlFor="fundName">Fundraiser Name:</label>
|
||||
<input type="text" id="fundName" name="fundName" placeholder="Enter fundraiser name" required />
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="fundAmount">Required Amount:</label>
|
||||
<input type="number" id="fundAmount" name="fundAmount" placeholder="Enter required amount" required />
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="fundPurpose">Purpose of Fundraising:</label>
|
||||
<textarea id="fundPurpose" name="fundPurpose" placeholder="Describe the purpose" required></textarea>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="supportingDoc1">Upload Supporting Document 1:</label>
|
||||
<input type="file" id="supportingDoc1" name="supportingDoc1" accept="image/*,application/pdf" required />
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="supportingDoc2">Upload Supporting Document 2 (Optional):</label>
|
||||
<input type="file" id="supportingDoc2" name="supportingDoc2" accept="image/*,application/pdf" />
|
||||
</div>
|
||||
|
||||
<button type="submit" style={{ fontSize: "12px", padding: "5px 10px" }}>Submit</button>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default FundRaised;
|
||||
|
||||
|
|
@ -7,14 +7,16 @@
|
|||
color: #fff;
|
||||
width: 100%;
|
||||
position: sticky;
|
||||
padding: 20px !important;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
padding: 15px 20px;
|
||||
}
|
||||
|
||||
.navbar .logo {
|
||||
width: 80px;
|
||||
height: auto;
|
||||
border-radius: 35%;
|
||||
padding: 20px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.navbar .brand {
|
||||
|
|
@ -22,16 +24,15 @@
|
|||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar .brand-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: start;
|
||||
line-height: 15px;
|
||||
align-items: flex-start;
|
||||
line-height: 1.2;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.navbar .college-name {
|
||||
|
|
@ -40,70 +41,102 @@
|
|||
|
||||
.navbar p {
|
||||
font-size: 15px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Links Container */
|
||||
.navbar .links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px 20px;
|
||||
}
|
||||
|
||||
/* Default Navbar Links */
|
||||
.navbar .links a {
|
||||
margin: 0 10px;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.navbar .links {
|
||||
padding: 5px 20px;
|
||||
/* Fundraising Button */
|
||||
.navbar .links .fundraising-link {
|
||||
background-color: #28a745; /* Green background */
|
||||
color: white !important;
|
||||
padding: 8px 15px;
|
||||
border-radius: 8px;
|
||||
font-weight: bold;
|
||||
border: 2px solid transparent;
|
||||
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.navbar .links a:hover {
|
||||
color: #28a745;
|
||||
.navbar .links .fundraising-link:hover {
|
||||
background-color: white;
|
||||
color: #28a745 !important;
|
||||
border: 2px solid #28a745;
|
||||
}
|
||||
|
||||
/* Navbar Header */
|
||||
.navbar-header {
|
||||
background-color: rgba(245, 146, 38, 1);
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Add hamburger menu for small screens */
|
||||
/* Hamburger menu for small screens */
|
||||
.hamburger {
|
||||
display: none;
|
||||
font-size: 30px;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.navbar p{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* For screens smaller than 450px */
|
||||
/* Mobile Responsiveness */
|
||||
@media (max-width: 900px) {
|
||||
.navbar .links {
|
||||
display: none; /* Hide the links by default */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 60px; /* Adjust the position */
|
||||
right: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: -100%;
|
||||
width: 60%;
|
||||
height: 100vh;
|
||||
background-color: #343a40;
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
padding-top: 60px;
|
||||
transition: right 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.navbar .links.open {
|
||||
display: flex; /* Show links when the menu is open */
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
top:100px;
|
||||
transition: 2s linear ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
/* Show the hamburger menu on small screens */
|
||||
.hamburger {
|
||||
display: block; /* Show hamburger */
|
||||
color: #fff;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.navbar .links a {
|
||||
padding: 10px 20px;
|
||||
padding: 15px 20px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.navbar .links .fundraising-link {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Prevent scrolling when menu is open */
|
||||
body.menu-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,14 +2,14 @@ import React, { useState } from "react";
|
|||
import { Link, useNavigate } from "react-router-dom";
|
||||
import "./Navbar.css";
|
||||
|
||||
const Navbar = () => {
|
||||
function Navbar() {
|
||||
const [menuOpen, setMenuOpen] = useState(false); // State to handle the hamburger menu toggle
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Toggle menu visibility
|
||||
const toggleMenu = () => {
|
||||
function toggleMenu() {
|
||||
setMenuOpen(!menuOpen);
|
||||
};
|
||||
}
|
||||
|
||||
return (
|
||||
<nav className="navbar-container">
|
||||
|
|
@ -29,24 +29,27 @@ const Navbar = () => {
|
|||
</div>
|
||||
|
||||
{/* Hamburger icon */}
|
||||
<div className="hamburger" onClick={toggleMenu}>
|
||||
<button className="hamburger" onClick={toggleMenu} aria-label="Toggle menu">
|
||||
☰
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* Links */}
|
||||
<div className={`links ${menuOpen ? "open" : ""}`}>
|
||||
<Link to="/">Home</Link>
|
||||
<Link to="/home">Home</Link>
|
||||
<Link to="/aboutUs">About Us</Link>
|
||||
<Link to="/register">Register</Link>
|
||||
|
||||
<Link to="/contact">Contact</Link>
|
||||
<Link to="/donor">Donor</Link>
|
||||
<Link to="/fundraised">FundRaised</Link>
|
||||
|
||||
<Link to="/FundDrive">Projects</Link>
|
||||
<Link to="/supporter">Donor</Link>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default Navbar;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,154 +0,0 @@
|
|||
import React, { useState } from "react";
|
||||
import { TextField, Button, Container, Typography, Grid } from "@mui/material";
|
||||
|
||||
const Register = () => {
|
||||
const [step, setStep] = useState(1); // Track the form step (1 for basic info, 2 for donation)
|
||||
const [userInfo, setUserInfo] = useState({
|
||||
name: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
donationAmount: "",
|
||||
});
|
||||
|
||||
// Handle changes in input fields
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setUserInfo({
|
||||
...userInfo,
|
||||
[name]: value,
|
||||
});
|
||||
};
|
||||
|
||||
const sendOTPviaEmail = () => {
|
||||
const payload = {
|
||||
userInfo, // Ensure `userInfo` is defined and contains valid data
|
||||
};
|
||||
fetch(`http://localhost:3333/api/v1/sendOTPviaEmail`, { // Correctly points to the backend route
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(payload), // Payload is properly serialized
|
||||
})
|
||||
.then((response) => {
|
||||
console.log("response ==== ", response);
|
||||
if(response.ok && response.status == 200){
|
||||
setStep(2)
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("error ===== ", error);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
if (step === 1) {
|
||||
sendOTPviaEmail();
|
||||
} else {
|
||||
console.log("Form Data Submitted:", userInfo);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Container maxWidth="sm" sx={{ paddingTop: 5 }}>
|
||||
<Typography variant="h4" gutterBottom>
|
||||
Register and Donate
|
||||
</Typography>
|
||||
<Typography variant="body1" paragraph>
|
||||
Support our cause by donating. Your contributions help us make education
|
||||
accessible to all.
|
||||
</Typography>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
{step === 1 ? (
|
||||
<>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Step 1: Basic Information
|
||||
</Typography>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Name"
|
||||
name="name"
|
||||
value={userInfo.name}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Email"
|
||||
type="email"
|
||||
name="email"
|
||||
value={userInfo.email}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Phone Number"
|
||||
type="tel"
|
||||
name="phone"
|
||||
value={userInfo.phone}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
fullWidth
|
||||
>
|
||||
Next Step
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Step 2: Donation Information
|
||||
</Typography>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Donation Amount"
|
||||
type="number"
|
||||
name="donationAmount"
|
||||
value={userInfo.donationAmount}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
color="primary"
|
||||
fullWidth
|
||||
>
|
||||
Donate Now
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
)}
|
||||
</form>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default Register;
|
||||
|
|
@ -0,0 +1,212 @@
|
|||
/* Overall Supporter Container */
|
||||
.supporter-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
}
|
||||
|
||||
/* Styling for labels */
|
||||
label {
|
||||
font-size: 20px; /* Increased label font size */
|
||||
font-weight: bold;
|
||||
}
|
||||
h3 {
|
||||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-top: 10px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
/* Input Fields */
|
||||
.input-small {
|
||||
font-size: 14px;
|
||||
margin-top: 5px;
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.2s ease-in-out;
|
||||
width: 380px; /* Reduced width */
|
||||
height: 30px; /* Smaller height */
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.input-small:focus {
|
||||
background-color: #ffffff;
|
||||
border-color: #2563eb;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* File Input */
|
||||
input[type="file"] {
|
||||
padding: 5px;
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ccc;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
input[type="file"]:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Button Container */
|
||||
.button-group {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
/* Button Styling */
|
||||
.form-button {
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
background-color: #2563eb; /* Default to blue */
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s ease-in-out;
|
||||
width: 150px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form-button:hover {
|
||||
background-color: #1e40af;
|
||||
}
|
||||
|
||||
.form-button:disabled {
|
||||
background-color: #a1a1aa;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Image Preview */
|
||||
.preview-image {
|
||||
width: 100%;
|
||||
max-height: 200px;
|
||||
object-fit: contain;
|
||||
margin-top: 10px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 500px) {
|
||||
.supporter-container {
|
||||
max-width: 100%;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.form-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark Grey color for Next and Back buttons */
|
||||
|
||||
|
||||
.form-button.next-button{
|
||||
background-color: #4b5563; /* Dark grey */
|
||||
width: 100px;
|
||||
height: 35px;
|
||||
}
|
||||
.form-button.back-button {
|
||||
background-color: #4b5563; /* Dark grey */
|
||||
width: 100px;
|
||||
height: 35px;
|
||||
}
|
||||
form-button.next-button:hover{
|
||||
background-color: #374151; /* Darker grey on hover */
|
||||
}
|
||||
.form-button.back-button:hover {
|
||||
background-color: #374151; /* Darker grey on hover */
|
||||
}
|
||||
|
||||
/* Blue color for Submit button */
|
||||
.form-button.submit-button {
|
||||
background-color: #2563eb; /* Blue */
|
||||
width: 100px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.form-button.submit-button:hover {
|
||||
background-color: #1e40af; /* Darker blue on hover */
|
||||
}
|
||||
|
||||
/* Highlight the required fields if they are not filled */
|
||||
input:invalid, select:invalid, input[type="file"]:invalid {
|
||||
border-color: #ccc; /* Default border for invalid fields (no color change) */
|
||||
background-color: #f5f5f5; /* Keep the default background for invalid fields */
|
||||
}
|
||||
|
||||
input:valid, select:valid, input[type="file"]:valid {
|
||||
border-color: #ccc; /* Default border for valid fields (no color change) */
|
||||
background-color: #f5f5f5; /* Keep the default background for valid fields */
|
||||
}
|
||||
|
||||
/* Add a "required" text next to input fields to indicate they are mandatory */
|
||||
label::after {
|
||||
content: "*";
|
||||
color: red;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.form-button.upi-button
|
||||
{
|
||||
background-color: #008712; /* Blue */
|
||||
width: 200px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.form-button.upi-button:hover {
|
||||
background-color: #008712; /* Darker blue on hover */
|
||||
}
|
||||
.form-button.net-banking-button
|
||||
{
|
||||
background-color: #008712; /* Blue */
|
||||
width: 215px;
|
||||
height: 35px;
|
||||
}
|
||||
.form-button.net-banking-button:hover{
|
||||
background-color:#008712; /* Darker blue on hover */
|
||||
} ;
|
||||
|
||||
.step-box {
|
||||
border: 3px solid #eeeeee;
|
||||
padding: 25px;
|
||||
margin: 20px auto;
|
||||
width: 80%;
|
||||
background-color: #eeeeee; /* Lighter Grey Background */
|
||||
border-radius: 10px;
|
||||
color: black; /* Adjusted text color for better contrast */
|
||||
}
|
||||
|
||||
.step1-box, .step2-box, .step3-box, .step4-box {
|
||||
border: 3px solid #eeeeee;
|
||||
padding: 20px;
|
||||
margin: 15px 0;
|
||||
background-color: #eeeeee; /* Even Lighter Grey Background */
|
||||
border-radius: 8px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,354 @@
|
|||
import React, { useState } from "react";
|
||||
import "./Supporter.css";
|
||||
|
||||
const Supporter = () => {
|
||||
const [step, setStep] = useState(1);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
age: "",
|
||||
dob: "",
|
||||
aadharFront: null,
|
||||
aadharBack: null,
|
||||
paymentMethod: "",
|
||||
paymentScreenshot: null,
|
||||
});
|
||||
|
||||
const [showPaymentScreenshot, setShowPaymentScreenshot] = useState(false);
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value, files } = e.target;
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]: files ? files[0] : value,
|
||||
}));
|
||||
};
|
||||
|
||||
const nextStep = () => {
|
||||
if (isValid()) setStep((prev) => prev + 1);
|
||||
};
|
||||
|
||||
const prevStep = () => setStep((prev) => prev - 1);
|
||||
|
||||
const isValid = () => {
|
||||
if (step === 1) {
|
||||
return formData.name && formData.email && formData.phone && formData.age && formData.dob;
|
||||
}
|
||||
if (step === 2) {
|
||||
return formData.aadharFront && formData.aadharBack;
|
||||
}
|
||||
if (step === 3) {
|
||||
return formData.paymentMethod;
|
||||
}
|
||||
if (step === 4 && formData.paymentMethod === "UPI") {
|
||||
return formData.paymentScreenshot;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
console.log("Submitting Form Data:", formData);
|
||||
setTimeout(() => {
|
||||
alert("Form Submitted Successfully!");
|
||||
setIsSubmitting(false);
|
||||
setFormData({
|
||||
name: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
age: "",
|
||||
dob: "",
|
||||
aadharFront: null,
|
||||
aadharBack: null,
|
||||
paymentMethod: "",
|
||||
paymentScreenshot: null,
|
||||
});
|
||||
}, 2000);
|
||||
} catch (error) {
|
||||
console.error("Submission Error:", error);
|
||||
alert("Something went wrong. Please try again.");
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUPIPayment = () => {
|
||||
const upiUrl =
|
||||
"upi://pay?pa=157511100001246@UBIN0815756.ifsc.npci&pn=Ashoka%20Windows%20and%20Annex%20Apartment%20Owners%20Association&cu=INR&am=50&tn=113%20Dec%202021%20fine&tr=202112113fine&refUrl=https%3A%2F%2Fwww.ashokawindows.com";
|
||||
|
||||
// Open the UPI payment app
|
||||
window.location.href = upiUrl;
|
||||
|
||||
// Immediately show the upload screenshot field after clicking Pay via UPI
|
||||
setShowPaymentScreenshot(true);
|
||||
};
|
||||
|
||||
const handleNetBankingPayment = () => {
|
||||
// Placeholder for actual Net Banking redirection or API call
|
||||
alert("Redirecting to Net Banking Payment Gateway...");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="supporter-container">
|
||||
<div className="step-box">
|
||||
<form onSubmit={handleSubmit}>
|
||||
{step === 1 && (
|
||||
<div className="step1-box">
|
||||
<h4>Step 1:Personal Details</h4>
|
||||
<label>Name:</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="input-small"
|
||||
placeholder="Enter your name"
|
||||
/>
|
||||
<label>Email:</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="input-small"
|
||||
placeholder="Enter your email"
|
||||
/>
|
||||
<label>Phone Number:</label>
|
||||
<input
|
||||
type="tel"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="input-small"
|
||||
placeholder="Enter phone number"
|
||||
/>
|
||||
<label>Age:</label>
|
||||
<input
|
||||
type="number"
|
||||
name="age"
|
||||
value={formData.age}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="input-small"
|
||||
placeholder="Enter your age"
|
||||
/>
|
||||
<label>Date of Birth:</label>
|
||||
<input
|
||||
type="date"
|
||||
name="dob"
|
||||
value={formData.dob}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="input-small"
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<button
|
||||
type="button"
|
||||
onClick={nextStep}
|
||||
disabled={!isValid()}
|
||||
className="form-button next-button"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === 2 && (
|
||||
<div className="step2-box">
|
||||
<h4>Step 2:Upload a Images</h4>
|
||||
<label>Aadhar Card Front:</label>
|
||||
<input
|
||||
type="file"
|
||||
name="aadharFront"
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="input-small"
|
||||
/>
|
||||
<label>Aadhar Card Back:</label>
|
||||
<input
|
||||
type="file"
|
||||
name="aadharBack"
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="input-small"
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<button
|
||||
type="button"
|
||||
onClick={prevStep}
|
||||
className="form-button back-button"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<div style={{ marginTop: "10px" }}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={nextStep}
|
||||
disabled={!isValid()}
|
||||
className="form-button next-button"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === 3 && (
|
||||
<div className="step3-box">
|
||||
<h4>Step 3:Select Payment Method</h4>
|
||||
<label>Payment Method:</label>
|
||||
<select
|
||||
name="paymentMethod"
|
||||
|
||||
value={formData.paymentMethod}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="input-small"
|
||||
|
||||
>
|
||||
|
||||
<option value="UPI">Pay by any UPI App</option>
|
||||
<option value="Net Banking">Net Banking</option>
|
||||
</select>
|
||||
<br />
|
||||
<br />
|
||||
<button
|
||||
type="button"
|
||||
onClick={prevStep}
|
||||
className="form-button back-button"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<div style={{ marginTop: "10px" }}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={nextStep}
|
||||
disabled={!isValid()}
|
||||
className="form-button next-button"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === 4 && formData.paymentMethod === "UPI" && (
|
||||
<div className="step4-box">
|
||||
<h4>Step 4:Pay via UPI</h4>
|
||||
<br></br>
|
||||
<br></br>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleUPIPayment}
|
||||
className="form-button upi-button"
|
||||
>
|
||||
Pay via UPI
|
||||
</button>
|
||||
{/* Upload screenshot field appears after Pay via UPI is clicked */}
|
||||
{showPaymentScreenshot && (
|
||||
<div className="payment-screenshot">
|
||||
<label>Upload Payment Screenshot:</label>
|
||||
<input
|
||||
type="file"
|
||||
name="paymentScreenshot"
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="input-small"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<br />
|
||||
<br />
|
||||
<button
|
||||
type="button"
|
||||
onClick={prevStep}
|
||||
className="form-button back-button"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<div style={{ marginTop: "10px" }}>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting || !formData.paymentScreenshot}
|
||||
className="form-button submit-button"
|
||||
>
|
||||
{isSubmitting ? "Submitting..." : "Submit"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === 4 && formData.paymentMethod === "Net Banking" && (
|
||||
<div className="step4-box">
|
||||
<h4>Step 4:Pay via Net banking</h4>
|
||||
<br></br>
|
||||
<br></br>
|
||||
{/* Net Banking - Redirection or Process */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleNetBankingPayment}
|
||||
className="form-button net-banking-button"
|
||||
>
|
||||
Pay via Net Banking
|
||||
</button>
|
||||
{/* Upload screenshot field appears after Pay via Net Banking is clicked */}
|
||||
{showPaymentScreenshot && (
|
||||
<div className="payment-screenshot">
|
||||
<label>Upload Payment Screenshot:</label>
|
||||
<input
|
||||
type="file"
|
||||
name="paymentScreenshot"
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="input-small"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<br />
|
||||
<br />
|
||||
<button
|
||||
type="button"
|
||||
onClick={prevStep}
|
||||
className="form-button back-button"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<div style={{ marginTop: "10px" }}>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting || !formData.paymentScreenshot}
|
||||
className="form-button submit-button"
|
||||
>
|
||||
{isSubmitting ? "Submitting..." : "Submit"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Supporter;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva } from "class-variance-authority";
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
|
||||
destructive:
|
||||
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||
outline:
|
||||
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
|
||||
ghost:
|
||||
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
||||
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
||||
icon: "size-9",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Button({
|
||||
className,
|
||||
variant,
|
||||
size,
|
||||
asChild = false,
|
||||
...props
|
||||
}) {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="button"
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
export { Button, buttonVariants }
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Card({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card"
|
||||
className={cn(
|
||||
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function CardHeader({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-header"
|
||||
className={cn(
|
||||
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function CardTitle({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-title"
|
||||
className={cn("leading-none font-semibold", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function CardDescription({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function CardAction({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-action"
|
||||
className={cn(
|
||||
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function CardContent({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (<div data-slot="card-content" className={cn("px-6", className)} {...props} />);
|
||||
}
|
||||
|
||||
function CardFooter({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-footer"
|
||||
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
CardAction,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Input({
|
||||
className,
|
||||
type,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
data-slot="input"
|
||||
className={cn(
|
||||
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
||||
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
export { Input }
|
||||
|
|
@ -66,3 +66,5 @@ button:focus-visible {
|
|||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
import { clsx } from "clsx";
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
export function cn(...inputs) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
Loading…
Reference in New Issue