Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
4ba5c6b4dd | ||
|
86f3045cce | ||
|
|
174e4ad147 | ||
|
|
174a7b75f5 | ||
|
|
1a73c587c8 | ||
|
|
1621cdf027 | ||
|
|
572b66427e | ||
|
|
ecf8535fc6 |
0
.gitignore
vendored
Executable file → Normal file
0
.gitignore
vendored
Executable file → Normal file
14
index.html
Executable file → Normal file
14
index.html
Executable file → Normal file
|
|
@ -12,22 +12,10 @@
|
|||
<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>React-Start-App</title>
|
||||
<title>DM Ecommerce</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@
|
|||
"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",
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 430 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 456 KiB |
|
|
@ -1 +0,0 @@
|
|||
<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>
|
||||
|
Before Width: | Height: | Size: 501 B |
Binary file not shown.
|
Before Width: | Height: | Size: 363 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 729 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 951 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.9 KiB |
0
public/Layout/Ar.svg
Executable file → Normal file
0
public/Layout/Ar.svg
Executable file → Normal file
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
0
public/Layout/En.svg
Executable file → Normal file
0
public/Layout/En.svg
Executable file → Normal file
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 67 KiB |
|
|
@ -1,27 +0,0 @@
|
|||
<?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>
|
||||
|
Before Width: | Height: | Size: 4.6 KiB |
|
|
@ -1,54 +0,0 @@
|
|||
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;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
14
public/index.html
Executable file → Normal file
14
public/index.html
Executable file → Normal file
|
|
@ -12,22 +12,10 @@
|
|||
<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>React-Start-App</title>
|
||||
<title>DM Ecommerce</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
|
|
|||
0
public/robots.txt
Executable file → Normal file
0
public/robots.txt
Executable file → Normal file
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "ReactStart-App",
|
||||
"name": "DM Ecommerce",
|
||||
"short_name": "RS",
|
||||
"description": "A social networking platform with automated content moderation and context-based authentication system.",
|
||||
"start_url": "/",
|
||||
|
|
|
|||
0
src/App.tsx
Executable file → Normal file
0
src/App.tsx
Executable file → Normal file
|
|
@ -61,15 +61,16 @@ 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>
|
||||
|
|
|
|||
15
src/Components/Home/Categories.tsx
Normal file
15
src/Components/Home/Categories.tsx
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
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,42 +12,45 @@ 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 } = useGetCategories();
|
||||
const { data , isLoading} = 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={20}
|
||||
slidesPerView={5}
|
||||
spaceBetween={10}
|
||||
// slidesPerView={5}
|
||||
navigation
|
||||
breakpoints={{
|
||||
320: {
|
||||
slidesPerView: 1,
|
||||
slidesPerView: 2,
|
||||
},
|
||||
480: {
|
||||
slidesPerView: 2,
|
||||
slidesPerView: 3,
|
||||
},
|
||||
640: {
|
||||
slidesPerView: 3,
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 3,
|
||||
slidesPerView: 4,
|
||||
},
|
||||
1024: {
|
||||
slidesPerView: 4,
|
||||
slidesPerView: 5,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{categories?.map((item: Category, index: number) => {
|
||||
{isLoading ?<Loading/> :categories?.map((item: Category, index: number) => {
|
||||
return (
|
||||
<SwiperSlide key={index}>
|
||||
<div className="CategoriesSlider_image">
|
||||
|
|
@ -56,6 +59,7 @@ const CategoriesSlider = () => {
|
|||
src={addBaseUrlToSrc(item?.photo)}
|
||||
alt={`category ${index + 1}`}
|
||||
/>
|
||||
<p className="truncate-text">{languageObject(item?.name)}</p>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import React, { useEffect } from "react";
|
||||
import { FaHeart, FaStar } from "react-icons/fa";
|
||||
import { FaHeart, FaStar, FaCartPlus } 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";
|
||||
|
|
@ -18,8 +17,7 @@ const ProductCard = ({ item }: { item: Product }) => {
|
|||
const navigate = useNavigate();
|
||||
const { isAuthenticated } = useAuthState();
|
||||
|
||||
const handel_click = (id: number) => {
|
||||
|
||||
const handle_click = (id: number) => {
|
||||
navigate(`/product/${id}`);
|
||||
};
|
||||
|
||||
|
|
@ -34,82 +32,60 @@ const ProductCard = ({ item }: { item: Product }) => {
|
|||
const randomRate = (Math.random() * (max - min) + min)?.toFixed(1);
|
||||
|
||||
const { Cart, setCart } = useCartState();
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const handelChangeFavorite = (item: Product) => {
|
||||
// if (!isAuthenticated) {
|
||||
// toast.error("sorry you need to be authenticated");
|
||||
// return;
|
||||
// }
|
||||
const handleChangeFavorite = (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 success");
|
||||
toast.success("Added successfully");
|
||||
queryClient.invalidateQueries("mainProduct");
|
||||
}
|
||||
}, [Add]);
|
||||
|
||||
useEffect(() => {
|
||||
if (Delete) {
|
||||
toast.success("removed success");
|
||||
toast.success("Removed successfully");
|
||||
queryClient.invalidateQueries("mainProduct");
|
||||
}
|
||||
}, [Delete]);
|
||||
|
||||
const handelAddToCart = (item: Product) => {
|
||||
// if (!isAuthenticated) {
|
||||
|
||||
// toast.error("sorry you need to be authenticated");
|
||||
// return;
|
||||
// }
|
||||
const handleAddToCart = (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={() => 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>
|
||||
|
||||
<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>
|
||||
<article>
|
||||
<button className="button" onClick={() => handelAddToCart(item)}>
|
||||
<button className="button" onClick={() => handleAddToCart(item)}>
|
||||
<FaCartPlus />
|
||||
{t("add to cart")}
|
||||
</button>
|
||||
<FaHeart
|
||||
onClick={() => handelChangeFavorite(item)}
|
||||
onClick={() => handleChangeFavorite(item)}
|
||||
className={item?.favorite ? "" : "not_favorite"}
|
||||
/>
|
||||
</article>
|
||||
|
|
@ -118,3 +94,4 @@ const ProductCard = ({ item }: { item: Product }) => {
|
|||
};
|
||||
|
||||
export default ProductCard;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import { useRef, useState } from 'react';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import 'swiper/css';
|
||||
import 'swiper/css/free-mode';
|
||||
|
|
@ -8,22 +7,18 @@ import { Product } from '../../types/item';
|
|||
import { A11y, Autoplay, Navigation, Pagination, Scrollbar } from 'swiper/modules';
|
||||
import { Spin } from 'antd';
|
||||
|
||||
|
||||
|
||||
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={swiperDirection}
|
||||
dir={"ltr"}
|
||||
slidesPerView={5}
|
||||
spaceBetween={50}
|
||||
spaceBetween={20}
|
||||
breakpoints={{
|
||||
0: { slidesPerView: 1 },
|
||||
400: { slidesPerView: 1 },
|
||||
|
|
@ -35,7 +30,6 @@ 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 /> :
|
||||
|
|
@ -48,6 +42,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,24 +8,47 @@ import "swiper/css/navigation";
|
|||
import "swiper/css/pagination";
|
||||
import "swiper/css/scrollbar";
|
||||
import CustomImage from "../../ui/CustomImage";
|
||||
import React, { Key } from "react";
|
||||
|
||||
const ProductSlider = (data:any) => {
|
||||
interface ProductSliderProps {
|
||||
data: any;
|
||||
onImageClick: (imagePath: string) => void;
|
||||
}
|
||||
|
||||
const handelImage = (item: any) => {
|
||||
// setMainImage(item);
|
||||
};
|
||||
const ProductSlider: React.FC<ProductSliderProps> = ({ data, onImageClick }) => {
|
||||
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
|
||||
>
|
||||
{data?.images?.map(({item,index}:any)=>{
|
||||
{/* 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)=>{
|
||||
return (
|
||||
<SwiperSlide key={index}>
|
||||
<span key={index} onClick={() => handelImage(item?.path)} >
|
||||
<span key={index} onClick={() => onImageClick(item.path)} >
|
||||
<CustomImage
|
||||
className="product_multi_image"
|
||||
src={item?.path}
|
||||
|
|
|
|||
0
src/Components/Utils/Loading/Loading.scss
Executable file → Normal file
0
src/Components/Utils/Loading/Loading.scss
Executable file → Normal file
0
src/Components/Utils/Loading/Loading.tsx
Executable file → Normal file
0
src/Components/Utils/Loading/Loading.tsx
Executable file → Normal file
0
src/Components/Utils/SearchBar/SearchBar.scss
Executable file → Normal file
0
src/Components/Utils/SearchBar/SearchBar.scss
Executable file → Normal file
0
src/Components/Utils/SearchBar/SearchBar.tsx
Executable file → Normal file
0
src/Components/Utils/SearchBar/SearchBar.tsx
Executable file → Normal file
0
src/Components/Utils/Translate.tsx
Executable file → Normal file
0
src/Components/Utils/Translate.tsx
Executable file → Normal file
|
|
@ -57,10 +57,10 @@ const Footer = () => {
|
|||
<div className="footer_last_section">
|
||||
<h6>{t("Sign up for News and updates")}</h6>
|
||||
<div>
|
||||
<FaFacebook />
|
||||
<FaTwitter />
|
||||
<FaInstagram />
|
||||
<FaYoutube />
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
0
src/Layout/Ui/Layout.tsx
Executable file → Normal file
0
src/Layout/Ui/Layout.tsx
Executable file → Normal file
0
src/Layout/Ui/NavBar.tsx
Executable file → Normal file
0
src/Layout/Ui/NavBar.tsx
Executable file → Normal file
0
src/Layout/Ui/SideBar.tsx
Executable file → Normal file
0
src/Layout/Ui/SideBar.tsx
Executable file → Normal file
0
src/Layout/app/Const.tsx
Executable file → Normal file
0
src/Layout/app/Const.tsx
Executable file → Normal file
0
src/Pages/Auth/LoginForm.tsx
Executable file → Normal file
0
src/Pages/Auth/LoginForm.tsx
Executable file → Normal file
|
|
@ -19,6 +19,7 @@ const Page = () => {
|
|||
const [type, setType] = useState(type_param);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [totalItems, setTotalItems] = useState(0);
|
||||
const [perPage, setPerPage] = useState(10);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -67,12 +68,15 @@ const Page = () => {
|
|||
const { data , isLoading } = useGetBaseProduct({
|
||||
type: type,
|
||||
page: currentPage,
|
||||
categories_id:categories
|
||||
category_id:categories
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (data?.meta) {
|
||||
setTotalItems(data.meta?.total);
|
||||
setPerPage(data.meta?.per_page);
|
||||
console.log(data.meta);
|
||||
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
|
|
@ -146,7 +150,7 @@ const Page = () => {
|
|||
<Pagination
|
||||
current={currentPage}
|
||||
total={totalItems}
|
||||
pageSize={10}
|
||||
pageSize={perPage}
|
||||
onChange={handlePageChange}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,12 +9,13 @@ 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 />
|
||||
<HomeSlider />
|
||||
<Categories />
|
||||
{/* <ProductsOnSale/> */}
|
||||
<Products />
|
||||
<PremiumDesign />
|
||||
|
|
|
|||
|
|
@ -38,10 +38,9 @@ const Page = () => {
|
|||
|
||||
|
||||
const [MainImage, setMainImage] = useState(product?.main_photo);
|
||||
|
||||
const handelImage = (item: any) => {
|
||||
// setMainImage(item);
|
||||
};
|
||||
useEffect(() => {
|
||||
setMainImage(product?.main_photo)
|
||||
}, [product?.main_photo])
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
|
|
@ -88,10 +87,13 @@ 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>
|
||||
|
|
@ -111,13 +113,7 @@ const Page = () => {
|
|||
</div>
|
||||
<CustomImage src={MainImage ?? product?.main_photo} alt="" />
|
||||
<div className="gallery_product">
|
||||
<ProductSlider data={product}/>
|
||||
{/* <span>
|
||||
<img
|
||||
onClick={() => handelImage('/Home/p1.png')}
|
||||
alt=""
|
||||
/>
|
||||
</span> */}
|
||||
<ProductSlider data={product} onImageClick={handleChangeImage} />
|
||||
</div>
|
||||
</span>
|
||||
|
||||
|
|
|
|||
|
|
@ -23,9 +23,7 @@ function ProviderContainer({ children }: Tchildren) {
|
|||
},
|
||||
}}
|
||||
>
|
||||
{/* <ToastProvider> */}
|
||||
{children}
|
||||
{/* </ToastProvider> */}
|
||||
</ConfigProvider>
|
||||
</QueryProvider>
|
||||
</ToastProvider>
|
||||
|
|
|
|||
0
src/Styles/Layout/Layout.scss
Executable file → Normal file
0
src/Styles/Layout/Layout.scss
Executable file → Normal file
0
src/Styles/Layout/NavBar.scss
Executable file → Normal file
0
src/Styles/Layout/NavBar.scss
Executable file → Normal file
0
src/Styles/Layout/SideBar.scss
Executable file → Normal file
0
src/Styles/Layout/SideBar.scss
Executable file → Normal 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: 5%;
|
||||
gap: 20px;
|
||||
margin-top: 10% !important;
|
||||
// gap: 20px;
|
||||
img{
|
||||
width: 40%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -135,6 +135,9 @@
|
|||
.ant-pagination .ant-pagination-item a{
|
||||
color: var(--white);
|
||||
}
|
||||
.swiper{
|
||||
direction: ltr !important;
|
||||
}
|
||||
@media screen and (max-width: 1000px) {
|
||||
.show_on_responsive {
|
||||
display: inline;
|
||||
|
|
@ -272,3 +275,14 @@
|
|||
}
|
||||
|
||||
|
||||
|
||||
.category_page{
|
||||
@include Flex; flex-direction: column;
|
||||
h1{
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.CategoriesSlider{
|
||||
margin-block: 50px !important;
|
||||
}
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
}
|
||||
|
||||
.CategoriesSlider {
|
||||
width: var(--padding-page);
|
||||
width: calc(var(--padding-page));
|
||||
margin-inline: auto;
|
||||
margin-block: var(--margin-block);
|
||||
|
||||
|
|
@ -64,17 +64,35 @@
|
|||
|
||||
.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 {
|
||||
min-width: 140px;
|
||||
max-width: 140px;
|
||||
height: 150px;
|
||||
border-radius: 10px;
|
||||
width: 150px;
|
||||
height: 160px;
|
||||
cursor: pointer;
|
||||
aspect-ratio: 1;
|
||||
object-fit: cover !important;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -371,7 +389,9 @@
|
|||
[role="button"] {
|
||||
color: var(--text) !important;
|
||||
}
|
||||
|
||||
.swiper-slide{
|
||||
min-width: 150px;
|
||||
}
|
||||
.CategoriesSlider_image {
|
||||
padding: 4% 10%;
|
||||
border: 1px solid #d9d9d9;
|
||||
|
|
@ -379,10 +399,10 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
img {
|
||||
min-width: 100px;
|
||||
max-width: 100px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
||||
}
|
||||
|
|
@ -570,3 +590,16 @@
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
.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,7 +37,9 @@
|
|||
flex-direction: column;
|
||||
gap: 20px;
|
||||
> img {
|
||||
width: 50%;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
object-fit: contain;
|
||||
margin-inline: auto;
|
||||
}
|
||||
.gallery_product {
|
||||
|
|
@ -93,20 +95,24 @@
|
|||
width: 100%;
|
||||
.swiper-button-prev:after, .swiper-button-next:after{
|
||||
color: var(--text);
|
||||
font-size: 25px;
|
||||
font-size: 20px;
|
||||
background: #fff;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.swiper-backface-hidden .swiper-slide{
|
||||
padding-inline: 20px;
|
||||
// padding-inline: 10px;
|
||||
min-width: 50px !important;
|
||||
}
|
||||
> span{
|
||||
width: 50px;
|
||||
}
|
||||
.product_multi_image{
|
||||
width: 50px !important;
|
||||
width: 60px !important;
|
||||
height: 50px;
|
||||
object-fit: cover;
|
||||
aspect-ratio: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -122,6 +128,7 @@
|
|||
padding-inline: 15px;
|
||||
width: 95%;
|
||||
background: var(--whiteOpacity);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.product_additional_info{
|
||||
|
|
@ -138,11 +145,11 @@
|
|||
color: var(--text);
|
||||
position: relative;
|
||||
width: 50%;
|
||||
font-size: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
h5{
|
||||
color: var(--text);
|
||||
font-size: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -184,7 +191,7 @@
|
|||
margin-inline: auto;
|
||||
}
|
||||
> main {
|
||||
padding-inline: 10%;
|
||||
padding-inline: 4%;
|
||||
margin-top: 30px;
|
||||
display: flex;flex-direction: column;
|
||||
width: 100%;
|
||||
|
|
@ -205,15 +212,6 @@
|
|||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -252,4 +250,30 @@
|
|||
.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,6 +4,7 @@
|
|||
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;
|
||||
|
|
@ -136,3 +137,10 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width:450px) {
|
||||
.CardItem{
|
||||
min-width: 300px;
|
||||
}
|
||||
}
|
||||
|
|
@ -41,6 +41,8 @@
|
|||
margin-bottom: 20px;
|
||||
cursor: pointer;
|
||||
margin-top: 30px;
|
||||
aspect-ratio: 1;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
div {
|
||||
|
|
@ -95,6 +97,13 @@
|
|||
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,3 +7,13 @@ 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
Executable file → Normal file
0
src/index.tsx
Executable file → Normal file
0
src/lib/ReactQueryProvider.tsx
Executable file → Normal file
0
src/lib/ReactQueryProvider.tsx
Executable file → Normal file
|
|
@ -34,7 +34,6 @@ const useAuthState = create<AuthStore>((set) => {
|
|||
Guest: storedGuest,
|
||||
setGuest: (Guest: string) => {
|
||||
localStorage.setItem(LocalStorageEnum.GUEST_KEY, Guest);
|
||||
|
||||
set(() => ({
|
||||
Guest: Guest,
|
||||
}));
|
||||
|
|
|
|||
3
src/translate/ar.json
Executable file → Normal file
3
src/translate/ar.json
Executable file → Normal file
|
|
@ -399,6 +399,7 @@
|
|||
"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
Executable file → Normal file
0
src/translate/en.json
Executable file → Normal file
|
|
@ -1,4 +1,5 @@
|
|||
export interface Translation {
|
||||
split(arg0: string): unknown;
|
||||
en: string;
|
||||
ar: string;
|
||||
de: string;
|
||||
|
|
@ -67,6 +68,7 @@ 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,26 +6,23 @@ 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(addBaseUrlToSrc(src));
|
||||
const [imgSrc, setImgSrc] = useState<any>(src);
|
||||
|
||||
useEffect(() => {
|
||||
setImgSrc(addBaseUrlToSrc(src));
|
||||
}, [src]);
|
||||
setImgSrc(src);
|
||||
}, [src,props]);
|
||||
|
||||
|
||||
|
||||
const newImage = ImageBaseURL + (imgSrc?.replace("public", "/storage"))
|
||||
|
||||
const handleError = () => {
|
||||
setImgSrc("/Home/p1.png");
|
||||
};
|
||||
|
||||
return (
|
||||
<img
|
||||
src={imgSrc}
|
||||
onError={handleError}
|
||||
src={newImage}
|
||||
{...props}
|
||||
alt={props.alt || "image"}
|
||||
alt="there is no image"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
0
tsconfig.json
Executable file → Normal file
0
tsconfig.json
Executable file → Normal file
Loading…
Reference in New Issue
Block a user