update svg
This commit is contained in:
pradeepkumar
1
.gitignore
vendored
1
.gitignore
vendored
@@ -39,3 +39,4 @@ yarn-error.log*
|
|||||||
# typescript
|
# typescript
|
||||||
*.tsbuildinfo
|
*.tsbuildinfo
|
||||||
next-env.d.ts
|
next-env.d.ts
|
||||||
|
CLAUDE.md
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
public/assets/demo_images/Rectangle 52.png
Normal file
BIN
public/assets/demo_images/Rectangle 52.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
3
public/assets/icons/calendar-icon.svg
Normal file
3
public/assets/icons/calendar-icon.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 20 20" fill="#00293d">
|
||||||
|
<path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 311 B |
4
public/assets/icons/chart-icon.svg
Normal file
4
public/assets/icons/chart-icon.svg
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#e58625">
|
||||||
|
<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/>
|
||||||
|
<path d="M7 12h2v5H7zm4-3h2v8h-2zm4-3h2v11h-2z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 265 B |
3
public/assets/icons/chevron-down-icon.svg
Normal file
3
public/assets/icons/chevron-down-icon.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#e58625" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M19 9l-7 7-7-7"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 213 B |
3
public/assets/icons/clipboard-icon.svg
Normal file
3
public/assets/icons/clipboard-icon.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 331 B |
3
public/assets/icons/clock-icon.svg
Normal file
3
public/assets/icons/clock-icon.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#e58625" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 244 B |
3
public/assets/icons/dollar-icon.svg
Normal file
3
public/assets/icons/dollar-icon.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#e58625">
|
||||||
|
<path d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 466 B |
3
public/assets/icons/edit-icon.svg
Normal file
3
public/assets/icons/edit-icon.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#e58625" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 317 B |
3
public/assets/icons/edit-pencil-icon.svg
Normal file
3
public/assets/icons/edit-pencil-icon.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#5ba4a4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 295 B |
3
public/assets/icons/heart-icon.svg
Normal file
3
public/assets/icons/heart-icon.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#e58625">
|
||||||
|
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 295 B |
3
public/assets/icons/home-icon.svg
Normal file
3
public/assets/icons/home-icon.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#e58625">
|
||||||
|
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 156 B |
4
public/assets/icons/location-icon.svg
Normal file
4
public/assets/icons/location-icon.svg
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#e58625" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
|
||||||
|
<path d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 328 B |
4
public/assets/icons/location-large-icon.svg
Normal file
4
public/assets/icons/location-large-icon.svg
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#e58625" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
|
||||||
|
<path d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 330 B |
3
public/assets/icons/message-icon.svg
Normal file
3
public/assets/icons/message-icon.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 332 B |
3
public/assets/icons/quote-icon.svg
Normal file
3
public/assets/icons/quote-icon.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#e58625">
|
||||||
|
<path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 161 B |
3
public/assets/icons/star-empty-icon.svg
Normal file
3
public/assets/icons/star-empty-icon.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 20 20" fill="#d1d5db">
|
||||||
|
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 465 B |
3
public/assets/icons/star-filled-icon.svg
Normal file
3
public/assets/icons/star-filled-icon.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 20 20" fill="#e58625">
|
||||||
|
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 465 B |
3
public/assets/icons/star-icon.svg
Normal file
3
public/assets/icons/star-icon.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="#e58625">
|
||||||
|
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 209 B |
3
public/assets/icons/user-placeholder-icon.svg
Normal file
3
public/assets/icons/user-placeholder-icon.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#9ca3af">
|
||||||
|
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 230 B |
3
public/assets/icons/verified-icon.svg
Normal file
3
public/assets/icons/verified-icon.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="14" viewBox="0 0 15 14" fill="none">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.191 0.59161C11.042 0.369463 10.8226 0.196189 10.5632 0.0959077C10.3038 -0.00437349 10.0173 -0.0266726 9.74371 0.0321152L7.8018 0.44846C7.60279 0.491154 7.396 0.491154 7.19698 0.44846L5.25508 0.0321152C4.98147 -0.0266726 4.69503 -0.00437349 4.43563 0.0959077C4.17623 0.196189 3.95678 0.369463 3.80783 0.59161L2.7494 2.16827C2.6414 2.32957 2.49559 2.46566 2.32278 2.56748L0.63361 3.55542C0.396021 3.69432 0.210655 3.89882 0.103241 4.14053C-0.0041733 4.38224 -0.0283068 4.64916 0.0341899 4.90425L0.480245 6.71883C0.52582 6.90426 0.52582 7.09692 0.480245 7.28235L0.0341899 9.09592C-0.0285497 9.35116 -0.00453765 9.61831 0.102888 9.86022C0.210314 10.1021 0.395816 10.3068 0.63361 10.4458L2.32278 11.4337C2.49559 11.5345 2.64139 11.6706 2.75048 11.8319L3.80891 13.4086C4.11348 13.8632 4.69454 14.088 5.25508 13.9681L7.19698 13.5517C7.396 13.509 7.60279 13.509 7.8018 13.5517L9.74479 13.9681C10.0182 14.0266 10.3044 14.0042 10.5636 13.9039C10.8228 13.8037 11.0421 13.6305 11.191 13.4086L12.2494 11.8319C12.3574 11.6706 12.5032 11.5345 12.676 11.4337L14.3663 10.4458C14.6041 10.3066 14.7895 10.1017 14.8967 9.8596C15.004 9.61749 15.0277 9.3502 14.9646 9.09492L14.5196 7.28235C14.4739 7.0966 14.4739 6.90358 14.5196 6.71782L14.9657 4.90425C15.0285 4.64912 15.0047 4.38205 14.8974 4.14015C14.7902 3.89824 14.6049 3.69352 14.3673 3.55441L12.6771 2.56647C12.5045 2.46548 12.3587 2.32935 12.2505 2.16827L11.191 0.59161ZM10.6477 4.75203C10.7145 4.63737 10.731 4.503 10.6939 4.37719C10.6567 4.25138 10.5687 4.14393 10.4483 4.07745C10.328 4.01098 10.1847 3.99066 10.0487 4.02077C9.91264 4.05089 9.79441 4.12908 9.71887 4.23891L6.89457 8.70075L5.1892 7.17651C5.1386 7.12802 5.07807 7.08954 5.0112 7.06336C4.94433 7.03718 4.87249 7.02384 4.79998 7.02414C4.72747 7.02443 4.65576 7.03835 4.58914 7.06508C4.52251 7.0918 4.46234 7.13077 4.4122 7.17967C4.36206 7.22856 4.32299 7.28639 4.29731 7.34969C4.27163 7.41298 4.25987 7.48046 4.26274 7.54809C4.2656 7.61572 4.28303 7.68212 4.31398 7.74333C4.34493 7.80454 4.38878 7.8593 4.44289 7.90435L6.63969 9.86913C6.69848 9.92161 6.76922 9.96101 6.84661 9.98439C6.92401 10.0078 7.00607 10.0145 7.08665 10.0041C7.16724 9.99378 7.24427 9.96655 7.312 9.92449C7.37973 9.88243 7.4364 9.82664 7.47779 9.76127L10.6477 4.75203Z" fill="#1DA1F2"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.4 KiB |
3
public/assets/icons/wallet-icon.svg
Normal file
3
public/assets/icons/wallet-icon.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#e58625">
|
||||||
|
<path d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 333 B |
@@ -3,6 +3,7 @@
|
|||||||
import { useSession } from 'next-auth/react';
|
import { useSession } from 'next-auth/react';
|
||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
|
import { Button } from '@/components/ui/Button';
|
||||||
|
|
||||||
// Mock agent data - in production, this would come from API
|
// Mock agent data - in production, this would come from API
|
||||||
const agentData = {
|
const agentData = {
|
||||||
@@ -74,14 +75,13 @@ function StarRating({ rating }: { rating: number }) {
|
|||||||
return (
|
return (
|
||||||
<div className="flex gap-0.5">
|
<div className="flex gap-0.5">
|
||||||
{[1, 2, 3, 4, 5].map((star) => (
|
{[1, 2, 3, 4, 5].map((star) => (
|
||||||
<svg
|
<Image
|
||||||
key={star}
|
key={star}
|
||||||
className={`w-4 h-4 ${star <= rating ? 'text-[#e58625]' : 'text-gray-300'}`}
|
src={star <= rating ? '/assets/icons/star-filled-icon.svg' : '/assets/icons/star-empty-icon.svg'}
|
||||||
fill="currentColor"
|
alt={star <= rating ? 'Filled star' : 'Empty star'}
|
||||||
viewBox="0 0 20 20"
|
width={16}
|
||||||
>
|
height={16}
|
||||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
/>
|
||||||
</svg>
|
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@@ -91,13 +91,12 @@ function StarRating({ rating }: { rating: number }) {
|
|||||||
function Tag({ children, variant = 'default' }: { children: React.ReactNode; variant?: 'default' | 'light' | 'orange' }) {
|
function Tag({ children, variant = 'default' }: { children: React.ReactNode; variant?: 'default' | 'light' | 'orange' }) {
|
||||||
return (
|
return (
|
||||||
<span
|
<span
|
||||||
className={`inline-flex items-center px-3 py-1 rounded-full text-sm border ${
|
className={`inline-flex items-center px-3 py-1 rounded-full text-sm border ${variant === 'light'
|
||||||
variant === 'light'
|
|
||||||
? 'border-[#00293d]/30 text-[#00293d] bg-transparent'
|
? 'border-[#00293d]/30 text-[#00293d] bg-transparent'
|
||||||
: variant === 'orange'
|
: variant === 'orange'
|
||||||
? 'border-[#e58625] text-[#e58625] bg-transparent'
|
? 'border-[#e58625] text-[#e58625] bg-transparent'
|
||||||
: 'border-[#00293d] text-[#00293d] bg-transparent'
|
: 'border-[#00293d] text-[#00293d] bg-transparent'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</span>
|
</span>
|
||||||
@@ -116,7 +115,7 @@ function SpecializationCard({
|
|||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<div className="bg-white rounded-[20px] p-6 text-center shadow-sm">
|
<div className="bg-white rounded-[20px] p-6 text-center shadow-sm">
|
||||||
<div className="flex justify-center mb-3 text-[#e58625]">{icon}</div>
|
<div className="flex justify-center mb-3">{icon}</div>
|
||||||
<h4 className="font-bold text-[#00293d] text-sm mb-4">{title}</h4>
|
<h4 className="font-bold text-[#00293d] text-sm mb-4">{title}</h4>
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
{items.map((item, idx) => (
|
{items.map((item, idx) => (
|
||||||
@@ -127,9 +126,12 @@ function SpecializationCard({
|
|||||||
</div>
|
</div>
|
||||||
<button className="mt-4 inline-flex items-center gap-1 text-[#e58625] text-xs font-medium hover:opacity-80 transition-opacity">
|
<button className="mt-4 inline-flex items-center gap-1 text-[#e58625] text-xs font-medium hover:opacity-80 transition-opacity">
|
||||||
Show More
|
Show More
|
||||||
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<Image
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
src="/assets/icons/chevron-down-icon.svg"
|
||||||
</svg>
|
alt="Show more"
|
||||||
|
width={12}
|
||||||
|
height={12}
|
||||||
|
/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@@ -146,9 +148,9 @@ function InfoCard({
|
|||||||
icon: React.ReactNode;
|
icon: React.ReactNode;
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<div className="bg-white rounded-[20px] border border-gray-200 p-6 text-center">
|
<div className="bg-white rounded-[10px] shadow-[0px_10px_20px_0px_rgba(217,217,217,0.5)] p-6 text-center">
|
||||||
<div className="flex justify-center mb-3 text-[#e58625]">{icon}</div>
|
<div className="flex justify-center mb-3">{icon}</div>
|
||||||
{title && <h4 className="font-semibold text-[#00293d] text-sm mb-3">{title}</h4>}
|
{title && <h4 className="font-bold text-[#00293d] text-sm mb-3">{title}</h4>}
|
||||||
<div className="text-[#00293d] text-sm">{content}</div>
|
<div className="text-[#00293d] text-sm">{content}</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@@ -164,18 +166,25 @@ export default function AgentDashboard() {
|
|||||||
{/* Left Sidebar - Status & Contact */}
|
{/* Left Sidebar - Status & Contact */}
|
||||||
<div className="w-full lg:w-[180px] flex-shrink-0 space-y-4">
|
<div className="w-full lg:w-[180px] flex-shrink-0 space-y-4">
|
||||||
{/* Profile Image */}
|
{/* Profile Image */}
|
||||||
<div className="relative">
|
<div className="relative mx-auto lg:mx-0">
|
||||||
<div className="w-[140px] h-[140px] rounded-[20px] bg-[#8fa9a8] overflow-hidden mx-auto lg:mx-0">
|
{/* Profile Image */}
|
||||||
<div className="w-full h-full bg-gradient-to-br from-[#8fa9a8] to-[#6b8a89] flex items-center justify-center">
|
<div className="w-[200px] h-[200px] rounded-[15px] overflow-hidden">
|
||||||
<svg className="w-20 h-20 text-white/50" fill="currentColor" viewBox="0 0 24 24">
|
<Image
|
||||||
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
|
src="/assets/demo_images/8f017153a7b4a239a4f0691234ef97dd55092282.jpg"
|
||||||
</svg>
|
alt="Profile"
|
||||||
</div>
|
width={200}
|
||||||
|
height={200}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<button className="absolute bottom-2 right-2 lg:right-auto lg:left-[110px] bg-white rounded-lg p-1.5 shadow-md hover:bg-gray-50 transition-colors">
|
{/* Edit Icon - Top Right Outside */}
|
||||||
<svg className="w-4 h-4 text-[#00293d]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<button className="absolute -top-3 -right-3 w-9 h-9 bg-white rounded-[10px] shadow-md flex items-center justify-center hover:bg-gray-50 transition-colors">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
<Image
|
||||||
</svg>
|
src="/assets/icons/edit-icon.svg"
|
||||||
|
alt="Edit profile"
|
||||||
|
width={20}
|
||||||
|
height={20}
|
||||||
|
/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -211,9 +220,12 @@ export default function AgentDashboard() {
|
|||||||
<span className="font-bold text-[#00293d]">Ph.No:</span>
|
<span className="font-bold text-[#00293d]">Ph.No:</span>
|
||||||
<span className="text-[#00293d]">{agentData.phone}</span>
|
<span className="text-[#00293d]">{agentData.phone}</span>
|
||||||
<button className="p-1 hover:bg-gray-100 rounded">
|
<button className="p-1 hover:bg-gray-100 rounded">
|
||||||
<svg className="w-4 h-4 text-[#00293d]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<Image
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
src="/assets/icons/edit-pencil-icon.svg"
|
||||||
</svg>
|
alt="Edit phone"
|
||||||
|
width={16}
|
||||||
|
height={16}
|
||||||
|
/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -228,22 +240,30 @@ export default function AgentDashboard() {
|
|||||||
<div>
|
<div>
|
||||||
{/* Name and Verification */}
|
{/* Name and Verification */}
|
||||||
<div className="flex items-center gap-2 mb-1">
|
<div className="flex items-center gap-2 mb-1">
|
||||||
<h1 className="text-xl font-bold text-[#00293d]">
|
<h1 className="text-[18px] text-[#00293d]">
|
||||||
<span className="font-bold">{agentData.name.split(' ')[0]}</span>{' '}
|
<span className="font-bold">{agentData.name.split(' ')[0]}</span>{' '}
|
||||||
<span className="font-normal">{agentData.name.split(' ')[1]}</span>
|
<span className="font-normal">{agentData.name.split(' ')[1]}</span>
|
||||||
</h1>
|
</h1>
|
||||||
{agentData.isVerified && (
|
{agentData.isVerified && (
|
||||||
<span className="text-[#e58625] text-sm font-medium flex items-center gap-1">
|
<>
|
||||||
(Verified Expert)
|
<Image
|
||||||
<svg className="w-4 h-4 text-[#5ba4a4]" fill="currentColor" viewBox="0 0 20 20">
|
src="/assets/icons/verified-icon.svg"
|
||||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
alt="Verified"
|
||||||
</svg>
|
width={15}
|
||||||
</span>
|
height={14}
|
||||||
|
/>
|
||||||
|
<span className="text-[14px] text-[#638559] font-medium font-serif">
|
||||||
|
(Verified Expert)
|
||||||
|
</span>
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
<button className="p-1 hover:bg-gray-100 rounded transition-colors">
|
<button className="p-1 hover:bg-gray-100 rounded transition-colors">
|
||||||
<svg className="w-4 h-4 text-[#5ba4a4]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<Image
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
src="/assets/icons/edit-pencil-icon.svg"
|
||||||
</svg>
|
alt="Edit name"
|
||||||
|
width={16}
|
||||||
|
height={16}
|
||||||
|
/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -253,35 +273,56 @@ export default function AgentDashboard() {
|
|||||||
{/* Location and Member Since */}
|
{/* Location and Member Since */}
|
||||||
<div className="flex items-center gap-4 text-sm text-[#00293d]">
|
<div className="flex items-center gap-4 text-sm text-[#00293d]">
|
||||||
<span className="flex items-center gap-1 text-[#e58625] font-medium">
|
<span className="flex items-center gap-1 text-[#e58625] font-medium">
|
||||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<Image
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
src="/assets/icons/location-icon.svg"
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
alt="Location"
|
||||||
</svg>
|
width={16}
|
||||||
|
height={16}
|
||||||
|
/>
|
||||||
{agentData.location}
|
{agentData.location}
|
||||||
</span>
|
</span>
|
||||||
<span className="flex items-center gap-1">
|
<span className="flex items-center gap-1">
|
||||||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
<Image
|
||||||
<path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd" />
|
src="/assets/icons/calendar-icon.svg"
|
||||||
</svg>
|
alt="Calendar"
|
||||||
|
width={16}
|
||||||
|
height={16}
|
||||||
|
/>
|
||||||
Member Since {agentData.memberSince}
|
Member Since {agentData.memberSince}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Action Buttons */}
|
{/* Action Buttons */}
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-3">
|
||||||
<button className="flex items-center gap-2 px-4 py-2 bg-[#e58625] text-white text-sm rounded-lg hover:bg-[#d47a1f] transition-colors">
|
<Button
|
||||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
variant="action"
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
|
size="sm"
|
||||||
</svg>
|
leftIcon={
|
||||||
|
<Image
|
||||||
|
src="/assets/icons/message-icon.svg"
|
||||||
|
alt="Message"
|
||||||
|
width={16}
|
||||||
|
height={16}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
>
|
||||||
Message
|
Message
|
||||||
</button>
|
</Button>
|
||||||
<button className="flex items-center gap-2 px-4 py-2 bg-[#e58625] text-white text-sm rounded-lg hover:bg-[#d47a1f] transition-colors">
|
<Button
|
||||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
variant="action"
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
size="sm"
|
||||||
</svg>
|
leftIcon={
|
||||||
|
<Image
|
||||||
|
src="/assets/icons/clipboard-icon.svg"
|
||||||
|
alt="Requests"
|
||||||
|
width={16}
|
||||||
|
height={16}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
>
|
||||||
Requests
|
Requests
|
||||||
</button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -372,9 +413,12 @@ export default function AgentDashboard() {
|
|||||||
<InfoCard
|
<InfoCard
|
||||||
title="Availability"
|
title="Availability"
|
||||||
icon={
|
icon={
|
||||||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<Image
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
src="/assets/icons/clock-icon.svg"
|
||||||
</svg>
|
alt="Availability"
|
||||||
|
width={32}
|
||||||
|
height={32}
|
||||||
|
/>
|
||||||
}
|
}
|
||||||
content={
|
content={
|
||||||
<div>
|
<div>
|
||||||
@@ -390,19 +434,24 @@ export default function AgentDashboard() {
|
|||||||
<InfoCard
|
<InfoCard
|
||||||
title="Preferred work environment"
|
title="Preferred work environment"
|
||||||
icon={
|
icon={
|
||||||
<svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<Image
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
src="/assets/icons/location-large-icon.svg"
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
alt="Work environment"
|
||||||
</svg>
|
width={32}
|
||||||
|
height={32}
|
||||||
|
/>
|
||||||
}
|
}
|
||||||
content={<p className="text-sm leading-relaxed">{agentData.preferredWorkEnvironment}</p>}
|
content={<p className="text-sm leading-relaxed">{agentData.preferredWorkEnvironment}</p>}
|
||||||
/>
|
/>
|
||||||
<InfoCard
|
<InfoCard
|
||||||
title=""
|
title=""
|
||||||
icon={
|
icon={
|
||||||
<svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
|
<Image
|
||||||
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
|
src="/assets/icons/star-icon.svg"
|
||||||
</svg>
|
alt="Testimonial"
|
||||||
|
width={32}
|
||||||
|
height={32}
|
||||||
|
/>
|
||||||
}
|
}
|
||||||
content={<p className="text-sm leading-relaxed italic">“{agentData.testimonialHighlight}”</p>}
|
content={<p className="text-sm leading-relaxed italic">“{agentData.testimonialHighlight}”</p>}
|
||||||
/>
|
/>
|
||||||
@@ -419,28 +468,36 @@ export default function AgentDashboard() {
|
|||||||
title="Specialization"
|
title="Specialization"
|
||||||
items={agentData.specialization.types}
|
items={agentData.specialization.types}
|
||||||
icon={
|
icon={
|
||||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
<Image
|
||||||
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
|
src="/assets/icons/home-icon.svg"
|
||||||
</svg>
|
alt="Specialization"
|
||||||
|
width={24}
|
||||||
|
height={24}
|
||||||
|
/>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
<SpecializationCard
|
<SpecializationCard
|
||||||
title="Loan Type"
|
title="Loan Type"
|
||||||
items={agentData.specialization.loanTypes}
|
items={agentData.specialization.loanTypes}
|
||||||
icon={
|
icon={
|
||||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
<Image
|
||||||
<path d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" />
|
src="/assets/icons/wallet-icon.svg"
|
||||||
</svg>
|
alt="Loan Type"
|
||||||
|
width={24}
|
||||||
|
height={24}
|
||||||
|
/>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
<SpecializationCard
|
<SpecializationCard
|
||||||
title="Property Type"
|
title="Property Type"
|
||||||
items={agentData.specialization.propertyTypes}
|
items={agentData.specialization.propertyTypes}
|
||||||
icon={
|
icon={
|
||||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
<Image
|
||||||
<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z" />
|
src="/assets/icons/chart-icon.svg"
|
||||||
<path d="M7 12h2v5H7zm4-3h2v8h-2zm4-3h2v11h-2z" />
|
alt="Property Type"
|
||||||
</svg>
|
width={24}
|
||||||
|
height={24}
|
||||||
|
/>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -449,18 +506,24 @@ export default function AgentDashboard() {
|
|||||||
title="Hobbies & Interests"
|
title="Hobbies & Interests"
|
||||||
items={agentData.specialization.hobbies}
|
items={agentData.specialization.hobbies}
|
||||||
icon={
|
icon={
|
||||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
<Image
|
||||||
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
|
src="/assets/icons/heart-icon.svg"
|
||||||
</svg>
|
alt="Hobbies"
|
||||||
|
width={24}
|
||||||
|
height={24}
|
||||||
|
/>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
<SpecializationCard
|
<SpecializationCard
|
||||||
title="Price Point"
|
title="Price Point"
|
||||||
items={agentData.specialization.pricePoints}
|
items={agentData.specialization.pricePoints}
|
||||||
icon={
|
icon={
|
||||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
<Image
|
||||||
<path d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z" />
|
src="/assets/icons/dollar-icon.svg"
|
||||||
</svg>
|
alt="Price Point"
|
||||||
|
width={24}
|
||||||
|
height={24}
|
||||||
|
/>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -484,9 +547,12 @@ export default function AgentDashboard() {
|
|||||||
<p className="text-[#00293d]/70 text-sm mb-4 leading-relaxed">{testimonial.text}</p>
|
<p className="text-[#00293d]/70 text-sm mb-4 leading-relaxed">{testimonial.text}</p>
|
||||||
<div className="flex items-center gap-3 pt-4 border-t border-gray-100">
|
<div className="flex items-center gap-3 pt-4 border-t border-gray-100">
|
||||||
<div className="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center overflow-hidden">
|
<div className="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center overflow-hidden">
|
||||||
<svg className="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 24 24">
|
<Image
|
||||||
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
|
src="/assets/icons/user-placeholder-icon.svg"
|
||||||
</svg>
|
alt="User"
|
||||||
|
width={24}
|
||||||
|
height={24}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<StarRating rating={testimonial.rating} />
|
<StarRating rating={testimonial.rating} />
|
||||||
|
|||||||
@@ -37,6 +37,7 @@
|
|||||||
--color-foreground: var(--color-foreground);
|
--color-foreground: var(--color-foreground);
|
||||||
--font-sans: var(--font-geist-sans);
|
--font-sans: var(--font-geist-sans);
|
||||||
--font-mono: var(--font-geist-mono);
|
--font-mono: var(--font-geist-mono);
|
||||||
|
--font-serif: var(--font-source-serif-4);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Disable dark mode for consistent branding */
|
/* Disable dark mode for consistent branding */
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { Geist, Geist_Mono } from "next/font/google";
|
import { Geist, Geist_Mono, Source_Serif_4 } from "next/font/google";
|
||||||
import { SessionProvider } from "@/components/providers/session-provider";
|
import { SessionProvider } from "@/components/providers/session-provider";
|
||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
|
|
||||||
@@ -13,6 +13,12 @@ const geistMono = Geist_Mono({
|
|||||||
subsets: ["latin"],
|
subsets: ["latin"],
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const sourceSerif4 = Source_Serif_4({
|
||||||
|
variable: "--font-source-serif-4",
|
||||||
|
subsets: ["latin"],
|
||||||
|
weight: ["400", "500", "600", "700"],
|
||||||
|
});
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Real Estate Platform",
|
title: "Real Estate Platform",
|
||||||
description: "Find your dream property with trusted agents",
|
description: "Find your dream property with trusted agents",
|
||||||
@@ -26,7 +32,7 @@ export default function RootLayout({
|
|||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<body
|
<body
|
||||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
className={`${geistSans.variable} ${geistMono.variable} ${sourceSerif4.variable} antialiased`}
|
||||||
>
|
>
|
||||||
<SessionProvider>{children}</SessionProvider>
|
<SessionProvider>{children}</SessionProvider>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -3,24 +3,27 @@
|
|||||||
import { ButtonHTMLAttributes, ReactNode } from 'react';
|
import { ButtonHTMLAttributes, ReactNode } from 'react';
|
||||||
|
|
||||||
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
||||||
variant?: 'primary' | 'secondary' | 'outline';
|
variant?: 'primary' | 'secondary' | 'outline' | 'action';
|
||||||
size?: 'sm' | 'md' | 'lg';
|
size?: 'sm' | 'md' | 'lg';
|
||||||
|
leftIcon?: ReactNode;
|
||||||
children: ReactNode;
|
children: ReactNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function Button({
|
export function Button({
|
||||||
variant = 'primary',
|
variant = 'primary',
|
||||||
size = 'md',
|
size = 'md',
|
||||||
|
leftIcon,
|
||||||
children,
|
children,
|
||||||
className = '',
|
className = '',
|
||||||
...props
|
...props
|
||||||
}: ButtonProps) {
|
}: ButtonProps) {
|
||||||
const baseStyles = 'font-medium rounded-lg transition-all duration-200 inline-flex items-center justify-center';
|
const baseStyles = 'font-medium transition-all duration-200 inline-flex items-center justify-center';
|
||||||
|
|
||||||
const variants = {
|
const variants = {
|
||||||
primary: 'bg-[#f5a623] text-white hover:bg-[#e09620] active:bg-[#c98a1c]',
|
primary: 'bg-[#f5a623] text-white hover:bg-[#e09620] active:bg-[#c98a1c] rounded-lg',
|
||||||
secondary: 'bg-[#00293d] text-white hover:bg-[#003a57] active:bg-[#001f2e]',
|
secondary: 'bg-[#00293d] text-white hover:bg-[#003a57] active:bg-[#001f2e] rounded-lg',
|
||||||
outline: 'border-2 border-[#00293d] text-[#00293d] hover:bg-[#00293d] hover:text-white',
|
outline: 'border-2 border-[#00293d] text-[#00293d] hover:bg-[#00293d] hover:text-white rounded-lg',
|
||||||
|
action: 'bg-[#e58625] text-white border-[0.1px] border-[#00293d] rounded-[15px] hover:bg-[#d47920] active:bg-[#c26e1b]',
|
||||||
};
|
};
|
||||||
|
|
||||||
const sizes = {
|
const sizes = {
|
||||||
@@ -34,6 +37,7 @@ export function Button({
|
|||||||
className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
|
className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
|
{leftIcon && <span className="mr-2">{leftIcon}</span>}
|
||||||
{children}
|
{children}
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user