Compare commits
16 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
15a111d3f7 | ||
|
|
c51332ee03 | ||
|
|
949f8de235 | ||
|
|
e8ee03dfd3 | ||
|
|
99ab6ede2c | ||
|
|
5fbbc2e3dc | ||
|
|
0c709c0dfd | ||
|
|
10de972ca9 | ||
|
|
b1fa853eb6 | ||
|
|
39382fbfdc | ||
|
|
c9713a6e89 | ||
|
|
f6c9aa9034 | ||
|
|
d5ad2a68ff | ||
|
|
36ffb8ef19 | ||
|
|
2421bce5f7 | ||
|
|
996c5389d4 |
0
.gitignore
vendored
Normal file → Executable file
14
index.html
Normal file → Executable file
|
|
@ -12,10 +12,22 @@
|
|||
<link rel="icon" type="image/png" sizes="32x32" href="./App/Logo.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="./App/Logo.png" />
|
||||
<link rel="manifest" href="./site.webmanifest" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Landing Page About My Work and Includ My Cv As Front End Developer Use Reactjs In Syria"
|
||||
/>
|
||||
|
||||
<meta property="og:title" content="My LandingPage" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Landing Page About My Work and Includ My Cv As Front End Developer Use Reactjs In Syria"
|
||||
/>
|
||||
<meta property="og:image" content="./App/Logo.png" />
|
||||
<meta property="og:url" content="https://karimalden.vercel.app" />
|
||||
<meta property="og:type" content="website" />
|
||||
<script type="module" src="/src/index.tsx"></script>
|
||||
|
||||
<title>DM Ecommerce</title>
|
||||
<title>React-Start-App</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
"axios": "^1.7.2",
|
||||
"bootstrap": "^5.3.3",
|
||||
"chart.js": "^4.4.3",
|
||||
"classnames": "^2.5.1",
|
||||
"dayjs": "^1.11.11",
|
||||
"firebase": "^10.12.2",
|
||||
"formik": "^2.4.6",
|
||||
|
|
|
|||
BIN
public/About/Hands.png
Normal file
|
After Width: | Height: | Size: 430 KiB |
BIN
public/About/Laptop.png
Normal file
|
After Width: | Height: | Size: 1.0 MiB |
BIN
public/Activities/data-display/2 25.png
Normal file
|
After Width: | Height: | Size: 2.1 KiB |
BIN
public/Activities/data-display/Rectangle 103.png
Normal file
|
After Width: | Height: | Size: 456 KiB |
1
public/Activities/iconsSearch.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M 21 3 C 11.621094 3 4 10.621094 4 20 C 4 29.378906 11.621094 37 21 37 C 24.710938 37 28.140625 35.804688 30.9375 33.78125 L 44.09375 46.90625 L 46.90625 44.09375 L 33.90625 31.0625 C 36.460938 28.085938 38 24.222656 38 20 C 38 10.621094 30.378906 3 21 3 Z M 21 5 C 29.296875 5 36 11.703125 36 20 C 36 28.296875 29.296875 35 21 35 C 12.703125 35 6 28.296875 6 20 C 6 11.703125 12.703125 5 21 5 Z"/></svg>
|
||||
|
After Width: | Height: | Size: 501 B |
BIN
public/Activities/main.png
Normal file
|
After Width: | Height: | Size: 363 KiB |
BIN
public/Activities/mediaIcons/Group.png
Normal file
|
After Width: | Height: | Size: 729 B |
BIN
public/Activities/mediaIcons/insta.png
Normal file
|
After Width: | Height: | Size: 1.3 KiB |
BIN
public/Activities/mediaIcons/teleg.png
Normal file
|
After Width: | Height: | Size: 951 B |
BIN
public/Activities/mediaIcons/whats.png
Normal file
|
After Width: | Height: | Size: 1.3 KiB |
BIN
public/Cart/CartProduct.png
Normal file
|
After Width: | Height: | Size: 11 KiB |
BIN
public/Home/HeroSection.png
Normal file
|
After Width: | Height: | Size: 2.3 MiB |
BIN
public/Home/big_transparent_leaf.png
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
public/Home/leaf.png
Normal file
|
After Width: | Height: | Size: 2.8 KiB |
BIN
public/Home/notfound_search.png
Normal file
|
After Width: | Height: | Size: 4.5 KiB |
BIN
public/Home/partner1.png
Normal file
|
After Width: | Height: | Size: 17 KiB |
BIN
public/Home/partner2.png
Normal file
|
After Width: | Height: | Size: 4.2 KiB |
BIN
public/Home/small_transparent_leaf.png
Normal file
|
After Width: | Height: | Size: 7.9 KiB |
0
public/Layout/Ar.svg
Normal file → Executable file
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
0
public/Layout/En.svg
Normal file → Executable file
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
BIN
public/Layout/Footer.jpg
Normal file
|
After Width: | Height: | Size: 67 KiB |
27
public/Layout/KarimLogo.svg
Executable file
|
|
@ -0,0 +1,27 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg class="Logo" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1367 766.99">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-2 {
|
||||
fill:white;
|
||||
}
|
||||
|
||||
.cls-3 {
|
||||
fill: transparent;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<g id="Layer_1-2" data-name="Layer 1-2">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path class="cls-2" d="M540.42,301c0-7.67,0-15.33,.96-22.04,0-1.92,.96-1.92,1.92-2.87,33.54-15.33,54.62-42.17,69-75.71,4.79-11.5,7.67-22.04,8.62-34.5,.96-7.67,0-15.33-2.87-23-4.79-10.54-16.29-15.33-28.75-12.46-16.29,3.83-26.83,15.33-36.42,28.75-11.5,17.25-16.29,37.37-20.12,56.54-6.71,31.62-8.62,63.25-10.54,94.87-1.92,26.83-3.83,53.67-7.67,80.5-.96,4.79-1.92,9.58-2.87,14.37-.96,4.79,0,4.79,3.83,3.83,16.29-3.83,31.62-8.62,46-16.29,31.62-15.33,59.42-35.46,84.33-58.46,45.04-43.12,81.46-92,105.41-149.5,13.42-31.62,21.08-65.17,18.21-99.66,0-3.83,0-8.62-.96-12.46-.96-4.79,.96-6.71,4.79-8.62,8.62-3.83,18.21-4.79,27.79-4.79,6.71,0,13.42,.96,21.08,2.87,14.37,2.87,24.92,12.46,32.58,23.96,.96,.96,1.92,2.87,.96,3.83s-2.87,0-3.83,0c-5.75-1.92-11.5-3.83-18.21-2.87-13.42,.96-22.04,8.62-24.92,23-2.87,10.54-2.87,22.04-2.87,33.54,.96,20.12,3.83,40.25,3.83,60.37,0,5.75-1.92,11.5-4.79,17.25-43.12,71.87-98.71,130.33-172.5,171.54-39.29,22.04-79.54,37.37-123.62,47.92-3.83,.96-5.75,1.92-6.71,5.75-14.37,56.54-39.29,107.33-77.62,151.41-25.87,30.67-56.54,54.62-93.92,69.96-18.21,7.67-37.37,11.5-57.5,6.71-26.83-6.71-42.17-24.92-49.83-50.79-14.37-48.87,8.62-104.46,53.67-132.25,17.25-10.54,35.46-18.21,56.54-17.25,5.75,0,10.54,.96,16.29,1.92,4.79,.96,6.71,3.83,6.71,7.67,.96,13.42-4.79,24.92-14.37,33.54-3.83,3.83-7.67,3.83-12.46,0-4.79-3.83-9.58-7.67-14.37-9.58-18.21-9.58-35.46-5.75-48.87,9.58-13.42,15.33-20.12,33.54-24.92,52.71-3.83,17.25-4.79,34.5-3.83,51.75,.96,10.54,2.87,21.08,8.62,30.67,6.71,10.54,16.29,13.42,27.79,10.54,10.54-2.87,20.12-9.58,27.79-18.21,31.62-31.62,56.54-68.04,73.79-110.21,22.04-55.58,39.29-113.08,47.92-172.5,4.79-33.54,10.54-67.08,20.12-99.66,12.46-42.17,28.75-82.42,56.54-116.91,17.25-21.08,36.42-39.29,63.25-46.96,23-6.71,44.08-3.83,61.33,14.37,10.54,10.54,14.37,23.96,15.33,38.33,1.92,25.87-6.71,48.87-18.21,71.87-18.21,35.46-46,61.33-82.42,77.62q1.92,0,.96,0h0Z"/>
|
||||
<path class="cls-2" d="M1056.95,437.08c-2.87-2.87-6.71-5.75-9.58-8.62s-3.83-2.87-5.75,.96c-10.54,24.92-22.04,49.83-34.5,74.75-11.5,21.08-23,42.17-39.29,59.42-5.75,6.71-12.46,12.46-20.12,16.29-15.33,7.67-29.71,1.92-36.42-13.42-3.83-7.67-3.83-15.33-3.83-23.96,0-21.08,5.75-41.21,12.46-60.37,7.67-21.08,15.33-41.21,29.71-58.46,9.58-11.5,21.08-22.04,36.42-25.87,6.71-1.92,13.42-.96,19.17,0,1.92,0,2.87,.96,3.83-1.92,9.58-23.96,19.17-48.87,26.83-73.79-3.83,3.83-7.67,8.62-11.5,12.46-9.58,10.54-21.08,21.08-33.54,27.79-27.79,17.25-56.54,13.42-80.5-9.58-14.37-13.42-23-30.67-29.71-48.87-1.92-4.79-3.83-9.58-6.71-15.33-.96,8.62-.96,16.29-2.87,24.92-6.71,46-15.33,92-40.25,132.25-15.33,25.87-37.37,45.04-67.08,53.67-.96,0-1.92,0-2.87,.96-.96,0-1.92,.96-1.92-.96,32.58-10.54,52.71-34.5,66.12-65.17,8.62-20.12,13.42-41.21,17.25-63.25,5.75-38.33,4.79-76.67,4.79-115,0-12.46-1.92-24.92,0-36.42,.96-8.62,4.79-15.33,13.42-19.17,5.75-2.87,10.54-1.92,16.29,.96,7.67,5.75,12.46,13.42,16.29,21.08,9.58,17.25,15.33,36.42,23,54.62,4.79,12.46,10.54,24.92,18.21,36.42,12.46,18.21,24.92,20.12,42.17,6.71,17.25-13.42,30.67-30.67,42.17-48.87,27.79-41.21,50.79-86.25,70.92-132.25,5.75-13.42,11.5-26.83,18.21-39.29,4.79-8.62,12.46-12.46,22.04-11.5,8.62,.96,14.37,6.71,16.29,15.33,1.92,6.71,.96,12.46-.96,19.17-12.46,43.12-26.83,86.25-40.25,128.41-18.21,55.58-37.37,111.16-59.42,164.83-.96,2.87-.96,3.83,.96,5.75,3.83,3.83,6.71,7.67,10.54,12.46q.96,2.87,0,2.87h0Z"/>
|
||||
<path class="cls-2" d="M561.5,456.25c1.92,3.83,.96,8.62,.96,12.46-.96,44.08,4.79,87.21,22.04,127.46,4.79,12.46,11.5,23,21.08,32.58,17.25,18.21,40.25,23,63.25,12.46,20.12-9.58,35.46-23.96,50.79-40.25,2.87-2.87,5.75-5.75,7.67-9.58,1.92-2.87,4.79-2.87,7.67-1.92,16.29,5.75,28.75,15.33,37.37,29.71,2.87,4.79,2.87,9.58-.96,14.37-15.33,20.12-34.5,35.46-59.42,41.21-22.04,4.79-43.12,.96-63.25-9.58-27.79-14.37-48.87-36.42-66.12-62.29-19.17-29.71-31.62-62.29-38.33-96.79-1.92-8.62-1.92-17.25-2.87-25.87,0-1.92,0-2.87,.96-3.83,5.75-6.71,12.46-13.42,19.17-20.12h0Z"/>
|
||||
<path class="cls-2" d="M844.21,140.96c0-6.71,4.79-11.5,10.54-11.5s11.5,5.75,11.5,11.5-4.79,11.5-11.5,11.5c-5.75,0-10.54-4.79-10.54-11.5h0Z"/>
|
||||
</g>
|
||||
<path class="cls-3" d="M935.25,547.29c-.96-4.79-1.92-8.62-1.92-12.46,.96-32.58,6.71-64.21,21.08-93.91,6.71-12.46,14.37-23.96,27.79-31.62,5.75-2.87,12.46-4.79,19.17-3.83,2.87,0,2.87,.96,1.92,2.87-17.25,41.21-33.54,83.37-55.58,121.71-2.88,6.71-7.67,11.5-12.46,17.25h0Z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.6 KiB |
54
public/Layout/KarimLogo.tsx
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
import React from "react";
|
||||
|
||||
const KarimLogo = () => {
|
||||
return (
|
||||
<>
|
||||
<svg
|
||||
className="KarimLogo"
|
||||
id="Layer_1"
|
||||
data-name="Layer 1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 1367 766.99"
|
||||
>
|
||||
<defs>
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html:
|
||||
"\n .cls-2 {\n fill:white;\n }\n\n .cls-3 {\n fill: transparent;\n }\n ",
|
||||
}}
|
||||
/>
|
||||
</defs>
|
||||
<g id="Layer_1-2" data-name="Layer 1-2">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
className="cls-2"
|
||||
d="M540.42,301c0-7.67,0-15.33,.96-22.04,0-1.92,.96-1.92,1.92-2.87,33.54-15.33,54.62-42.17,69-75.71,4.79-11.5,7.67-22.04,8.62-34.5,.96-7.67,0-15.33-2.87-23-4.79-10.54-16.29-15.33-28.75-12.46-16.29,3.83-26.83,15.33-36.42,28.75-11.5,17.25-16.29,37.37-20.12,56.54-6.71,31.62-8.62,63.25-10.54,94.87-1.92,26.83-3.83,53.67-7.67,80.5-.96,4.79-1.92,9.58-2.87,14.37-.96,4.79,0,4.79,3.83,3.83,16.29-3.83,31.62-8.62,46-16.29,31.62-15.33,59.42-35.46,84.33-58.46,45.04-43.12,81.46-92,105.41-149.5,13.42-31.62,21.08-65.17,18.21-99.66,0-3.83,0-8.62-.96-12.46-.96-4.79,.96-6.71,4.79-8.62,8.62-3.83,18.21-4.79,27.79-4.79,6.71,0,13.42,.96,21.08,2.87,14.37,2.87,24.92,12.46,32.58,23.96,.96,.96,1.92,2.87,.96,3.83s-2.87,0-3.83,0c-5.75-1.92-11.5-3.83-18.21-2.87-13.42,.96-22.04,8.62-24.92,23-2.87,10.54-2.87,22.04-2.87,33.54,.96,20.12,3.83,40.25,3.83,60.37,0,5.75-1.92,11.5-4.79,17.25-43.12,71.87-98.71,130.33-172.5,171.54-39.29,22.04-79.54,37.37-123.62,47.92-3.83,.96-5.75,1.92-6.71,5.75-14.37,56.54-39.29,107.33-77.62,151.41-25.87,30.67-56.54,54.62-93.92,69.96-18.21,7.67-37.37,11.5-57.5,6.71-26.83-6.71-42.17-24.92-49.83-50.79-14.37-48.87,8.62-104.46,53.67-132.25,17.25-10.54,35.46-18.21,56.54-17.25,5.75,0,10.54,.96,16.29,1.92,4.79,.96,6.71,3.83,6.71,7.67,.96,13.42-4.79,24.92-14.37,33.54-3.83,3.83-7.67,3.83-12.46,0-4.79-3.83-9.58-7.67-14.37-9.58-18.21-9.58-35.46-5.75-48.87,9.58-13.42,15.33-20.12,33.54-24.92,52.71-3.83,17.25-4.79,34.5-3.83,51.75,.96,10.54,2.87,21.08,8.62,30.67,6.71,10.54,16.29,13.42,27.79,10.54,10.54-2.87,20.12-9.58,27.79-18.21,31.62-31.62,56.54-68.04,73.79-110.21,22.04-55.58,39.29-113.08,47.92-172.5,4.79-33.54,10.54-67.08,20.12-99.66,12.46-42.17,28.75-82.42,56.54-116.91,17.25-21.08,36.42-39.29,63.25-46.96,23-6.71,44.08-3.83,61.33,14.37,10.54,10.54,14.37,23.96,15.33,38.33,1.92,25.87-6.71,48.87-18.21,71.87-18.21,35.46-46,61.33-82.42,77.62q1.92,0,.96,0h0Z"
|
||||
/>
|
||||
<path
|
||||
className="cls-2"
|
||||
d="M1056.95,437.08c-2.87-2.87-6.71-5.75-9.58-8.62s-3.83-2.87-5.75,.96c-10.54,24.92-22.04,49.83-34.5,74.75-11.5,21.08-23,42.17-39.29,59.42-5.75,6.71-12.46,12.46-20.12,16.29-15.33,7.67-29.71,1.92-36.42-13.42-3.83-7.67-3.83-15.33-3.83-23.96,0-21.08,5.75-41.21,12.46-60.37,7.67-21.08,15.33-41.21,29.71-58.46,9.58-11.5,21.08-22.04,36.42-25.87,6.71-1.92,13.42-.96,19.17,0,1.92,0,2.87,.96,3.83-1.92,9.58-23.96,19.17-48.87,26.83-73.79-3.83,3.83-7.67,8.62-11.5,12.46-9.58,10.54-21.08,21.08-33.54,27.79-27.79,17.25-56.54,13.42-80.5-9.58-14.37-13.42-23-30.67-29.71-48.87-1.92-4.79-3.83-9.58-6.71-15.33-.96,8.62-.96,16.29-2.87,24.92-6.71,46-15.33,92-40.25,132.25-15.33,25.87-37.37,45.04-67.08,53.67-.96,0-1.92,0-2.87,.96-.96,0-1.92,.96-1.92-.96,32.58-10.54,52.71-34.5,66.12-65.17,8.62-20.12,13.42-41.21,17.25-63.25,5.75-38.33,4.79-76.67,4.79-115,0-12.46-1.92-24.92,0-36.42,.96-8.62,4.79-15.33,13.42-19.17,5.75-2.87,10.54-1.92,16.29,.96,7.67,5.75,12.46,13.42,16.29,21.08,9.58,17.25,15.33,36.42,23,54.62,4.79,12.46,10.54,24.92,18.21,36.42,12.46,18.21,24.92,20.12,42.17,6.71,17.25-13.42,30.67-30.67,42.17-48.87,27.79-41.21,50.79-86.25,70.92-132.25,5.75-13.42,11.5-26.83,18.21-39.29,4.79-8.62,12.46-12.46,22.04-11.5,8.62,.96,14.37,6.71,16.29,15.33,1.92,6.71,.96,12.46-.96,19.17-12.46,43.12-26.83,86.25-40.25,128.41-18.21,55.58-37.37,111.16-59.42,164.83-.96,2.87-.96,3.83,.96,5.75,3.83,3.83,6.71,7.67,10.54,12.46q.96,2.87,0,2.87h0Z"
|
||||
/>
|
||||
<path
|
||||
className="cls-2"
|
||||
d="M561.5,456.25c1.92,3.83,.96,8.62,.96,12.46-.96,44.08,4.79,87.21,22.04,127.46,4.79,12.46,11.5,23,21.08,32.58,17.25,18.21,40.25,23,63.25,12.46,20.12-9.58,35.46-23.96,50.79-40.25,2.87-2.87,5.75-5.75,7.67-9.58,1.92-2.87,4.79-2.87,7.67-1.92,16.29,5.75,28.75,15.33,37.37,29.71,2.87,4.79,2.87,9.58-.96,14.37-15.33,20.12-34.5,35.46-59.42,41.21-22.04,4.79-43.12,.96-63.25-9.58-27.79-14.37-48.87-36.42-66.12-62.29-19.17-29.71-31.62-62.29-38.33-96.79-1.92-8.62-1.92-17.25-2.87-25.87,0-1.92,0-2.87,.96-3.83,5.75-6.71,12.46-13.42,19.17-20.12h0Z"
|
||||
/>
|
||||
<path
|
||||
className="cls-2"
|
||||
d="M844.21,140.96c0-6.71,4.79-11.5,10.54-11.5s11.5,5.75,11.5,11.5-4.79,11.5-11.5,11.5c-5.75,0-10.54-4.79-10.54-11.5h0Z"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
className="cls-3"
|
||||
d="M935.25,547.29c-.96-4.79-1.92-8.62-1.92-12.46,.96-32.58,6.71-64.21,21.08-93.91,6.71-12.46,14.37-23.96,27.79-31.62,5.75-2.87,12.46-4.79,19.17-3.83,2.87,0,2.87,.96,1.92,2.87-17.25,41.21-33.54,83.37-55.58,121.71-2.88,6.71-7.67,11.5-12.46,17.25h0Z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default KarimLogo;
|
||||
BIN
public/Layout/LoginBg.jpg
Normal file
|
After Width: | Height: | Size: 12 KiB |
14
public/index.html
Normal file → Executable file
|
|
@ -12,10 +12,22 @@
|
|||
<link rel="icon" type="image/png" sizes="32x32" href="./App/Logo.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="./App/Logo.png" />
|
||||
<link rel="manifest" href="./site.webmanifest" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Landing Page About My Work and Includ My Cv As Front End Developer Use Reactjs In Syria"
|
||||
/>
|
||||
|
||||
<meta property="og:title" content="My LandingPage" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Landing Page About My Work and Includ My Cv As Front End Developer Use Reactjs In Syria"
|
||||
/>
|
||||
<meta property="og:image" content="./App/Logo.png" />
|
||||
<meta property="og:url" content="https://karimalden.vercel.app" />
|
||||
<meta property="og:type" content="website" />
|
||||
<script type="module" src="/src/index.tsx"></script>
|
||||
|
||||
<title>DM Ecommerce</title>
|
||||
<title>React-Start-App</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
|
|
|||
0
public/robots.txt
Normal file → Executable file
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "DM Ecommerce",
|
||||
"name": "ReactStart-App",
|
||||
"short_name": "RS",
|
||||
"description": "A social networking platform with automated content moderation and context-based authentication system.",
|
||||
"start_url": "/",
|
||||
|
|
|
|||
0
src/App.tsx
Normal file → Executable file
|
|
@ -61,16 +61,15 @@ const CardItem: React.FC<CartItemProps> = ({ data }) => {
|
|||
<h6>
|
||||
<FaTruck /> {t("Free Delivery")}
|
||||
</h6>
|
||||
|
||||
|
||||
<div className="card_price">
|
||||
{/* <p>
|
||||
{price} {Currency}{" "}
|
||||
</p> */}
|
||||
<h6>
|
||||
<MdOutlineVerified /> {t("Guaranteed")}
|
||||
</h6>
|
||||
|
||||
<div className="card_price">
|
||||
<p>
|
||||
{price} {Currency}{" "}
|
||||
</p>
|
||||
|
||||
<div className="count_section">
|
||||
<FaRegTrashAlt
|
||||
onClick={() => {
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ const CartWithDrawer = () => {
|
|||
|
||||
<div className="Drawer_Body">
|
||||
<div className="Card_Items">
|
||||
{Cart?.map((item: any, index: number) => (
|
||||
{Cart.map((item: any, index: number) => (
|
||||
<CardItem key={index} data={item} />
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -87,10 +87,10 @@ const CartWithDrawer = () => {
|
|||
<p>
|
||||
{t("Grand Total")}
|
||||
<br />
|
||||
{/* <span>
|
||||
<span>
|
||||
{" "}
|
||||
{calculateTotalPrice()} {Currency}{" "}
|
||||
</span> */}
|
||||
</span>
|
||||
</p>
|
||||
<Button
|
||||
className="cart_checkout_button"
|
||||
|
|
@ -103,8 +103,8 @@ const CartWithDrawer = () => {
|
|||
</div>
|
||||
) : (
|
||||
<div className="EmptyCard">
|
||||
<img src="/Cart/empty_card.gif" alt="" />
|
||||
<p>{t('You have not placed any orders yet')}</p>
|
||||
{/* <img src="/Cart/empty_card.gif" alt="" />
|
||||
<p>{t('You have not placed any orders yet')}</p> */}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,15 +0,0 @@
|
|||
import HomeSlider from "../../Components/Home/CategoriesSlider";
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
const Categories = () => {
|
||||
const {t} = useTranslation();
|
||||
return (
|
||||
<div className='category_page'>
|
||||
<h1>{t("What do you like")}?</h1>
|
||||
|
||||
<HomeSlider />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Categories
|
||||
|
|
@ -12,45 +12,42 @@ import { useGetCategories } from "../../api/Categories";
|
|||
import { Category } from "../../types/item";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { addBaseUrlToSrc } from "../../utils/addBaseUrlToSrc";
|
||||
import { languageObject } from "../../utils/languageObject";
|
||||
import Loading from "../Utils/Loading/Loading";
|
||||
|
||||
const CategoriesSlider = () => {
|
||||
const { data , isLoading} = useGetCategories();
|
||||
const { data } = useGetCategories();
|
||||
const categories = (data?.categories as Category[]) || ([] as []);
|
||||
const navigate = useNavigate();
|
||||
const handelNavigate = (data: Category) => {
|
||||
navigate(`/categories?category=${data?.id}`);
|
||||
};
|
||||
console.log(categories);
|
||||
|
||||
|
||||
return (
|
||||
<div className="CategoriesSlider">
|
||||
<Swiper
|
||||
modules={[Navigation, A11y]}
|
||||
spaceBetween={10}
|
||||
// slidesPerView={5}
|
||||
spaceBetween={20}
|
||||
slidesPerView={5}
|
||||
navigation
|
||||
breakpoints={{
|
||||
320: {
|
||||
slidesPerView: 2,
|
||||
slidesPerView: 1,
|
||||
},
|
||||
480: {
|
||||
slidesPerView: 3,
|
||||
slidesPerView: 2,
|
||||
},
|
||||
640: {
|
||||
slidesPerView: 3,
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 4,
|
||||
slidesPerView: 3,
|
||||
},
|
||||
1024: {
|
||||
slidesPerView: 5,
|
||||
slidesPerView: 4,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{isLoading ?<Loading/> :categories?.map((item: Category, index: number) => {
|
||||
{categories?.map((item: Category, index: number) => {
|
||||
return (
|
||||
<SwiperSlide key={index}>
|
||||
<div className="CategoriesSlider_image">
|
||||
|
|
@ -59,7 +56,6 @@ const CategoriesSlider = () => {
|
|||
src={addBaseUrlToSrc(item?.photo)}
|
||||
alt={`category ${index + 1}`}
|
||||
/>
|
||||
<p className="truncate-text">{languageObject(item?.name)}</p>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import React, { useEffect } from "react";
|
||||
import { FaHeart, FaStar, FaCartPlus } from "react-icons/fa";
|
||||
import { FaHeart, FaStar } from "react-icons/fa";
|
||||
import { Currency } from "../../Layout/app/Const";
|
||||
import { FaCartPlus } from "react-icons/fa6";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import CustomImage from "../../ui/CustomImage";
|
||||
|
|
@ -17,7 +18,8 @@ const ProductCard = ({ item }: { item: Product }) => {
|
|||
const navigate = useNavigate();
|
||||
const { isAuthenticated } = useAuthState();
|
||||
|
||||
const handle_click = (id: number) => {
|
||||
const handel_click = (id: number) => {
|
||||
|
||||
navigate(`/product/${id}`);
|
||||
};
|
||||
|
||||
|
|
@ -32,60 +34,82 @@ const ProductCard = ({ item }: { item: Product }) => {
|
|||
const randomRate = (Math.random() * (max - min) + min)?.toFixed(1);
|
||||
|
||||
const { Cart, setCart } = useCartState();
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const handleChangeFavorite = (item: Product) => {
|
||||
if (!isAuthenticated) {
|
||||
toast.error("Sorry, you need to be authenticated");
|
||||
return;
|
||||
}
|
||||
const handelChangeFavorite = (item: Product) => {
|
||||
// if (!isAuthenticated) {
|
||||
// toast.error("sorry you need to be authenticated");
|
||||
// return;
|
||||
// }
|
||||
|
||||
if (item?.favorite) {
|
||||
deleteToFavorite({ id: item?.id });
|
||||
|
||||
deleteToFavorite({
|
||||
id: item?.id,
|
||||
});
|
||||
} else {
|
||||
addToFavorite({ id: item?.id });
|
||||
addToFavorite({
|
||||
id: item?.id,
|
||||
});
|
||||
}
|
||||
queryClient.invalidateQueries("mainProduct");
|
||||
queryClient.invalidateQueries('mainProduct');
|
||||
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (Add) {
|
||||
toast.success("Added successfully");
|
||||
toast.success("added success");
|
||||
queryClient.invalidateQueries("mainProduct");
|
||||
}
|
||||
}, [Add]);
|
||||
|
||||
useEffect(() => {
|
||||
if (Delete) {
|
||||
toast.success("Removed successfully");
|
||||
toast.success("removed success");
|
||||
queryClient.invalidateQueries("mainProduct");
|
||||
}
|
||||
}, [Delete]);
|
||||
|
||||
const handleAddToCart = (item: Product) => {
|
||||
if (!isAuthenticated) {
|
||||
toast.error("Sorry, you need to be authenticated");
|
||||
return;
|
||||
}
|
||||
const handelAddToCart = (item: Product) => {
|
||||
// if (!isAuthenticated) {
|
||||
|
||||
// toast.error("sorry you need to be authenticated");
|
||||
// return;
|
||||
// }
|
||||
setCart(item);
|
||||
toast.success(`${languageObject(item?.name)} added to cart`);
|
||||
|
||||
|
||||
toast.success(`${languageObject(item?.name)}` + " added to cart");
|
||||
};
|
||||
const Desc :any = item?.description
|
||||
const words = Desc.split(' ');
|
||||
const firstThreeWord = words.slice(0, 2).join(' ');
|
||||
const result = words.length > 2 ? firstThreeWord + '...' : firstThreeWord;
|
||||
|
||||
|
||||
return (
|
||||
<div className="ProductCard">
|
||||
<CustomImage src={item?.main_photo} onClick={() => handle_click(item?.base_product_id)} />
|
||||
<h4 className="truncate-text">{languageObject(item?.name)}</h4>
|
||||
<h5 className="desc">{t("Description")}: {result}</h5>
|
||||
<CustomImage src={item?.main_photo} onClick={() => handel_click(item?.base_product_id)} />
|
||||
<h4>{languageObject(item?.name)}</h4>
|
||||
<p>
|
||||
{" "}
|
||||
{Currency} {oldPrice}{" "}
|
||||
</p>
|
||||
<div>
|
||||
<p>
|
||||
{" "}
|
||||
{Currency} {price}
|
||||
</p>
|
||||
<p>
|
||||
{" "}
|
||||
{randomRate} <FaStar />
|
||||
</p>
|
||||
</div>
|
||||
<span>{discountAmount}%</span>
|
||||
|
||||
<article>
|
||||
<button className="button" onClick={() => handleAddToCart(item)}>
|
||||
<button className="button" onClick={() => handelAddToCart(item)}>
|
||||
<FaCartPlus />
|
||||
{t("add to cart")}
|
||||
</button>
|
||||
<FaHeart
|
||||
onClick={() => handleChangeFavorite(item)}
|
||||
onClick={() => handelChangeFavorite(item)}
|
||||
className={item?.favorite ? "" : "not_favorite"}
|
||||
/>
|
||||
</article>
|
||||
|
|
@ -94,4 +118,3 @@ const ProductCard = ({ item }: { item: Product }) => {
|
|||
};
|
||||
|
||||
export default ProductCard;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { useRef, useState } from 'react';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import 'swiper/css';
|
||||
import 'swiper/css/free-mode';
|
||||
|
|
@ -7,18 +8,22 @@ import { Product } from '../../types/item';
|
|||
import { A11y, Autoplay, Navigation, Pagination, Scrollbar } from 'swiper/modules';
|
||||
import { Spin } from 'antd';
|
||||
|
||||
const ProductSwiper = ({ data, isLoading }: any) => {
|
||||
|
||||
|
||||
const ProductSwiper = ({data,isLoading}:any) => {
|
||||
const language = localStorage.getItem('language') ;
|
||||
|
||||
const [swiperDirection, setSwiperDirection] = useState(language === "ar" ? "rtl" : "ltr");
|
||||
const swiperRef = useRef<any>(null);
|
||||
|
||||
const BaseProducts = (data?.products as Product[]) || ([] as []);
|
||||
console.log(BaseProducts);
|
||||
|
||||
return (
|
||||
<div className='productSwiper'>
|
||||
<Swiper
|
||||
dir={"ltr"}
|
||||
dir={swiperDirection}
|
||||
slidesPerView={5}
|
||||
spaceBetween={20}
|
||||
spaceBetween={50}
|
||||
breakpoints={{
|
||||
0: { slidesPerView: 1 },
|
||||
400: { slidesPerView: 1 },
|
||||
|
|
@ -30,6 +35,7 @@ const ProductSwiper = ({ data, isLoading }: any) => {
|
|||
modules={[Navigation, Pagination, Scrollbar, A11y, Autoplay]}
|
||||
pagination={{ clickable: true }}
|
||||
className="mySwiper"
|
||||
onSwiper={(swiper:any) => (swiperRef.current = swiper)} // Store swiper instance
|
||||
>
|
||||
{
|
||||
isLoading ? <Spin/> :
|
||||
|
|
@ -42,6 +48,6 @@ const ProductSwiper = ({ data, isLoading }: any) => {
|
|||
</Swiper>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default ProductSwiper;
|
||||
|
|
@ -17,9 +17,9 @@ const ProductInfo = (data:any) => {
|
|||
<span>
|
||||
<h6>{t("Category")}</h6> <h5>{languageObject(productInfo?.category?.name)}</h5>
|
||||
</span>
|
||||
{/* <span>
|
||||
<span>
|
||||
<h6>{t("Price")}</h6> <h5>{productInfo?.price}</h5>
|
||||
</span> */}
|
||||
</span>
|
||||
<span>
|
||||
<h6>{t("Description")}</h6> <h5>{languageObject(productInfo?.description)}</h5>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -8,47 +8,24 @@ import "swiper/css/navigation";
|
|||
import "swiper/css/pagination";
|
||||
import "swiper/css/scrollbar";
|
||||
import CustomImage from "../../ui/CustomImage";
|
||||
import React, { Key } from "react";
|
||||
|
||||
interface ProductSliderProps {
|
||||
data: any;
|
||||
onImageClick: (imagePath: string) => void;
|
||||
}
|
||||
const ProductSlider = (data:any) => {
|
||||
|
||||
const ProductSlider: React.FC<ProductSliderProps> = ({ data, onImageClick }) => {
|
||||
const handelImage = (item: any) => {
|
||||
// setMainImage(item);
|
||||
};
|
||||
return (
|
||||
<div className="product_images_swiper">
|
||||
<Swiper
|
||||
modules={[Navigation, A11y]}
|
||||
spaceBetween={10}
|
||||
slidesPerView={4}
|
||||
breakpoints={{
|
||||
320: {
|
||||
slidesPerView: 3,
|
||||
},
|
||||
480: {
|
||||
slidesPerView: 4,
|
||||
},
|
||||
640: {
|
||||
slidesPerView: 4,
|
||||
},
|
||||
}}
|
||||
navigation
|
||||
>
|
||||
{/* main image */}
|
||||
<SwiperSlide>
|
||||
<span onClick={() => onImageClick(data.main_photo)}>
|
||||
<CustomImage
|
||||
className="product_multi_image main_image"
|
||||
src={data.main_photo}
|
||||
alt="Main Image"
|
||||
/>
|
||||
</span>
|
||||
</SwiperSlide>
|
||||
{data?.images?.map((item: { path: string; },index: Key | null | undefined)=>{
|
||||
{data?.images?.map(({item,index}:any)=>{
|
||||
return (
|
||||
<SwiperSlide key={index}>
|
||||
<span key={index} onClick={() => onImageClick(item.path)} >
|
||||
<span key={index} onClick={() => handelImage(item?.path)} >
|
||||
<CustomImage
|
||||
className="product_multi_image"
|
||||
src={item?.path}
|
||||
|
|
|
|||
0
src/Components/Utils/Loading/Loading.scss
Normal file → Executable file
0
src/Components/Utils/Loading/Loading.tsx
Normal file → Executable file
0
src/Components/Utils/SearchBar/SearchBar.scss
Normal file → Executable file
0
src/Components/Utils/SearchBar/SearchBar.tsx
Normal file → Executable file
0
src/Components/Utils/Translate.tsx
Normal file → Executable file
|
|
@ -57,10 +57,10 @@ const Footer = () => {
|
|||
<div className="footer_last_section">
|
||||
<h6>{t("Sign up for News and updates")}</h6>
|
||||
<div>
|
||||
<Link to={'https://www.facebook.com/'}><FaFacebook /></Link>
|
||||
<Link to={'https://www.twitter.com/'}><FaTwitter /></Link>
|
||||
<Link to={'https://www.instagram.com/'}><FaInstagram /></Link>
|
||||
<Link to={'https://www.youtube.com/'}><FaYoutube /></Link>
|
||||
<FaFacebook />
|
||||
<FaTwitter />
|
||||
<FaInstagram />
|
||||
<FaYoutube />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
0
src/Layout/Ui/Layout.tsx
Normal file → Executable file
0
src/Layout/Ui/NavBar.tsx
Normal file → Executable file
0
src/Layout/Ui/SideBar.tsx
Normal file → Executable file
0
src/Layout/app/Const.tsx
Normal file → Executable file
0
src/Pages/Auth/LoginForm.tsx
Normal file → Executable file
|
|
@ -19,7 +19,6 @@ const Page = () => {
|
|||
const [type, setType] = useState(type_param);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [totalItems, setTotalItems] = useState(0);
|
||||
const [perPage, setPerPage] = useState(10);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -68,15 +67,12 @@ const Page = () => {
|
|||
const { data , isLoading } = useGetBaseProduct({
|
||||
type: type,
|
||||
page: currentPage,
|
||||
category_id:categories
|
||||
categories_id:categories
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (data?.meta) {
|
||||
setTotalItems(data.meta?.total);
|
||||
setPerPage(data.meta?.per_page);
|
||||
console.log(data.meta);
|
||||
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
|
|
@ -150,7 +146,7 @@ const Page = () => {
|
|||
<Pagination
|
||||
current={currentPage}
|
||||
total={totalItems}
|
||||
pageSize={perPage}
|
||||
pageSize={10}
|
||||
onChange={handlePageChange}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,13 +9,12 @@ import NoiseCancellation from "../../Components/Home/NoiseCancellation";
|
|||
import BatteryLife from "../../Components/Home/BatteryLife";
|
||||
import PerfectSound from "../../Components/Home/PerfectSound";
|
||||
import BestSale from "../../Components/Home/BestSale";
|
||||
import Categories from "../../Components/Home/Categories";
|
||||
|
||||
const Page = () => {
|
||||
return (
|
||||
<div className="home_page">
|
||||
<HeroSection />
|
||||
<Categories />
|
||||
<HomeSlider />
|
||||
{/* <ProductsOnSale/> */}
|
||||
<Products />
|
||||
<PremiumDesign />
|
||||
|
|
|
|||
|
|
@ -38,9 +38,10 @@ const Page = () => {
|
|||
|
||||
|
||||
const [MainImage, setMainImage] = useState(product?.main_photo);
|
||||
useEffect(() => {
|
||||
setMainImage(product?.main_photo)
|
||||
}, [product?.main_photo])
|
||||
|
||||
const handelImage = (item: any) => {
|
||||
// setMainImage(item);
|
||||
};
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
|
|
@ -87,13 +88,10 @@ const Page = () => {
|
|||
};
|
||||
|
||||
const info = jsonObjectToArray(product?.info)
|
||||
const handleChangeImage = (imagePath: string) => {
|
||||
setMainImage(imagePath);
|
||||
};
|
||||
|
||||
if(isLoading){
|
||||
return <div className="loading_state"> <Spin/> </div>
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="Product">
|
||||
<header>
|
||||
|
|
@ -113,7 +111,13 @@ const Page = () => {
|
|||
</div>
|
||||
<CustomImage src={MainImage ?? product?.main_photo} alt="" />
|
||||
<div className="gallery_product">
|
||||
<ProductSlider data={product} onImageClick={handleChangeImage} />
|
||||
<ProductSlider data={product}/>
|
||||
{/* <span>
|
||||
<img
|
||||
onClick={() => handelImage('/Home/p1.png')}
|
||||
alt=""
|
||||
/>
|
||||
</span> */}
|
||||
</div>
|
||||
</span>
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,9 @@ function ProviderContainer({ children }: Tchildren) {
|
|||
},
|
||||
}}
|
||||
>
|
||||
{/* <ToastProvider> */}
|
||||
{children}
|
||||
{/* </ToastProvider> */}
|
||||
</ConfigProvider>
|
||||
</QueryProvider>
|
||||
</ToastProvider>
|
||||
|
|
|
|||
0
src/Styles/Layout/Layout.scss
Normal file → Executable file
0
src/Styles/Layout/NavBar.scss
Normal file → Executable file
0
src/Styles/Layout/SideBar.scss
Normal file → Executable file
|
|
@ -70,7 +70,7 @@
|
|||
}
|
||||
|
||||
.Drawer_Body{
|
||||
// height: 70vh;
|
||||
height: 70vh;
|
||||
display: flex; flex-direction: column; justify-content: space-between;align-items: center;
|
||||
}
|
||||
.ar{
|
||||
|
|
@ -110,8 +110,8 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 10% !important;
|
||||
// gap: 20px;
|
||||
margin-top: 5%;
|
||||
gap: 20px;
|
||||
img{
|
||||
width: 40%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -135,9 +135,6 @@
|
|||
.ant-pagination .ant-pagination-item a{
|
||||
color: var(--white);
|
||||
}
|
||||
.swiper{
|
||||
direction: ltr !important;
|
||||
}
|
||||
@media screen and (max-width: 1000px) {
|
||||
.show_on_responsive {
|
||||
display: inline;
|
||||
|
|
@ -275,14 +272,3 @@
|
|||
}
|
||||
|
||||
|
||||
|
||||
.category_page{
|
||||
@include Flex; flex-direction: column;
|
||||
h1{
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.CategoriesSlider{
|
||||
margin-block: 50px !important;
|
||||
}
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
}
|
||||
|
||||
.CategoriesSlider {
|
||||
width: calc(var(--padding-page));
|
||||
width: var(--padding-page);
|
||||
margin-inline: auto;
|
||||
margin-block: var(--margin-block);
|
||||
|
||||
|
|
@ -64,35 +64,17 @@
|
|||
|
||||
.CategoriesSlider_image {
|
||||
padding: 10px 30px;
|
||||
width: 160px;
|
||||
min-height: 150px;
|
||||
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
p{
|
||||
font-size: 10px !important;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0 !important;
|
||||
text-align: center !important;
|
||||
padding-top: 3px;
|
||||
color: var(--primary ) !important;
|
||||
}
|
||||
.truncate-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
img {
|
||||
border-radius: 10px;
|
||||
width: 150px;
|
||||
height: 160px;
|
||||
cursor: pointer;
|
||||
aspect-ratio: 1;
|
||||
object-fit: cover !important;
|
||||
|
||||
img {
|
||||
min-width: 140px;
|
||||
max-width: 140px;
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -389,9 +371,7 @@
|
|||
[role="button"] {
|
||||
color: var(--text) !important;
|
||||
}
|
||||
.swiper-slide{
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.CategoriesSlider_image {
|
||||
padding: 4% 10%;
|
||||
border: 1px solid #d9d9d9;
|
||||
|
|
@ -399,10 +379,10 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
|
||||
img {
|
||||
width: 100px;
|
||||
min-width: 100px;
|
||||
max-width: 100px;
|
||||
height: 100px;
|
||||
|
||||
}
|
||||
|
|
@ -590,16 +570,3 @@
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
.swiper-button-prev:after, .swiper-button-next:after{
|
||||
background: var(--white);
|
||||
padding: 4px;
|
||||
border-radius: 10px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.swiper-button-disabled{
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -37,9 +37,7 @@
|
|||
flex-direction: column;
|
||||
gap: 20px;
|
||||
> img {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
object-fit: contain;
|
||||
width: 50%;
|
||||
margin-inline: auto;
|
||||
}
|
||||
.gallery_product {
|
||||
|
|
@ -95,24 +93,20 @@
|
|||
width: 100%;
|
||||
.swiper-button-prev:after, .swiper-button-next:after{
|
||||
color: var(--text);
|
||||
font-size: 20px;
|
||||
font-size: 25px;
|
||||
background: #fff;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.swiper-backface-hidden .swiper-slide{
|
||||
// padding-inline: 10px;
|
||||
padding-inline: 20px;
|
||||
min-width: 50px !important;
|
||||
}
|
||||
> span{
|
||||
width: 50px;
|
||||
}
|
||||
.product_multi_image{
|
||||
width: 60px !important;
|
||||
height: 50px;
|
||||
object-fit: cover;
|
||||
aspect-ratio: 1;
|
||||
cursor: pointer;
|
||||
width: 50px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -128,7 +122,6 @@
|
|||
padding-inline: 15px;
|
||||
width: 95%;
|
||||
background: var(--whiteOpacity);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.product_additional_info{
|
||||
|
|
@ -145,11 +138,11 @@
|
|||
color: var(--text);
|
||||
position: relative;
|
||||
width: 50%;
|
||||
font-size: 12px;
|
||||
font-size: 10px;
|
||||
}
|
||||
h5{
|
||||
color: var(--text);
|
||||
font-size: 12px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -191,7 +184,7 @@
|
|||
margin-inline: auto;
|
||||
}
|
||||
> main {
|
||||
padding-inline: 4%;
|
||||
padding-inline: 10%;
|
||||
margin-top: 30px;
|
||||
display: flex;flex-direction: column;
|
||||
width: 100%;
|
||||
|
|
@ -212,6 +205,15 @@
|
|||
.gallery_product {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
span {
|
||||
padding: 10px 10px;
|
||||
border: 2px solid rgba(128, 128, 128, 0.1);
|
||||
width: 100%;
|
||||
> img {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -250,30 +252,4 @@
|
|||
.ant-tabs >.ant-tabs-nav .ant-tabs-nav-wrap,.ant-tabs >div>.ant-tabs-nav .ant-tabs-nav-wrap{
|
||||
justify-content: flex-start !important;align-items: flex-start !important;
|
||||
}
|
||||
.ant-tabs .ant-tabs-tab-btn{
|
||||
font-size: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-pagination .ant-pagination-item a{
|
||||
color: var(--text);
|
||||
|
||||
}
|
||||
|
||||
|
||||
.main_image {
|
||||
margin-left: 10px;
|
||||
border: 2px solid var(--primary); /* or any color that fits your design */
|
||||
}
|
||||
.truncate-text {
|
||||
width: 90%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%; /* Adjust as needed */
|
||||
font-size: 14px !important;
|
||||
}
|
||||
.desc{
|
||||
font-size: 14px !important;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
|
@ -4,7 +4,6 @@
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-radius: 7px;
|
||||
min-width: 400px;
|
||||
.ant-card-body {
|
||||
display: flex;justify-content: space-between;align-items: center;
|
||||
padding: 10px 5px;
|
||||
|
|
@ -137,10 +136,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width:450px) {
|
||||
.CardItem{
|
||||
min-width: 300px;
|
||||
}
|
||||
}
|
||||
|
|
@ -41,8 +41,6 @@
|
|||
margin-bottom: 20px;
|
||||
cursor: pointer;
|
||||
margin-top: 30px;
|
||||
aspect-ratio: 1;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
div {
|
||||
|
|
@ -97,13 +95,6 @@
|
|||
border: 1px solid var(--primary);
|
||||
font-size: 14px;
|
||||
padding:6px 6px;
|
||||
&:hover{
|
||||
background: var(--primary);
|
||||
color: var(--white);
|
||||
svg{
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
}
|
||||
svg {
|
||||
color: var(--primary);
|
||||
|
|
|
|||
|
|
@ -18,5 +18,5 @@
|
|||
|
||||
.swiper-slide{
|
||||
min-width: 220px;
|
||||
// margin-inline: auto;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
|
@ -7,13 +7,3 @@ const KEY = "product";
|
|||
|
||||
export const useGetProduct = (params?: any) =>
|
||||
useGetQuery(KEY, API.GET, params);
|
||||
|
||||
|
||||
|
||||
const API2 = {
|
||||
GETSimilar: `product`,
|
||||
};
|
||||
const KEY2 = "product_similar";
|
||||
|
||||
export const useGetProductSimilar = (params?: any) =>
|
||||
useGetQuery(KEY2, API2.GETSimilar, params);
|
||||
|
|
|
|||
0
src/index.tsx
Normal file → Executable file
0
src/lib/ReactQueryProvider.tsx
Normal file → Executable file
|
|
@ -34,6 +34,7 @@ const useAuthState = create<AuthStore>((set) => {
|
|||
Guest: storedGuest,
|
||||
setGuest: (Guest: string) => {
|
||||
localStorage.setItem(LocalStorageEnum.GUEST_KEY, Guest);
|
||||
|
||||
set(() => ({
|
||||
Guest: Guest,
|
||||
}));
|
||||
|
|
|
|||
3
src/translate/ar.json
Normal file → Executable file
|
|
@ -399,7 +399,6 @@
|
|||
"Info":"معلومات",
|
||||
"Additional Info":"معلومات إضافية",
|
||||
"Product info is empty":"معلومات المنتج فارغة",
|
||||
"We are DM company, which has been working for two decades. We are active in the United Arab Emirates in the field of stock laptops, computer parts, RAM, hard drives, etc. We are currently working with Europe, Africa and the Middle East.We provide you the best services with the shortest time and the highest quality":"نحن شركة DM، التي تعمل منذ عقدين من الزمن. نحن نشطون في دولة الإمارات العربية المتحدة في مجال أجهزة الكمبيوتر المحمولة، وقطع الكمبيوتر، وذاكرة الوصول العشوائي، والأقراص الصلبة، وما إلى ذلك. ونعمل حاليًا مع أوروبا وأفريقيا والشرق الأوسط. نقدم لك أفضل الخدمات في أقصر وقت وبأقل تكلفة. اعلى جودة",
|
||||
"What do you like":"ماذا تريد"
|
||||
"":""
|
||||
|
||||
}
|
||||
|
|
@ -385,5 +385,5 @@
|
|||
"Info":"信息",
|
||||
"Additional Info":"附加信息",
|
||||
"Product info is empty":"产品信息为空",
|
||||
"What do you like":"你喜欢什么"
|
||||
"":""
|
||||
}
|
||||
0
src/translate/en.json
Normal file → Executable file
|
|
@ -1,5 +1,4 @@
|
|||
export interface Translation {
|
||||
split(arg0: string): unknown;
|
||||
en: string;
|
||||
ar: string;
|
||||
de: string;
|
||||
|
|
@ -68,7 +67,6 @@ export interface Product {
|
|||
total_quantity_ordered: number;
|
||||
attributes: ProductAttribute[];
|
||||
other_attributes: any | null; // Adjust this type based on the actual structure if available
|
||||
quantity:number
|
||||
}
|
||||
|
||||
export interface MainData {
|
||||
|
|
|
|||
|
|
@ -6,23 +6,26 @@ interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
|
|||
}
|
||||
|
||||
const CustomImage: React.FC<ImageProps> = ({ src, ...props }) => {
|
||||
const addBaseUrlToSrc = (src: string) => {
|
||||
return ImageBaseURL + src?.replace("public", "/storage");
|
||||
};
|
||||
|
||||
const [imgSrc, setImgSrc] = useState<any>(src);
|
||||
const [imgSrc, setImgSrc] = useState(addBaseUrlToSrc(src));
|
||||
|
||||
useEffect(() => {
|
||||
setImgSrc(src);
|
||||
}, [src,props]);
|
||||
|
||||
|
||||
|
||||
const newImage = ImageBaseURL + (imgSrc?.replace("public", "/storage"))
|
||||
setImgSrc(addBaseUrlToSrc(src));
|
||||
}, [src]);
|
||||
|
||||
const handleError = () => {
|
||||
setImgSrc("/Home/p1.png");
|
||||
};
|
||||
|
||||
return (
|
||||
<img
|
||||
src={newImage}
|
||||
src={imgSrc}
|
||||
onError={handleError}
|
||||
{...props}
|
||||
alt="there is no image"
|
||||
alt={props.alt || "image"}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
|||