commit
This commit is contained in:
Mohamad
parent
98aa111734
commit
c91f5b0f65
237
package-lock.json
generated
237
package-lock.json
generated
@ -10,15 +10,19 @@
|
||||
"dependencies": {
|
||||
"flowbite": "^2.5.1",
|
||||
"flowbite-svelte": "^0.46.16",
|
||||
"flowbite-svelte-icons": "^1.6.1"
|
||||
"flowbite-svelte-icons": "^1.6.1",
|
||||
"motion": "^11.17.0",
|
||||
"pocketbase": "^0.25.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.28.1",
|
||||
"@sveltejs/adapter-auto": "^3.0.0",
|
||||
"@sveltejs/adapter-node": "^5.2.11",
|
||||
"@sveltejs/kit": "^2.5.27",
|
||||
"@sveltejs/vite-plugin-svelte": "^4.0.0",
|
||||
"@tailwindcss/typography": "^0.5.14",
|
||||
"@types/eslint": "^9.6.0",
|
||||
"@types/node": "^22.10.5",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint": "^9.0.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
@ -799,6 +803,92 @@
|
||||
"url": "https://opencollective.com/popperjs"
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-commonjs": {
|
||||
"version": "28.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-28.0.2.tgz",
|
||||
"integrity": "sha512-BEFI2EDqzl+vA1rl97IDRZ61AIwGH093d9nz8+dThxJNH8oSoB7MjWvPCX3dkaK1/RCJ/1v/R1XB15FuSs0fQw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@rollup/pluginutils": "^5.0.1",
|
||||
"commondir": "^1.0.1",
|
||||
"estree-walker": "^2.0.2",
|
||||
"fdir": "^6.2.0",
|
||||
"is-reference": "1.2.1",
|
||||
"magic-string": "^0.30.3",
|
||||
"picomatch": "^4.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16.0.0 || 14 >= 14.17"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"rollup": "^2.68.0||^3.0.0||^4.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"rollup": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-commonjs/node_modules/fdir": {
|
||||
"version": "6.4.2",
|
||||
"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.2.tgz",
|
||||
"integrity": "sha512-KnhMXsKSPZlAhp7+IjUkRZKPb4fUyccpDrdFXbi4QL1qkmFh9kVY09Yox+n4MaOb3lHZ1Tv829C3oaaXoMYPDQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"picomatch": "^3 || ^4"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"picomatch": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-commonjs/node_modules/is-reference": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
|
||||
"integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/estree": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-commonjs/node_modules/picomatch": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
|
||||
"integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/jonschlinkert"
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-json": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-6.1.0.tgz",
|
||||
"integrity": "sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@rollup/pluginutils": "^5.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"rollup": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-node-resolve": {
|
||||
"version": "15.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.2.3.tgz",
|
||||
@ -1083,6 +1173,47 @@
|
||||
"@sveltejs/kit": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@sveltejs/adapter-node": {
|
||||
"version": "5.2.11",
|
||||
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-node/-/adapter-node-5.2.11.tgz",
|
||||
"integrity": "sha512-lR7/dfUaKFf3aI408KRDy/BVDYoqUws7zNOJz2Hl4JoshlTnMgdha3brXBRFXB+cWtYvJjjPhvmq3xqpbioi4w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@rollup/plugin-commonjs": "^28.0.1",
|
||||
"@rollup/plugin-json": "^6.1.0",
|
||||
"@rollup/plugin-node-resolve": "^16.0.0",
|
||||
"rollup": "^4.9.5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@sveltejs/kit": "^2.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@sveltejs/adapter-node/node_modules/@rollup/plugin-node-resolve": {
|
||||
"version": "16.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-16.0.0.tgz",
|
||||
"integrity": "sha512-0FPvAeVUT/zdWoO0jnb/V5BlBsUSNfkIOtFHzMO4H9MOklrmQFY6FduVHKucNb/aTFxvnGhj4MNj/T1oNdDfNg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@rollup/pluginutils": "^5.0.1",
|
||||
"@types/resolve": "1.20.2",
|
||||
"deepmerge": "^4.2.2",
|
||||
"is-module": "^1.0.0",
|
||||
"resolve": "^1.22.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"rollup": "^2.78.0||^3.0.0||^4.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"rollup": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@sveltejs/kit": {
|
||||
"version": "2.5.28",
|
||||
"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.5.28.tgz",
|
||||
@ -1203,6 +1334,16 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "22.10.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.5.tgz",
|
||||
"integrity": "sha512-F8Q+SeGimwOo86fiovQh8qiXfFEh2/ocYv7tU5pJ3EXMSSxk1Joj5wefpFK2fHTf/N6HKGSxIDBT9f3gCxXPkQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"undici-types": "~6.20.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/resolve": {
|
||||
"version": "1.20.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
|
||||
@ -1996,6 +2137,13 @@
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/commondir": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
|
||||
"integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/concat-map": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
|
||||
@ -2639,6 +2787,33 @@
|
||||
"url": "https://github.com/sponsors/rawify"
|
||||
}
|
||||
},
|
||||
"node_modules/framer-motion": {
|
||||
"version": "11.17.0",
|
||||
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.17.0.tgz",
|
||||
"integrity": "sha512-uTNLH9JPMD3ad14WBt3KYRTR+If4tGPLgKTKTIIPaEBMkvazs6EkWNcmCh65qA/tyinOqIbQiuCorXX0qQsNoQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"motion-dom": "^11.16.4",
|
||||
"motion-utils": "^11.16.0",
|
||||
"tslib": "^2.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/is-prop-valid": "*",
|
||||
"react": "^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@emotion/is-prop-valid": {
|
||||
"optional": true
|
||||
},
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/fsevents": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
|
||||
@ -3179,6 +3354,47 @@
|
||||
"node": ">=16 || 14 >=14.17"
|
||||
}
|
||||
},
|
||||
"node_modules/motion": {
|
||||
"version": "11.17.0",
|
||||
"resolved": "https://registry.npmjs.org/motion/-/motion-11.17.0.tgz",
|
||||
"integrity": "sha512-mWZhIOWH2slNXPUWhr6cEu98bl9NMX7u9r7vdNI+Bm3/jrOEa3e44GmyUuwXr9hWR+rWII27YTnKb6CDD1vU2g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"framer-motion": "^11.17.0",
|
||||
"tslib": "^2.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/is-prop-valid": "*",
|
||||
"react": "^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@emotion/is-prop-valid": {
|
||||
"optional": true
|
||||
},
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/motion-dom": {
|
||||
"version": "11.16.4",
|
||||
"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.16.4.tgz",
|
||||
"integrity": "sha512-2wuCie206pCiP2K23uvwJeci4pMFfyQKpWI0Vy6HrCTDzDCer4TsYtT7IVnuGbDeoIV37UuZiUr6SZMHEc1Vww==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"motion-utils": "^11.16.0"
|
||||
}
|
||||
},
|
||||
"node_modules/motion-utils": {
|
||||
"version": "11.16.0",
|
||||
"resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.16.0.tgz",
|
||||
"integrity": "sha512-ngdWPjg31rD4WGXFi0eZ00DQQqKKu04QExyv/ymlC+3k+WIgYVFbt6gS5JsFPbJODTF/r8XiE/X+SsoT9c0ocw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/mri": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
|
||||
@ -3481,6 +3697,12 @@
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/pocketbase": {
|
||||
"version": "0.25.0",
|
||||
"resolved": "https://registry.npmjs.org/pocketbase/-/pocketbase-0.25.0.tgz",
|
||||
"integrity": "sha512-xbjiQG/tnh2HsjZrTW7ZEJASvl4hmGAB5PQAmNRkRU8BmrPib7zwKyXdiYJl34QN7ADpqykZD2lAMdDtrrQbuw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/postcss": {
|
||||
"version": "8.4.47",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
|
||||
@ -4696,6 +4918,12 @@
|
||||
"integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/tslib": {
|
||||
"version": "2.8.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
|
||||
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
||||
"license": "0BSD"
|
||||
},
|
||||
"node_modules/type-check": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
|
||||
@ -4747,6 +4975,13 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/undici-types": {
|
||||
"version": "6.20.0",
|
||||
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
|
||||
"integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/update-browserslist-db": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
|
||||
|
||||
@ -17,10 +17,12 @@
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.28.1",
|
||||
"@sveltejs/adapter-auto": "^3.0.0",
|
||||
"@sveltejs/adapter-node": "^5.2.11",
|
||||
"@sveltejs/kit": "^2.5.27",
|
||||
"@sveltejs/vite-plugin-svelte": "^4.0.0",
|
||||
"@tailwindcss/typography": "^0.5.14",
|
||||
"@types/eslint": "^9.6.0",
|
||||
"@types/node": "^22.10.5",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint": "^9.0.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
@ -41,6 +43,8 @@
|
||||
"dependencies": {
|
||||
"flowbite": "^2.5.1",
|
||||
"flowbite-svelte": "^0.46.16",
|
||||
"flowbite-svelte-icons": "^1.6.1"
|
||||
"flowbite-svelte-icons": "^1.6.1",
|
||||
"motion": "^11.17.0",
|
||||
"pocketbase": "^0.25.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,10 @@
|
||||
@import 'tailwindcss/base';
|
||||
@import 'tailwindcss/components';
|
||||
@import 'tailwindcss/utilities';
|
||||
body {
|
||||
position: relative;
|
||||
min-height: 100svh;
|
||||
}
|
||||
html {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
@ -9,34 +9,38 @@
|
||||
Input,
|
||||
Avatar
|
||||
} from 'flowbite-svelte';
|
||||
import { CartOutline, SearchOutline } from 'flowbite-svelte-icons';
|
||||
import { CartOutline, SearchOutline, StarOutline } from 'flowbite-svelte-icons';
|
||||
import ShoppingCart from './ShoppingCart.svelte';
|
||||
</script>
|
||||
|
||||
<Navbar>
|
||||
<Navbar class="sticky top-0 z-50 bg-white shadow-sm">
|
||||
<NavBrand href="/">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1520763185298-1b434c919102?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
class="me-3 h-6 sm:h-9"
|
||||
src="https://www.edvring.info/dam/jcr:334766c1-59b9-40ed-b5fa-727d549d4e88/edvLogo.svg"
|
||||
class="me-3 h-7 sm:h-9"
|
||||
alt="Flowbite Logo"
|
||||
/>
|
||||
<span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Webshop</span>
|
||||
</NavBrand>
|
||||
|
||||
<div class="relative hidden md:block">
|
||||
<!-- <div class="relative hidden md:block">
|
||||
<div class="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3">
|
||||
<SearchOutline class="h-4 w-4" />
|
||||
</div>
|
||||
<Input id="search-navbar" class="ps-10" placeholder="Search..." />
|
||||
</div>
|
||||
<Input id="search-navbar" class="w-96 ps-10" placeholder="Search..." />
|
||||
</div> -->
|
||||
|
||||
<div class="flex">
|
||||
<Avatar
|
||||
href="/profile"
|
||||
src="https://images.unsplash.com/photo-1520763185298-1b434c919102?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
class="m-1 me-4"
|
||||
src="https://media.istockphoto.com/id/1223671392/de/vektor/standardprofilbild-avatar-fotoplatzhalter-vektor-illustration.jpg?s=612x612&w=0&k=20&c=vtYE5RcgwgrJ1Zg6r66xN25LpXS_xsxZ8NqtvRQ9w6I="
|
||||
class="m-1 me-4 h-10 border-2"
|
||||
/>
|
||||
<Button>
|
||||
<CartOutline size="lg"></CartOutline>
|
||||
</Button>
|
||||
<a href="/favourites">
|
||||
<Button class="me-2 h-12">
|
||||
<StarOutline size="lg" />
|
||||
</Button>
|
||||
</a>
|
||||
<ShoppingCart />
|
||||
</div>
|
||||
</Navbar>
|
||||
|
||||
@ -1,28 +1,21 @@
|
||||
import type { User } from './types';
|
||||
const USER_KEY = 'user';
|
||||
const PASS_KEY = 'username';
|
||||
|
||||
const key = 'user';
|
||||
const key2 = 'username';
|
||||
export const login = (user: string, password: string) => {
|
||||
localStorage.setItem(USER_KEY, user);
|
||||
localStorage.setItem(PASS_KEY, password);
|
||||
};
|
||||
|
||||
function login(user: User) {
|
||||
localStorage.setItem(key, btoa(`${user.username}:${user.password}`));
|
||||
localStorage.setItem(key2, user.username);
|
||||
}
|
||||
export const logout = () => {
|
||||
localStorage.removeItem(USER_KEY);
|
||||
localStorage.removeItem(PASS_KEY);
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
function logout() {
|
||||
localStorage.removeItem(key);
|
||||
localStorage.removeItem(key2);
|
||||
}
|
||||
export const loggedIn = () => localStorage.getItem(USER_KEY) !== null;
|
||||
|
||||
function loggedIn() {
|
||||
return localStorage.getItem(key) !== null;
|
||||
}
|
||||
export const name = () => localStorage.getItem(PASS_KEY) ?? '';
|
||||
|
||||
function name() {
|
||||
return localStorage.getItem(key2) ?? '';
|
||||
}
|
||||
|
||||
function auth() {
|
||||
return localStorage.getItem(key);
|
||||
}
|
||||
export const auth = () => localStorage.getItem(USER_KEY);
|
||||
|
||||
export default { login, logout, loggedIn, name, auth };
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
<script>
|
||||
import Footer from '../../components/Footer.svelte';
|
||||
import Navbar from '../../components/navbar.svelte';
|
||||
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
<Navbar></Navbar>
|
||||
|
||||
{@render children?.()}
|
||||
<Footer></Footer>
|
||||
|
||||
@ -1,38 +1,461 @@
|
||||
<script>
|
||||
import { Card, Button } from 'flowbite-svelte';
|
||||
import { CartPlusOutline, StarOutline } from 'flowbite-svelte-icons';
|
||||
<script lang="ts">
|
||||
import { addToCart } from '$lib/stores/cartStore';
|
||||
import { removeFromFavorites, addToFavorites, appStore, favorites } from '$lib/stores/store';
|
||||
import { Card, Button, Badge, Input, Select, Toast, Spinner } from 'flowbite-svelte';
|
||||
import { CartPlusOutline, HeartOutline, HeartSolid, SearchOutline } from 'flowbite-svelte-icons';
|
||||
import ImageModal from '../../../components/imageModal.svelte';
|
||||
import { derived, writable, type Writable } from 'svelte/store';
|
||||
import { fade, fly, scale } from 'svelte/transition';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
// Create an array to loop over
|
||||
let cards = Array(9).fill({
|
||||
title: 'Tulpe',
|
||||
description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1520763185298-1b434c919102?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
|
||||
});
|
||||
interface Product {
|
||||
id: number;
|
||||
title: string;
|
||||
description: string;
|
||||
imageUrl: string;
|
||||
price: number;
|
||||
category?: string;
|
||||
}
|
||||
|
||||
// Products array and state management
|
||||
const products: Product[] = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Tulip',
|
||||
description: 'Beautiful tulips for your garden.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1520763185298-1b434c919102?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
|
||||
price: 10
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Rose',
|
||||
description: 'Elegant roses for special occasions.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1582794543139-8ac9cb0f7b11?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
|
||||
price: 15
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Sunflower',
|
||||
description: 'Bright sunflowers to light up your day.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1535382985264-7ea131537c07?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTQxfHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
|
||||
price: 12
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Orchid',
|
||||
description: 'Exotic orchids for a touch of elegance.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1531217182035-78d279dcdb7f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8T3JjaGlkfGVufDB8fDB8fHww',
|
||||
price: 25
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Lily',
|
||||
description: 'Fragrant lilies for a serene atmosphere.',
|
||||
imageUrl:
|
||||
'https://plus.unsplash.com/premium_photo-1676654936609-e264dd7b9dab?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTM1fHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
|
||||
price: 18
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'Daisy',
|
||||
description: 'Cheerful daisies for a fresh look.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1496098570671-efe44b569a00?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTQ4fHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
|
||||
price: 8
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: 'Carnation',
|
||||
description: 'Classic carnations for any occasion.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1587316830148-c9b01df2da38?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Njl8fGZsb3dlcnxlbnwwfHwwfHx8MA%3D%3D',
|
||||
price: 9
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: 'Peony',
|
||||
description: 'Lush peonies for a luxurious feel.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1579053778004-3a4d3f0fae19?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTU2fHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
|
||||
price: 22
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: 'Hydrangea',
|
||||
description: 'Stunning hydrangeas for a bold statement.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1552409905-46aa1e84e2e8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTY5fHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
|
||||
price: 20
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
title: 'Lavender',
|
||||
description: 'Soothing lavender for relaxation.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1490163212432-2c8e584dc243?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjI3fHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
|
||||
price: 14
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
title: 'Iris',
|
||||
description: 'Vibrant irises for a pop of color.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1583693034345-b6c1d5b2ffa6?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjUwfHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
|
||||
price: 16
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
title: 'Daffodil',
|
||||
description: 'Bright daffodils to welcome spring.',
|
||||
imageUrl:
|
||||
'https://plus.unsplash.com/premium_photo-1676070094538-7663fb7c2745?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8RGFmZm9kaWx8ZW58MHx8MHx8fDA%3D',
|
||||
price: 11
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
title: 'Poppy',
|
||||
description: 'Vivid poppies for a bold statement.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1527703137818-60612b595c72?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjIwfHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
|
||||
price: 13
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
title: 'Marigold',
|
||||
description: 'Golden marigolds for a festive touch.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1559563362-c667ba5f5480?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjA5fHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
|
||||
price: 7
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
title: 'Chrysanthemum',
|
||||
description: 'Elegant chrysanthemums for autumn.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1498323094960-d1a30fae4c5c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTgwfHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
|
||||
price: 17
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
title: 'Gerbera',
|
||||
description: 'Cheerful gerberas for a joyful vibe.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1478801928079-ff8b78b1bef2?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTcyfHxmbG93ZXJ8ZW58MHx8MHx8fDA%3D',
|
||||
price: 19
|
||||
},
|
||||
{
|
||||
id: 17,
|
||||
title: 'Anemone',
|
||||
description: 'Delicate anemones for a subtle charm.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1496571330383-9b977f4a021d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OTR8fGZsb3dlcnxlbnwwfHwwfHx8MA%3D%3D',
|
||||
price: 21
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
title: 'Ranunculus',
|
||||
description: 'Layered ranunculus for a romantic touch.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1578972497170-bfc780c65f65?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nzh8fGZsb3dlcnxlbnwwfHwwfHx8MA%3D%3D',
|
||||
price: 23
|
||||
},
|
||||
{
|
||||
id: 19,
|
||||
title: 'Freesia',
|
||||
description: 'Fragrant freesias for a sweet aroma.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1496062031456-07b8f162a322?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjF8fGZsb3dlcnxlbnwwfHwwfHx8MA%3D%3D',
|
||||
price: 24
|
||||
},
|
||||
{
|
||||
id: 20,
|
||||
title: 'Amaryllis',
|
||||
description: 'Striking amaryllis for a dramatic effect.',
|
||||
imageUrl:
|
||||
'https://images.unsplash.com/photo-1487139975590-b4f1dce9b035?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8Zmxvd2VyfGVufDB8fDB8fHww',
|
||||
price: 26
|
||||
}
|
||||
];
|
||||
|
||||
const itemsPerPage = 9;
|
||||
const currentPage: Writable<number> = writable(1);
|
||||
const searchQuery: Writable<string> = writable('');
|
||||
const selectedCategory: Writable<string> = writable('all');
|
||||
const isLoading: Writable<boolean> = writable(false);
|
||||
const showToast: Writable<boolean> = writable(false);
|
||||
const toastMessage: Writable<string> = writable('');
|
||||
|
||||
// Add loading simulation
|
||||
const simulateLoading = async () => {
|
||||
isLoading.set(true);
|
||||
await new Promise((resolve) => setTimeout(resolve, 800));
|
||||
isLoading.set(false);
|
||||
};
|
||||
|
||||
// Enhanced filtered products with proper typing
|
||||
const filteredProducts = derived<[Writable<string>, Writable<string>], Product[]>(
|
||||
[searchQuery, selectedCategory],
|
||||
([$searchQuery, $selectedCategory], set) => {
|
||||
simulateLoading().then(() => {
|
||||
if (!$searchQuery && $selectedCategory === 'all') {
|
||||
set(products);
|
||||
return;
|
||||
}
|
||||
|
||||
const searchLower = $searchQuery.toLowerCase();
|
||||
const filtered = products.filter((product) => {
|
||||
if ($selectedCategory !== 'all' && product.category !== $selectedCategory) return false;
|
||||
if (!searchLower) return true;
|
||||
|
||||
return (
|
||||
product.title.toLowerCase().includes(searchLower) ||
|
||||
product.description.toLowerCase().includes(searchLower)
|
||||
);
|
||||
});
|
||||
set(filtered);
|
||||
});
|
||||
},
|
||||
[] as Product[]
|
||||
);
|
||||
|
||||
const paginatedProducts = derived<[typeof filteredProducts, Writable<number>], Product[]>(
|
||||
[filteredProducts, currentPage],
|
||||
([$filteredProducts, $currentPage]) => {
|
||||
const start = ($currentPage - 1) * itemsPerPage;
|
||||
return $filteredProducts.slice(start, start + itemsPerPage);
|
||||
}
|
||||
);
|
||||
|
||||
const totalPages = derived<typeof filteredProducts, number>(
|
||||
filteredProducts,
|
||||
($filteredProducts) => Math.ceil($filteredProducts.length / itemsPerPage)
|
||||
);
|
||||
|
||||
const goToPage = (page: number) => {
|
||||
currentPage.set(page);
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
let searchTimeout: NodeJS.Timeout;
|
||||
const handleSearch = (event: Event) => {
|
||||
const target = event.target as HTMLInputElement;
|
||||
clearTimeout(searchTimeout);
|
||||
isLoading.set(true);
|
||||
searchTimeout = setTimeout(() => {
|
||||
searchQuery.set(target.value);
|
||||
currentPage.set(1);
|
||||
}, 300);
|
||||
};
|
||||
|
||||
const handleCategoryChange = (event: Event) => {
|
||||
const target = event.target as HTMLSelectElement;
|
||||
selectedCategory.set(target.value);
|
||||
currentPage.set(1);
|
||||
simulateLoading();
|
||||
};
|
||||
|
||||
const toggleFavorite = (product: Product) => {
|
||||
const isFavorite = $favorites.some((item: Product) => item.id === product.id);
|
||||
if (isFavorite) {
|
||||
removeFromFavorites(product.id);
|
||||
showToast.set(true);
|
||||
toastMessage.set('Removed from favorites');
|
||||
} else {
|
||||
addToFavorites(product);
|
||||
showToast.set(true);
|
||||
toastMessage.set('Added to favorites');
|
||||
}
|
||||
setTimeout(() => showToast.set(false), 2000);
|
||||
};
|
||||
|
||||
const handleAddToCart = (product: Product) => {
|
||||
addToCart({ ...product, quantity: 1 });
|
||||
showToast.set(true);
|
||||
toastMessage.set('Added to cart');
|
||||
setTimeout(() => showToast.set(false), 2000);
|
||||
};
|
||||
|
||||
let modalOpen = false;
|
||||
let selectedImage = {
|
||||
url: '',
|
||||
title: ''
|
||||
};
|
||||
|
||||
const openImageModal = (product: Product) => {
|
||||
selectedImage = {
|
||||
url: product.imageUrl,
|
||||
title: product.title
|
||||
};
|
||||
modalOpen = true;
|
||||
};
|
||||
|
||||
const closeImageModal = () => {
|
||||
modalOpen = false;
|
||||
};
|
||||
|
||||
// Navigate to item page
|
||||
const goToItemPage = (productId: number) => {
|
||||
goto(`/item/${productId}`);
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="mx-auto my-6 grid w-fit grid-cols-3 gap-10">
|
||||
{#each cards as card}
|
||||
<Card img={card.imageUrl} class="">
|
||||
<div class="holder flex">
|
||||
<div class="left w-fit">
|
||||
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
|
||||
{card.title}
|
||||
</h5>
|
||||
<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
|
||||
{card.description}
|
||||
</p>
|
||||
</div>
|
||||
<main class="container mx-auto px-4 py-8">
|
||||
<div class="mb-8 space-y-4" in:fly={{ y: -20, duration: 800, delay: 200 }}>
|
||||
<p class="text-lg text-gray-600 dark:text-gray-400">
|
||||
Discover our beautiful collection of fresh flowers
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="right grid min-w-fit gap-4">
|
||||
<Button>
|
||||
<CartPlusOutline class="h-6 w-6 text-white" />
|
||||
</Button>
|
||||
<Button>
|
||||
<StarOutline class=" h-6 w-6 text-white" />
|
||||
</Button>
|
||||
<div class="mb-6 grid gap-4 sm:grid-cols-2" in:fly={{ y: -20, duration: 600, delay: 200 }}>
|
||||
<div class="relative">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search products..."
|
||||
value={$searchQuery}
|
||||
on:input={handleSearch}
|
||||
>
|
||||
<SearchOutline slot="left" class="h-5 w-5" />
|
||||
</Input>
|
||||
</div>
|
||||
<Select on:change={handleCategoryChange} value={$selectedCategory}>
|
||||
<option value="all">All Categories</option>
|
||||
<option value="bouquets">Bouquets</option>
|
||||
<option value="single">Single Flowers</option>
|
||||
<option value="arrangement">Arrangements</option>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{#if $isLoading}
|
||||
<div class="flex justify-center py-12" in:fade>
|
||||
<Spinner size="12" />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
{#each $paginatedProducts as product, i (product.id)}
|
||||
<div in:fly={{ y: 20, duration: 400, delay: i * 100 }} out:fade={{ duration: 200 }}>
|
||||
<Card
|
||||
padding="none"
|
||||
class="h-fit overflow-hidden transition-shadow duration-300 hover:shadow-lg"
|
||||
>
|
||||
<div
|
||||
class="relative aspect-[4/3] w-full overflow-hidden"
|
||||
on:click={() => openImageModal(product)}
|
||||
on:keydown={(e) => e.key === 'Enter' && openImageModal(product)}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<img
|
||||
src={product.imageUrl}
|
||||
alt={product.title}
|
||||
class="absolute h-full w-full object-cover transition-transform duration-300 hover:scale-110"
|
||||
loading="lazy"
|
||||
/>
|
||||
<button
|
||||
class="absolute right-2 top-2 rounded-full bg-white/80 p-2 transition-all duration-300 hover:scale-110 hover:bg-white"
|
||||
on:click|stopPropagation={() => toggleFavorite(product)}
|
||||
>
|
||||
{#if $favorites.some((item: Product) => item.id === product.id)}
|
||||
<div in:scale={{ duration: 200 }}>
|
||||
<HeartSolid class="h-6 w-6 text-red-500" />
|
||||
</div>
|
||||
{:else}
|
||||
<div in:scale={{ duration: 200 }}>
|
||||
<HeartOutline class="h-6 w-6 text-gray-500" />
|
||||
</div>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex h-full flex-col p-4">
|
||||
<div class="flex-grow space-y-2">
|
||||
<h5
|
||||
on:click={() => goToItemPage(product.id)}
|
||||
class="text-xl font-bold tracking-tight text-gray-900 dark:text-white"
|
||||
>
|
||||
{product.title}
|
||||
</h5>
|
||||
<p class="text-sm text-gray-700 dark:text-gray-400">
|
||||
{product.description}
|
||||
</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
${product.price.toFixed(2)}
|
||||
</p>
|
||||
{#if $favorites.some((item: Product) => item.id === product.id)}
|
||||
<Badge color="red" class="animate-pulse">Favorite</Badge>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<Button
|
||||
class="w-full transition-transform duration-200 hover:scale-105"
|
||||
on:click={() => handleAddToCart(product)}
|
||||
>
|
||||
<CartPlusOutline class="mr-2 h-5 w-5" />
|
||||
Add to Cart
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if $filteredProducts.length === 0 && products.length === 0}
|
||||
<div class="mt-8 text-center" in:fade>
|
||||
<p class="text-lg text-gray-600">No products found matching your criteria.</p>
|
||||
</div>
|
||||
</Card>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if $totalPages > 1}
|
||||
<div class="mt-8 flex flex-wrap justify-center gap-2" in:fly={{ y: 20, duration: 800 }}>
|
||||
<Button
|
||||
color="light"
|
||||
disabled={$currentPage === 1}
|
||||
on:click={() => goToPage($currentPage - 1)}
|
||||
>
|
||||
Previous
|
||||
</Button>
|
||||
{#each Array($totalPages) as _, i}
|
||||
<Button
|
||||
color={$currentPage === i + 1 ? 'primary' : 'light'}
|
||||
class="transition-transform duration-200 hover:scale-105"
|
||||
on:click={() => goToPage(i + 1)}
|
||||
>
|
||||
{i + 1}
|
||||
</Button>
|
||||
{/each}
|
||||
<Button
|
||||
color="light"
|
||||
disabled={$currentPage === $totalPages}
|
||||
on:click={() => goToPage($currentPage + 1)}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</main>
|
||||
|
||||
{#if $showToast}
|
||||
<div
|
||||
class="fixed bottom-4 right-4 z-50"
|
||||
in:fly={{ x: 20, duration: 300, easing: quintOut }}
|
||||
out:fade
|
||||
>
|
||||
<Toast>
|
||||
{$toastMessage}
|
||||
</Toast>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<ImageModal
|
||||
bind:open={modalOpen}
|
||||
imageUrl={selectedImage.url}
|
||||
title={selectedImage.title}
|
||||
onClose={closeImageModal}
|
||||
/>
|
||||
|
||||
@ -1,23 +1,115 @@
|
||||
<script>
|
||||
import { Button, Card, Input } from 'flowbite-svelte';
|
||||
<script lang="ts">
|
||||
import { favorites } from '$lib/stores/store';
|
||||
import { Card, Button, Badge, Input, Textarea } from 'flowbite-svelte';
|
||||
import { StarSolid, CheckCircleOutline, PenOutline } from 'flowbite-svelte-icons';
|
||||
|
||||
// Example user data
|
||||
const user = {
|
||||
name: 'John Doe',
|
||||
email: 'john.doe@example.com',
|
||||
address: '123 Main St, City, Country'
|
||||
};
|
||||
|
||||
// Example order history
|
||||
const orders = [
|
||||
{
|
||||
id: 1,
|
||||
date: '2023-10-01',
|
||||
items: ['Tulip Bouquet', 'Rose Bouquet'],
|
||||
total: 60,
|
||||
status: 'Delivered'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
date: '2023-09-25',
|
||||
items: ['Sunflower Bouquet'],
|
||||
total: 30,
|
||||
status: 'Shipped'
|
||||
}
|
||||
];
|
||||
|
||||
// State for editing profile
|
||||
let isEditing = false;
|
||||
let name = user.name;
|
||||
let email = user.email;
|
||||
let address = user.address;
|
||||
|
||||
// Handle profile update
|
||||
const updateProfile = () => {
|
||||
user.name = name;
|
||||
user.email = email;
|
||||
user.address = address;
|
||||
isEditing = false;
|
||||
// You could add an API call here to update the user's profile
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="flex h-[90svh] flex-wrap content-center">
|
||||
<Card class="mx-auto max-h-fit">
|
||||
<form action="">
|
||||
<div class="formItem">
|
||||
<label for="">Company Name:</label>
|
||||
<Input type="text"></Input>
|
||||
</div>
|
||||
<div class="formItem">
|
||||
<label for="">Email:</label>
|
||||
<Input type="email"></Input>
|
||||
</div>
|
||||
<div class="formItem">
|
||||
<label for="">GLN:</label>
|
||||
<Input type="number"></Input>
|
||||
</div>
|
||||
<Button>Submit</Button>
|
||||
</form>
|
||||
</Card>
|
||||
<!-- Welcome Section -->
|
||||
<section class="bg-gradient-to-r from-pink-100 to-purple-100 py-12">
|
||||
<div class="container mx-auto px-4">
|
||||
<h1 class="text-4xl font-bold text-gray-900">Welcome, {user.name}!</h1>
|
||||
<p class="text-lg text-gray-600">Manage your orders, favorites, and account settings here.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Dashboard Content -->
|
||||
<div class="container mx-auto grid grid-cols-1 gap-8 px-4 py-8 lg:grid-cols-3">
|
||||
<!-- Order History -->
|
||||
<div class="lg:col-span-2">
|
||||
<h2 class="mb-6 text-2xl font-bold text-gray-900">Order History</h2>
|
||||
<div class="space-y-4">
|
||||
{#each orders as order}
|
||||
<Card class="p-6">
|
||||
<div class="mb-4 flex items-center justify-between">
|
||||
<h3 class="text-xl font-bold text-gray-900">Order #{order.id}</h3>
|
||||
<Badge color={order.status === 'Delivered' ? 'green' : 'blue'}>
|
||||
{order.status}
|
||||
</Badge>
|
||||
</div>
|
||||
<p class="mb-2 text-gray-600">
|
||||
<strong>Date:</strong>
|
||||
{order.date}
|
||||
</p>
|
||||
<p class="mb-2 text-gray-600">
|
||||
<strong>Items:</strong>
|
||||
{order.items.join(', ')}
|
||||
</p>
|
||||
<p class="text-gray-600">
|
||||
<strong>Total:</strong> ${order.total.toFixed(2)}
|
||||
</p>
|
||||
</Card>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Account Settings -->
|
||||
<div class="space-y-8">
|
||||
<!-- Account Settings -->
|
||||
<div>
|
||||
<h2 class="mb-6 text-2xl font-bold text-gray-900">Account Settings</h2>
|
||||
<Card class="p-6">
|
||||
{#if isEditing}
|
||||
<form on:submit|preventDefault={updateProfile} class="space-y-4">
|
||||
<Input label="Name" bind:value={name} required />
|
||||
<Input label="Email" type="email" bind:value={email} required />
|
||||
<Textarea label="Address" bind:value={address} required />
|
||||
<div class="flex justify-end space-x-4">
|
||||
<Button color="red" on:click={() => (isEditing = false)}>Cancel</Button>
|
||||
<Button type="submit">Save</Button>
|
||||
</div>
|
||||
</form>
|
||||
{:else}
|
||||
<div class="space-y-4">
|
||||
<p class="text-gray-600"><strong>Name:</strong> {user.name}</p>
|
||||
<p class="text-gray-600"><strong>Email:</strong> {user.email}</p>
|
||||
<p class="text-gray-600"><strong>Address:</strong> {user.address}</p>
|
||||
<Button on:click={() => (isEditing = true)}>
|
||||
<PenOutline class="mr-2 h-5 w-5" />
|
||||
Edit Profile
|
||||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
<script>
|
||||
import '../app.css';
|
||||
let { children } = $props();
|
||||
import { fade, slide } from 'svelte/transition';
|
||||
</script>
|
||||
|
||||
{@render children?.()}
|
||||
<div transition:slide>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
|
||||
@ -2,6 +2,6 @@ import session from '$lib/session.svelte';
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
|
||||
export async function load() {
|
||||
const page = session.loggedIn() ? '/main' : '/login';
|
||||
const page = session.loggedIn() ? '/landing' : '/login';
|
||||
redirect(307, page);
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { Card, Button, Label, Input, Checkbox } from 'flowbite-svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import sessionSvelte from '$lib/session.svelte';
|
||||
|
||||
let username: string = '';
|
||||
let password: string = '';
|
||||
@ -13,7 +14,8 @@
|
||||
}
|
||||
|
||||
loading = true;
|
||||
// success = await API.login({ username, password });
|
||||
sessionSvelte.login(username, password);
|
||||
success = true;
|
||||
loading = false;
|
||||
|
||||
if (success) {
|
||||
@ -25,7 +27,7 @@
|
||||
<div class="flex h-[100svh] flex-wrap content-center">
|
||||
<Card class="mx-auto max-h-fit">
|
||||
<form class="flex flex-col space-y-6" action="/">
|
||||
<h3 class="text-xl font-medium text-gray-900 dark:text-white">Sign in to our platform</h3>
|
||||
<h3 class="text-xl font-medium text-gray-900 dark:text-white">Sign in</h3>
|
||||
<Label class="space-y-2">
|
||||
<span>Email</span>
|
||||
<Input
|
||||
@ -48,12 +50,6 @@
|
||||
</div>
|
||||
<Button type="submit" class="w-full" on:click={login}>Login to your account</Button>
|
||||
<span class="self-center text-red-500" class:invisible={success}>Login failed</span>
|
||||
|
||||
<div class="text-sm font-medium text-gray-500 dark:text-gray-300">
|
||||
Not registered? <a href="/" class="text-primary-700 hover:underline dark:text-primary-500">
|
||||
Create account
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
@ -3,6 +3,6 @@ import { redirect } from '@sveltejs/kit';
|
||||
|
||||
export async function load() {
|
||||
if (session.loggedIn()) {
|
||||
redirect(307, '/');
|
||||
redirect(307, '/landing');
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import adapter from '@sveltejs/adapter-auto';
|
||||
import adapter from '@sveltejs/adapter-node';
|
||||
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
|
||||
@ -13,16 +13,16 @@ export default {
|
||||
colors: {
|
||||
// flowbite-svelte
|
||||
primary: {
|
||||
50: '#FFF5F2',
|
||||
100: '#FFF1EE',
|
||||
200: '#FFE4DE',
|
||||
300: '#FFD5CC',
|
||||
400: '#FFBCAD',
|
||||
500: '#FE795D',
|
||||
600: '#EF562F',
|
||||
700: '#EB4F27',
|
||||
800: '#CC4522',
|
||||
900: '#A5371B'
|
||||
50: '#f2fbf2',
|
||||
100: '#e6f7e6',
|
||||
200: '#c0eac0',
|
||||
300: '#99dc99',
|
||||
400: '#66c566',
|
||||
500: '#266d26' /* Base color */,
|
||||
600: '#205b20',
|
||||
700: '#1a491a',
|
||||
800: '#143714',
|
||||
900: '#0e260e'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user