revamp template
This commit is contained in:
fro1991
50
src/partials/cards/CardAddNew.tsx
Normal file
50
src/partials/cards/CardAddNew.tsx
Normal file
@ -0,0 +1,50 @@
|
||||
import { Fragment } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { KeenIcon } from '@/components';
|
||||
import { toAbsoluteUrl } from '@/utils/Assets';
|
||||
|
||||
import { CommonHexagonBadge } from '../common';
|
||||
import { IAddNewProps } from './CardAddNewRow';
|
||||
import { useSettings } from '@/providers';
|
||||
|
||||
const CardAddNew = ({ path, size, iconSize, title, subTitle }: IAddNewProps) => {
|
||||
const { getThemeMode } = useSettings();
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<Link
|
||||
to={`${path}`}
|
||||
className="card border-2 border-dashed border-brand-clarity bg-center bg-[length:600px] bg-no-repeat"
|
||||
style={{
|
||||
backgroundImage:
|
||||
getThemeMode() === 'dark'
|
||||
? `url('${toAbsoluteUrl('/media/images/2600x1200/bg-4-dark.png')}')`
|
||||
: `url('${toAbsoluteUrl('/media/images/2600x1200/bg-4.png')}')`
|
||||
}}
|
||||
>
|
||||
<div className="card-body grid items-center">
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex justify-center pt-5">
|
||||
<CommonHexagonBadge
|
||||
size={size}
|
||||
badge={<KeenIcon icon="rocket" className={`${iconSize} text-brand`} />}
|
||||
stroke="stroke-brand-clarity"
|
||||
fill="fill-light"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col text-center">
|
||||
<span className="text-lg font-medium text-gray-900 hover:text-primary-active mb-px">
|
||||
{title}
|
||||
</span>
|
||||
<span className="text-2sm text-gray-700">{subTitle}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
export { CardAddNew };
|
||||
45
src/partials/cards/CardAddNewRow.tsx
Normal file
45
src/partials/cards/CardAddNewRow.tsx
Normal file
@ -0,0 +1,45 @@
|
||||
import { Fragment } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { KeenIcon } from '@/components';
|
||||
import { CommonHexagonBadge } from '../common';
|
||||
|
||||
interface IAddNewProps {
|
||||
path: string;
|
||||
size: string;
|
||||
iconSize: string;
|
||||
title: string;
|
||||
subTitle: string;
|
||||
}
|
||||
|
||||
const CardAddNewRow = ({ path, size, iconSize, title, subTitle }: IAddNewProps) => {
|
||||
return (
|
||||
<Fragment>
|
||||
<Link
|
||||
to={`/${path}`}
|
||||
className="card border-2 border-dashed border-brand-clarity bg-center bg-cover bg-no-repeat"
|
||||
>
|
||||
<div className="card-body">
|
||||
<div className="flex items-center justify-center gap-5">
|
||||
<div className="flex justify-center">
|
||||
<CommonHexagonBadge
|
||||
size={size}
|
||||
badge={<KeenIcon icon="rocket" className={`${iconSize} text-brand`} />}
|
||||
stroke="stroke-brand-clarity"
|
||||
fill="fill-light"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col text-start">
|
||||
<span className="text-lg font-semibold text-gray-900 hover:text-primary-active mb-px">
|
||||
{title}
|
||||
</span>
|
||||
<span className="text-2sm font-normal text-gray-600">{subTitle}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
export { CardAddNewRow, type IAddNewProps };
|
||||
124
src/partials/cards/CardAuthor.tsx
Normal file
124
src/partials/cards/CardAuthor.tsx
Normal file
@ -0,0 +1,124 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { KeenIcon } from '@/components';
|
||||
import { toAbsoluteUrl } from '@/utils/Assets';
|
||||
|
||||
import { CommonAvatar } from '../common';
|
||||
|
||||
interface IAvatar {
|
||||
className?: string;
|
||||
image?: string;
|
||||
imageClass?: string;
|
||||
fallback?: string;
|
||||
badgeClass?: string;
|
||||
}
|
||||
|
||||
interface IWork {
|
||||
image: string;
|
||||
title: string;
|
||||
id: number;
|
||||
}
|
||||
|
||||
interface IAuthorProps {
|
||||
avatar?: IAvatar;
|
||||
bgImage: string;
|
||||
name: string;
|
||||
location: string;
|
||||
works: IWork[];
|
||||
}
|
||||
|
||||
const CardAuthor = ({ avatar, bgImage, name, location, works }: IAuthorProps) => {
|
||||
const renderItem = (work: IWork, index: number) => {
|
||||
return (
|
||||
<div key={index} className="card mb-4 border-0 last:me-5">
|
||||
<div
|
||||
className="bg-cover bg-no-repeat card-rounded-t w-[240px] shrink-0 h-44"
|
||||
style={{
|
||||
backgroundImage: `url(${toAbsoluteUrl(`/media/images/600x600/${work.image}`)})`
|
||||
}}
|
||||
></div>
|
||||
|
||||
<div className="card-border card-rounded-b px-3.5 pt-5 pb-2.5">
|
||||
<a
|
||||
href="#"
|
||||
className="font-medium block text-gray-900 hover:text-primary text-md leading-4 mb-2"
|
||||
>
|
||||
{work.title}
|
||||
</a>
|
||||
<div className="text-2sm text-gray-700">
|
||||
Token ID:
|
||||
<span className="text-2sm font-medium text-gray-800">{work.id}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card">
|
||||
<div
|
||||
className="card-header p-0 bg-no-repeat bg-cover bg-center card-rounded-t h-40"
|
||||
style={{ backgroundImage: `url(${toAbsoluteUrl(`/media/images/2600x1200/${bgImage}`)})` }}
|
||||
></div>
|
||||
|
||||
<div className="card-body mb-7.5 p-0">
|
||||
<div className="flex transform -translate-y-1/2 px-5 lg:px-7.5 gap-1.5">
|
||||
<CommonAvatar
|
||||
className={avatar?.className}
|
||||
image={avatar?.image}
|
||||
imageClass={avatar?.imageClass}
|
||||
badgeClass={avatar?.badgeClass}
|
||||
/>
|
||||
|
||||
<div className="flex flex-col justify-end grow">
|
||||
<div className="flex items-center justify-between flex-wrap gap-2">
|
||||
<div className="flex flex-col justify-end gap-0.5">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<a
|
||||
href="#"
|
||||
className="hover:text-primary-active text-base leading-5 font-medium text-gray-900"
|
||||
>
|
||||
{name}
|
||||
</a>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="15"
|
||||
height="16"
|
||||
viewBox="0 0 15 16"
|
||||
fill="none"
|
||||
className="text-primary"
|
||||
>
|
||||
<path
|
||||
d="M14.5425 6.89749L13.5 5.83999C13.4273 5.76877 13.3699 5.6835 13.3312 5.58937C13.2925 5.49525 13.2734 5.39424 13.275 5.29249V3.79249C13.274 3.58699 13.2324 3.38371 13.1527 3.19432C13.0729 3.00494 12.9565 2.83318 12.8101 2.68892C12.6638 2.54466 12.4904 2.43073 12.2998 2.35369C12.1093 2.27665 11.9055 2.23801 11.7 2.23999H10.2C10.0982 2.24159 9.99722 2.22247 9.9031 2.18378C9.80898 2.1451 9.72371 2.08767 9.65249 2.01499L8.60249 0.957487C8.30998 0.665289 7.91344 0.50116 7.49999 0.50116C7.08654 0.50116 6.68999 0.665289 6.39749 0.957487L5.33999 1.99999C5.26876 2.07267 5.1835 2.1301 5.08937 2.16879C4.99525 2.20747 4.89424 2.22659 4.79249 2.22499H3.29249C3.08699 2.22597 2.88371 2.26754 2.69432 2.34731C2.50494 2.42709 2.33318 2.54349 2.18892 2.68985C2.04466 2.8362 1.93073 3.00961 1.85369 3.20013C1.77665 3.39064 1.73801 3.5945 1.73999 3.79999V5.29999C1.74159 5.40174 1.72247 5.50275 1.68378 5.59687C1.6451 5.691 1.58767 5.77627 1.51499 5.84749L0.457487 6.89749C0.165289 7.19 0.00115967 7.58654 0.00115967 7.99999C0.00115967 8.41344 0.165289 8.80998 0.457487 9.10249L1.49999 10.16C1.57267 10.2312 1.6301 10.3165 1.66878 10.4106C1.70747 10.5047 1.72659 10.6057 1.72499 10.7075V12.2075C1.72597 12.413 1.76754 12.6163 1.84731 12.8056C1.92709 12.995 2.04349 13.1668 2.18985 13.3111C2.3362 13.4553 2.50961 13.5692 2.70013 13.6463C2.89064 13.7233 3.0945 13.762 3.29999 13.76H4.79999C4.90174 13.7584 5.00275 13.7775 5.09687 13.8162C5.191 13.8549 5.27627 13.9123 5.34749 13.985L6.40499 15.0425C6.69749 15.3347 7.09404 15.4988 7.50749 15.4988C7.92094 15.4988 8.31748 15.3347 8.60999 15.0425L9.65999 14C9.73121 13.9273 9.81647 13.8699 9.9106 13.8312C10.0047 13.7925 10.1057 13.7734 10.2075 13.775H11.7075C12.1212 13.775 12.518 13.6106 12.8106 13.3181C13.1031 13.0255 13.2675 12.6287 13.2675 12.215V10.715C13.2659 10.6132 13.285 10.5122 13.3237 10.4181C13.3624 10.324 13.4198 10.2387 13.4925 10.1675L14.55 9.10999C14.6953 8.96452 14.8104 8.79176 14.8887 8.60164C14.9671 8.41152 15.007 8.20779 15.0063 8.00218C15.0056 7.79656 14.9643 7.59311 14.8847 7.40353C14.8051 7.21394 14.6888 7.04197 14.5425 6.89749ZM10.635 6.64999L6.95249 10.25C6.90055 10.3026 6.83864 10.3443 6.77038 10.3726C6.70212 10.4009 6.62889 10.4153 6.55499 10.415C6.48062 10.4139 6.40719 10.3982 6.33896 10.3685C6.27073 10.3389 6.20905 10.2961 6.15749 10.2425L4.37999 8.44249C4.32532 8.39044 4.28169 8.32793 4.25169 8.25867C4.22169 8.18941 4.20593 8.11482 4.20536 8.03934C4.20479 7.96387 4.21941 7.88905 4.24836 7.81934C4.27731 7.74964 4.31999 7.68647 4.37387 7.63361C4.42774 7.58074 4.4917 7.53926 4.56194 7.51163C4.63218 7.484 4.70726 7.47079 4.78271 7.47278C4.85816 7.47478 4.93244 7.49194 5.00112 7.52324C5.0698 7.55454 5.13148 7.59935 5.18249 7.65499L6.56249 9.05749L9.84749 5.84749C9.95296 5.74215 10.0959 5.68298 10.245 5.68298C10.394 5.68298 10.537 5.74215 10.6425 5.84749C10.6953 5.90034 10.737 5.96318 10.7653 6.03234C10.7935 6.1015 10.8077 6.1756 10.807 6.25031C10.8063 6.32502 10.7908 6.39884 10.7612 6.46746C10.7317 6.53608 10.6888 6.59813 10.635 6.64999Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-gray-700 text-xs">{location}</span>
|
||||
</div>
|
||||
|
||||
<button className="btn btn-sm btn-light">
|
||||
<KeenIcon icon="like-shapes" /> Work with me
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-5 scrollable-x mt-8 ms-7.5">
|
||||
{works.map((work, index) => {
|
||||
return renderItem(work, index);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card-footer justify-center">
|
||||
<Link to="/account/members/team-members" className="btn btn-link">
|
||||
View Profile
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { CardAuthor, type IAvatar, type IWork, type IAuthorProps };
|
||||
100
src/partials/cards/CardAuthorRow.tsx
Normal file
100
src/partials/cards/CardAuthorRow.tsx
Normal file
@ -0,0 +1,100 @@
|
||||
import { KeenIcon } from '@/components';
|
||||
import { toAbsoluteUrl } from '@/utils/Assets';
|
||||
|
||||
import { CommonAvatar } from '../common';
|
||||
import { IAuthorProps, IWork } from './CardAuthor';
|
||||
|
||||
const CardAuthorRow = ({ avatar, name, location, works }: IAuthorProps) => {
|
||||
const renderItem = (work: IWork, index: number) => {
|
||||
return (
|
||||
<div key={index} className="flex items-center gap-3.5 min-w-64 last:me-5">
|
||||
<div
|
||||
className="rounded-md bg-no-repeat bg-cover min-w-24 max-w-24 h-12 shrink-0"
|
||||
style={{
|
||||
backgroundImage: `url(${toAbsoluteUrl(`/media/images/600x600/${work.image}`)})`
|
||||
}}
|
||||
></div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<a
|
||||
href="#"
|
||||
className="font-medium block text-gray-900 hover:text-primary text-md leading-4 mb-2"
|
||||
>
|
||||
{work.title}
|
||||
</a>
|
||||
<div className="text-2sm text-gray-700">
|
||||
Token ID:
|
||||
<span className="text-2sm font-medium text-gray-800">{work.id}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card">
|
||||
<div className="card-body flex flex-wrap gap-5 items-center justify-between">
|
||||
<div className="flex items-center flex-wrap gap-3.5">
|
||||
<CommonAvatar
|
||||
className={avatar?.className}
|
||||
image={avatar?.image}
|
||||
imageClass={avatar?.imageClass}
|
||||
badgeClass={avatar?.badgeClass}
|
||||
/>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<a
|
||||
href="#"
|
||||
className="hover:text-primary-active text-base leading-5 font-medium text-gray-900"
|
||||
>
|
||||
{name}
|
||||
</a>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="15"
|
||||
height="16"
|
||||
viewBox="0 0 15 16"
|
||||
fill="none"
|
||||
className="text-primary"
|
||||
>
|
||||
<path
|
||||
d="M14.5425 6.89749L13.5 5.83999C13.4273 5.76877 13.3699 5.6835 13.3312 5.58937C13.2925 5.49525 13.2734 5.39424 13.275 5.29249V3.79249C13.274 3.58699 13.2324 3.38371 13.1527 3.19432C13.0729 3.00494 12.9565 2.83318 12.8101 2.68892C12.6638 2.54466 12.4904 2.43073 12.2998 2.35369C12.1093 2.27665 11.9055 2.23801 11.7 2.23999H10.2C10.0982 2.24159 9.99722 2.22247 9.9031 2.18378C9.80898 2.1451 9.72371 2.08767 9.65249 2.01499L8.60249 0.957487C8.30998 0.665289 7.91344 0.50116 7.49999 0.50116C7.08654 0.50116 6.68999 0.665289 6.39749 0.957487L5.33999 1.99999C5.26876 2.07267 5.1835 2.1301 5.08937 2.16879C4.99525 2.20747 4.89424 2.22659 4.79249 2.22499H3.29249C3.08699 2.22597 2.88371 2.26754 2.69432 2.34731C2.50494 2.42709 2.33318 2.54349 2.18892 2.68985C2.04466 2.8362 1.93073 3.00961 1.85369 3.20013C1.77665 3.39064 1.73801 3.5945 1.73999 3.79999V5.29999C1.74159 5.40174 1.72247 5.50275 1.68378 5.59687C1.6451 5.691 1.58767 5.77627 1.51499 5.84749L0.457487 6.89749C0.165289 7.19 0.00115967 7.58654 0.00115967 7.99999C0.00115967 8.41344 0.165289 8.80998 0.457487 9.10249L1.49999 10.16C1.57267 10.2312 1.6301 10.3165 1.66878 10.4106C1.70747 10.5047 1.72659 10.6057 1.72499 10.7075V12.2075C1.72597 12.413 1.76754 12.6163 1.84731 12.8056C1.92709 12.995 2.04349 13.1668 2.18985 13.3111C2.3362 13.4553 2.50961 13.5692 2.70013 13.6463C2.89064 13.7233 3.0945 13.762 3.29999 13.76H4.79999C4.90174 13.7584 5.00275 13.7775 5.09687 13.8162C5.191 13.8549 5.27627 13.9123 5.34749 13.985L6.40499 15.0425C6.69749 15.3347 7.09404 15.4988 7.50749 15.4988C7.92094 15.4988 8.31748 15.3347 8.60999 15.0425L9.65999 14C9.73121 13.9273 9.81647 13.8699 9.9106 13.8312C10.0047 13.7925 10.1057 13.7734 10.2075 13.775H11.7075C12.1212 13.775 12.518 13.6106 12.8106 13.3181C13.1031 13.0255 13.2675 12.6287 13.2675 12.215V10.715C13.2659 10.6132 13.285 10.5122 13.3237 10.4181C13.3624 10.324 13.4198 10.2387 13.4925 10.1675L14.55 9.10999C14.6953 8.96452 14.8104 8.79176 14.8887 8.60164C14.9671 8.41152 15.007 8.20779 15.0063 8.00218C15.0056 7.79656 14.9643 7.59311 14.8847 7.40353C14.8051 7.21394 14.6888 7.04197 14.5425 6.89749ZM10.635 6.64999L6.95249 10.25C6.90055 10.3026 6.83864 10.3443 6.77038 10.3726C6.70212 10.4009 6.62889 10.4153 6.55499 10.415C6.48062 10.4139 6.40719 10.3982 6.33896 10.3685C6.27073 10.3389 6.20905 10.2961 6.15749 10.2425L4.37999 8.44249C4.32532 8.39044 4.28169 8.32793 4.25169 8.25867C4.22169 8.18941 4.20593 8.11482 4.20536 8.03934C4.20479 7.96387 4.21941 7.88905 4.24836 7.81934C4.27731 7.74964 4.31999 7.68647 4.37387 7.63361C4.42774 7.58074 4.4917 7.53926 4.56194 7.51163C4.63218 7.484 4.70726 7.47079 4.78271 7.47278C4.85816 7.47478 4.93244 7.49194 5.00112 7.52324C5.0698 7.55454 5.13148 7.59935 5.18249 7.65499L6.56249 9.05749L9.84749 5.84749C9.95296 5.74215 10.0959 5.68298 10.245 5.68298C10.394 5.68298 10.537 5.74215 10.6425 5.84749C10.6953 5.90034 10.737 5.96318 10.7653 6.03234C10.7935 6.1015 10.8077 6.1756 10.807 6.25031C10.8063 6.32502 10.7908 6.39884 10.7612 6.46746C10.7317 6.53608 10.6888 6.59813 10.635 6.64999Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<span className="flex items-center text-gray-700 text-sm">
|
||||
<KeenIcon icon="geolocation" className="me-1.5 text-mdtext-gray-500" />
|
||||
{location}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center flex-wrap gap-5 lg:gap-12">
|
||||
<div className="card p-2.5">
|
||||
<div className="scrollable-x">
|
||||
<div className="flex items-center gap-7.5 w-80 mb-2">
|
||||
{works.map((work, index) => {
|
||||
return renderItem(work, index);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="#" className="btn btn-link">
|
||||
View Profile
|
||||
</a>
|
||||
|
||||
<button className="btn btn-sm btn-light">
|
||||
<KeenIcon icon="like-shapes" />
|
||||
Work with me
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { CardAuthorRow };
|
||||
130
src/partials/cards/CardCampaign.tsx
Normal file
130
src/partials/cards/CardCampaign.tsx
Normal file
@ -0,0 +1,130 @@
|
||||
import { KeenIcon, Menu, MenuItem, MenuToggle } from '@/components';
|
||||
import { toAbsoluteUrl } from '@/utils/Assets';
|
||||
import { useLanguage } from '@/i18n';
|
||||
import { DropdownCard2 } from '../dropdowns/general';
|
||||
|
||||
interface ICampaignItem {
|
||||
total: string;
|
||||
description: string;
|
||||
}
|
||||
interface ICampaignItems extends Array<ICampaignItem> {}
|
||||
|
||||
interface ICampaignProps {
|
||||
logo: string;
|
||||
logoSize?: string;
|
||||
logoDark?: string;
|
||||
title: string;
|
||||
description: string;
|
||||
status: {
|
||||
variant: string;
|
||||
label: string;
|
||||
};
|
||||
statistics: ICampaignItem[];
|
||||
progress?: {
|
||||
variant: string;
|
||||
value: number;
|
||||
};
|
||||
url: string;
|
||||
}
|
||||
|
||||
const CardCampaign = ({
|
||||
logo,
|
||||
logoSize,
|
||||
logoDark,
|
||||
title,
|
||||
description,
|
||||
status,
|
||||
statistics,
|
||||
progress,
|
||||
url
|
||||
}: ICampaignProps) => {
|
||||
const { isRTL } = useLanguage();
|
||||
|
||||
const renderItem = (statistic: ICampaignItem, index: number) => {
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="flex flex-col gap-1.5 border border-dashed border-gray-300 rounded-md px-2.5 py-2"
|
||||
>
|
||||
<span className="text-gray-900 text-sm leading-none font-medium">{statistic.total}</span>
|
||||
<span className="text-gray-700 text-xs">{statistic.description}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card overflow-hidden grow justify-between">
|
||||
<div className="p-5 mb-5">
|
||||
<div className="flex items-center justify-between mb-5">
|
||||
<span className={`badge ${status.variant} badge-outline`}>{status.label}</span>
|
||||
|
||||
<Menu className="items-stretch">
|
||||
<MenuItem
|
||||
toggle="dropdown"
|
||||
trigger="click"
|
||||
dropdownProps={{
|
||||
placement: isRTL() ? 'bottom-start' : 'bottom-end',
|
||||
modifiers: [
|
||||
{
|
||||
name: 'offset',
|
||||
options: {
|
||||
offset: isRTL() ? [0, -10] : [0, 10] // [skid, distance]
|
||||
}
|
||||
}
|
||||
]
|
||||
}}
|
||||
>
|
||||
<MenuToggle className="btn btn-sm btn-icon btn-light btn-clear">
|
||||
<KeenIcon icon="dots-vertical" />
|
||||
</MenuToggle>
|
||||
{DropdownCard2()}
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center h-[50px] mb-2">
|
||||
{logoDark ? (
|
||||
<>
|
||||
<img
|
||||
src={toAbsoluteUrl(`/media/brand-logos/${logo}`)}
|
||||
className={`dark:hidden size-[${logoSize}] shrink-0`}
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
src={toAbsoluteUrl(`/media/brand-logos/${logoDark}`)}
|
||||
className={`light:hidden size-[${logoSize}] shrink-0`}
|
||||
alt=""
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<img
|
||||
src={toAbsoluteUrl(`/media/brand-logos/${logo}`)}
|
||||
className={`size-[${logoSize}] shrink-0`}
|
||||
alt=""
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="text-center mb-7">
|
||||
<a href={url} className="text-lg font-medium text-gray-900 hover:text-primary">
|
||||
{title}
|
||||
</a>
|
||||
|
||||
<div className="text-sm text-gray-700">{description}</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center flex-wrap gap-2 lg:gap-5">
|
||||
{statistics.map((statistic, index) => {
|
||||
return renderItem(statistic, index);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`progress ${progress?.variant}`}>
|
||||
<div className="progress-bar" style={{ width: `${progress?.value}%` }}></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { CardCampaign, type ICampaignItem, type ICampaignItems, type ICampaignProps };
|
||||
106
src/partials/cards/CardCampaignRow.tsx
Normal file
106
src/partials/cards/CardCampaignRow.tsx
Normal file
@ -0,0 +1,106 @@
|
||||
import { KeenIcon, Menu, MenuItem, MenuToggle } from '@/components';
|
||||
import { toAbsoluteUrl } from '@/utils/Assets';
|
||||
import { useLanguage } from '@/i18n';
|
||||
import { DropdownCard2 } from '../dropdowns/general';
|
||||
import { ICampaignItem, ICampaignProps } from './CardCampaign';
|
||||
|
||||
const CardCampaignRow = ({
|
||||
logo,
|
||||
logoSize,
|
||||
logoDark,
|
||||
title,
|
||||
description,
|
||||
status,
|
||||
statistics,
|
||||
url
|
||||
}: ICampaignProps) => {
|
||||
const { isRTL } = useLanguage();
|
||||
|
||||
const renderItem = (statistic: ICampaignItem, index: number) => {
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="flex flex-col gap-1.5 border border-dashed border-gray-300 rounded-md px-2.5 py-2"
|
||||
>
|
||||
<span className="text-gray-900 text-sm leading-none font-medium">{statistic.total}</span>
|
||||
<span className="text-gray-700 text-xs">{statistic.description}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card p-5 lg:p-7.5">
|
||||
<div className="flex items-center flex-wrap justify-between gap-5">
|
||||
<div className="flex items-center gap-3.5">
|
||||
<div className="flex items-center justify-center w-[50px]">
|
||||
{logoDark ? (
|
||||
<>
|
||||
<img
|
||||
src={toAbsoluteUrl(`/media/brand-logos/${logo}`)}
|
||||
className={`dark:hidden size-[${logoSize}] shrink-0`}
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
src={toAbsoluteUrl(`/media/brand-logos/${logoDark}`)}
|
||||
className={`light:hidden size-[${logoSize}] shrink-0`}
|
||||
alt=""
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<img
|
||||
src={toAbsoluteUrl(`/media/brand-logos/${logo}`)}
|
||||
className={`size-[${logoSize}] shrink-0`}
|
||||
alt=""
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="">
|
||||
<a href={url} className="text-lg font-medium text-gray-900 hover:text-primary">
|
||||
{title}
|
||||
</a>
|
||||
|
||||
<div className="flex items-center text-sm text-gray-700">{description}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center flex-wrap justify-between gap-5 lg:gap-12">
|
||||
<div className="flex items-center flex-wrap gap-2 lg:gap-5">
|
||||
{statistics.map((statistic, index) => {
|
||||
return renderItem(statistic, index);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center w-20">
|
||||
<span className={`badge ${status.variant} badge-outline`}>{status.label}</span>
|
||||
</div>
|
||||
|
||||
<Menu className="items-stretch">
|
||||
<MenuItem
|
||||
toggle="dropdown"
|
||||
trigger="click"
|
||||
dropdownProps={{
|
||||
placement: isRTL() ? 'bottom-start' : 'bottom-end',
|
||||
modifiers: [
|
||||
{
|
||||
name: 'offset',
|
||||
options: {
|
||||
offset: isRTL() ? [0, -10] : [0, 10] // [skid, distance]
|
||||
}
|
||||
}
|
||||
]
|
||||
}}
|
||||
>
|
||||
<MenuToggle className="btn btn-sm btn-icon btn-light btn-clear">
|
||||
<KeenIcon icon="dots-vertical" />
|
||||
</MenuToggle>
|
||||
{DropdownCard2()}
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { CardCampaignRow };
|
||||
134
src/partials/cards/CardConnection.tsx
Normal file
134
src/partials/cards/CardConnection.tsx
Normal file
@ -0,0 +1,134 @@
|
||||
import { KeenIcon } from '@/components';
|
||||
|
||||
import { CommonAvatar, CommonAvatars } from '../common';
|
||||
|
||||
interface IConnectionItem {
|
||||
total: string;
|
||||
description: string;
|
||||
}
|
||||
interface IConnectionItems extends Array<IConnectionItem> {}
|
||||
|
||||
interface IConnectionProps {
|
||||
name: string;
|
||||
info: string;
|
||||
avatar: {
|
||||
className: string;
|
||||
fallback?: string;
|
||||
image?: string;
|
||||
imageClass?: string;
|
||||
badgeClass: string;
|
||||
};
|
||||
email: string;
|
||||
team: {
|
||||
size?: string;
|
||||
group: Array<{ filename?: string; variant?: string; fallback?: string }>;
|
||||
more?: {
|
||||
number: number;
|
||||
variant: string;
|
||||
};
|
||||
};
|
||||
statistics: IConnectionItem[];
|
||||
connected: boolean;
|
||||
}
|
||||
|
||||
const CardConnection = ({
|
||||
name,
|
||||
info,
|
||||
avatar,
|
||||
email,
|
||||
team,
|
||||
statistics,
|
||||
connected
|
||||
}: IConnectionProps) => {
|
||||
const renderItem = (statistic: IConnectionItem, index: number) => {
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="grid grid-cols-1 gap-1.5 border-[0.5px] border-dashed border-gray-400 rounded-md px-2.5 py-2 shrink-0 min-w-24 max-w-auto"
|
||||
>
|
||||
<span className="text-gray-900 text-2sm leading-none font-medium">{statistic.total}</span>
|
||||
<span className="text-gray-700 text-xs">{statistic.description}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card">
|
||||
<div className="card-body lg:pt-9 lg:pb-7.5">
|
||||
<div className="flex justify-center mb-2.5">
|
||||
{avatar && (
|
||||
<CommonAvatar
|
||||
image={avatar.image}
|
||||
fallback={avatar.fallback}
|
||||
badgeClass={avatar.badgeClass}
|
||||
className={avatar.className}
|
||||
imageClass={avatar.imageClass}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center gap-1.5 mb-2.5">
|
||||
<a
|
||||
href="#"
|
||||
className="hover:text-primary-active text-base leading-5 font-medium text-gray-900"
|
||||
>
|
||||
{name}
|
||||
</a>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="15"
|
||||
height="16"
|
||||
viewBox="0 0 15 16"
|
||||
fill="none"
|
||||
className="text-primary"
|
||||
>
|
||||
<path
|
||||
d="M14.5425 6.89749L13.5 5.83999C13.4273 5.76877 13.3699 5.6835 13.3312 5.58937C13.2925 5.49525 13.2734 5.39424 13.275 5.29249V3.79249C13.274 3.58699 13.2324 3.38371 13.1527 3.19432C13.0729 3.00494 12.9565 2.83318 12.8101 2.68892C12.6638 2.54466 12.4904 2.43073 12.2998 2.35369C12.1093 2.27665 11.9055 2.23801 11.7 2.23999H10.2C10.0982 2.24159 9.99722 2.22247 9.9031 2.18378C9.80898 2.1451 9.72371 2.08767 9.65249 2.01499L8.60249 0.957487C8.30998 0.665289 7.91344 0.50116 7.49999 0.50116C7.08654 0.50116 6.68999 0.665289 6.39749 0.957487L5.33999 1.99999C5.26876 2.07267 5.1835 2.1301 5.08937 2.16879C4.99525 2.20747 4.89424 2.22659 4.79249 2.22499H3.29249C3.08699 2.22597 2.88371 2.26754 2.69432 2.34731C2.50494 2.42709 2.33318 2.54349 2.18892 2.68985C2.04466 2.8362 1.93073 3.00961 1.85369 3.20013C1.77665 3.39064 1.73801 3.5945 1.73999 3.79999V5.29999C1.74159 5.40174 1.72247 5.50275 1.68378 5.59687C1.6451 5.691 1.58767 5.77627 1.51499 5.84749L0.457487 6.89749C0.165289 7.19 0.00115967 7.58654 0.00115967 7.99999C0.00115967 8.41344 0.165289 8.80998 0.457487 9.10249L1.49999 10.16C1.57267 10.2312 1.6301 10.3165 1.66878 10.4106C1.70747 10.5047 1.72659 10.6057 1.72499 10.7075V12.2075C1.72597 12.413 1.76754 12.6163 1.84731 12.8056C1.92709 12.995 2.04349 13.1668 2.18985 13.3111C2.3362 13.4553 2.50961 13.5692 2.70013 13.6463C2.89064 13.7233 3.0945 13.762 3.29999 13.76H4.79999C4.90174 13.7584 5.00275 13.7775 5.09687 13.8162C5.191 13.8549 5.27627 13.9123 5.34749 13.985L6.40499 15.0425C6.69749 15.3347 7.09404 15.4988 7.50749 15.4988C7.92094 15.4988 8.31748 15.3347 8.60999 15.0425L9.65999 14C9.73121 13.9273 9.81647 13.8699 9.9106 13.8312C10.0047 13.7925 10.1057 13.7734 10.2075 13.775H11.7075C12.1212 13.775 12.518 13.6106 12.8106 13.3181C13.1031 13.0255 13.2675 12.6287 13.2675 12.215V10.715C13.2659 10.6132 13.285 10.5122 13.3237 10.4181C13.3624 10.324 13.4198 10.2387 13.4925 10.1675L14.55 9.10999C14.6953 8.96452 14.8104 8.79176 14.8887 8.60164C14.9671 8.41152 15.007 8.20779 15.0063 8.00218C15.0056 7.79656 14.9643 7.59311 14.8847 7.40353C14.8051 7.21394 14.6888 7.04197 14.5425 6.89749ZM10.635 6.64999L6.95249 10.25C6.90055 10.3026 6.83864 10.3443 6.77038 10.3726C6.70212 10.4009 6.62889 10.4153 6.55499 10.415C6.48062 10.4139 6.40719 10.3982 6.33896 10.3685C6.27073 10.3389 6.20905 10.2961 6.15749 10.2425L4.37999 8.44249C4.32532 8.39044 4.28169 8.32793 4.25169 8.25867C4.22169 8.18941 4.20593 8.11482 4.20536 8.03934C4.20479 7.96387 4.21941 7.88905 4.24836 7.81934C4.27731 7.74964 4.31999 7.68647 4.37387 7.63361C4.42774 7.58074 4.4917 7.53926 4.56194 7.51163C4.63218 7.484 4.70726 7.47079 4.78271 7.47278C4.85816 7.47478 4.93244 7.49194 5.00112 7.52324C5.0698 7.55454 5.13148 7.59935 5.18249 7.65499L6.56249 9.05749L9.84749 5.84749C9.95296 5.74215 10.0959 5.68298 10.245 5.68298C10.394 5.68298 10.537 5.74215 10.6425 5.84749C10.6953 5.90034 10.737 5.96318 10.7653 6.03234C10.7935 6.1015 10.8077 6.1756 10.807 6.25031C10.8063 6.32502 10.7908 6.39884 10.7612 6.46746C10.7317 6.53608 10.6888 6.59813 10.635 6.64999Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap justify-center items-center gap-4 mb-7">
|
||||
<div className="flex items-center text-sm text-gray-700">
|
||||
<KeenIcon icon="abstract-41" className="me-1 text-gray-500" />
|
||||
{info}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center text-sm">
|
||||
<KeenIcon icon="sms" className="me-1 text-gray-500" />
|
||||
<a href="#" className="text-gray-700 hover:text-primary-active">
|
||||
{email}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid justify-center gap-1.5 mb-7.5">
|
||||
<span className="text-2xs uppercase text-gray-600 text-center">team</span>
|
||||
<CommonAvatars group={team.group} more={team.more} size={team.size} />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center flex-wrap gap-2 lg:gap-5">
|
||||
{statistics.map((statistic, index) => {
|
||||
return renderItem(statistic, index);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card-footer justify-center">
|
||||
{connected ? (
|
||||
<a className="btn btn-light btn-sm">
|
||||
<KeenIcon icon="check-circle" /> Connected
|
||||
</a>
|
||||
) : (
|
||||
<a className="btn btn-sm btn-primary">
|
||||
<KeenIcon icon="users" /> Connect
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { CardConnection, type IConnectionItem, type IConnectionItems, type IConnectionProps };
|
||||
111
src/partials/cards/CardConnectionRow.tsx
Normal file
111
src/partials/cards/CardConnectionRow.tsx
Normal file
@ -0,0 +1,111 @@
|
||||
import { KeenIcon } from '@/components';
|
||||
|
||||
import { CommonAvatar, CommonAvatars } from '../common';
|
||||
import { IConnectionItem, IConnectionProps } from './CardConnection';
|
||||
|
||||
const CardConnectionRow = ({
|
||||
name,
|
||||
info,
|
||||
avatar,
|
||||
email,
|
||||
team,
|
||||
statistics,
|
||||
connected
|
||||
}: IConnectionProps) => {
|
||||
const renderItem = (statistic: IConnectionItem, index: number) => {
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="grid grid-cols-1 gap-1.5 border-[0.5px] border-dashed border-gray-400 shrink-0 rounded-md px-2.5 py-2"
|
||||
>
|
||||
<span className="text-gray-900 text-sm leading-none font-medium">{statistic.total}</span>
|
||||
<span className="text-gray-700 text-xs">{statistic.description}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card p-7.5">
|
||||
<div className="flex items-center flex-wrap justify-between gap-5">
|
||||
<div className="flex items-center gap-3.5">
|
||||
<div className="flex justify-center">
|
||||
{avatar && (
|
||||
<CommonAvatar
|
||||
image={avatar.image}
|
||||
fallback={avatar.fallback}
|
||||
badgeClass={avatar.badgeClass}
|
||||
className={avatar.className}
|
||||
imageClass={avatar.imageClass}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid">
|
||||
<div className="flex items-center gap-1.5 mb-2.5">
|
||||
<a
|
||||
href="#"
|
||||
className="text-base leading-5 font-medium hover:text-primary-active text-gray-900"
|
||||
>
|
||||
{name}
|
||||
</a>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="15"
|
||||
height="16"
|
||||
viewBox="0 0 15 16"
|
||||
fill="none"
|
||||
className="text-primary"
|
||||
>
|
||||
<path
|
||||
d="M14.5425 6.89749L13.5 5.83999C13.4273 5.76877 13.3699 5.6835 13.3312 5.58937C13.2925 5.49525 13.2734 5.39424 13.275 5.29249V3.79249C13.274 3.58699 13.2324 3.38371 13.1527 3.19432C13.0729 3.00494 12.9565 2.83318 12.8101 2.68892C12.6638 2.54466 12.4904 2.43073 12.2998 2.35369C12.1093 2.27665 11.9055 2.23801 11.7 2.23999H10.2C10.0982 2.24159 9.99722 2.22247 9.9031 2.18378C9.80898 2.1451 9.72371 2.08767 9.65249 2.01499L8.60249 0.957487C8.30998 0.665289 7.91344 0.50116 7.49999 0.50116C7.08654 0.50116 6.68999 0.665289 6.39749 0.957487L5.33999 1.99999C5.26876 2.07267 5.1835 2.1301 5.08937 2.16879C4.99525 2.20747 4.89424 2.22659 4.79249 2.22499H3.29249C3.08699 2.22597 2.88371 2.26754 2.69432 2.34731C2.50494 2.42709 2.33318 2.54349 2.18892 2.68985C2.04466 2.8362 1.93073 3.00961 1.85369 3.20013C1.77665 3.39064 1.73801 3.5945 1.73999 3.79999V5.29999C1.74159 5.40174 1.72247 5.50275 1.68378 5.59687C1.6451 5.691 1.58767 5.77627 1.51499 5.84749L0.457487 6.89749C0.165289 7.19 0.00115967 7.58654 0.00115967 7.99999C0.00115967 8.41344 0.165289 8.80998 0.457487 9.10249L1.49999 10.16C1.57267 10.2312 1.6301 10.3165 1.66878 10.4106C1.70747 10.5047 1.72659 10.6057 1.72499 10.7075V12.2075C1.72597 12.413 1.76754 12.6163 1.84731 12.8056C1.92709 12.995 2.04349 13.1668 2.18985 13.3111C2.3362 13.4553 2.50961 13.5692 2.70013 13.6463C2.89064 13.7233 3.0945 13.762 3.29999 13.76H4.79999C4.90174 13.7584 5.00275 13.7775 5.09687 13.8162C5.191 13.8549 5.27627 13.9123 5.34749 13.985L6.40499 15.0425C6.69749 15.3347 7.09404 15.4988 7.50749 15.4988C7.92094 15.4988 8.31748 15.3347 8.60999 15.0425L9.65999 14C9.73121 13.9273 9.81647 13.8699 9.9106 13.8312C10.0047 13.7925 10.1057 13.7734 10.2075 13.775H11.7075C12.1212 13.775 12.518 13.6106 12.8106 13.3181C13.1031 13.0255 13.2675 12.6287 13.2675 12.215V10.715C13.2659 10.6132 13.285 10.5122 13.3237 10.4181C13.3624 10.324 13.4198 10.2387 13.4925 10.1675L14.55 9.10999C14.6953 8.96452 14.8104 8.79176 14.8887 8.60164C14.9671 8.41152 15.007 8.20779 15.0063 8.00218C15.0056 7.79656 14.9643 7.59311 14.8847 7.40353C14.8051 7.21394 14.6888 7.04197 14.5425 6.89749ZM10.635 6.64999L6.95249 10.25C6.90055 10.3026 6.83864 10.3443 6.77038 10.3726C6.70212 10.4009 6.62889 10.4153 6.55499 10.415C6.48062 10.4139 6.40719 10.3982 6.33896 10.3685C6.27073 10.3389 6.20905 10.2961 6.15749 10.2425L4.37999 8.44249C4.32532 8.39044 4.28169 8.32793 4.25169 8.25867C4.22169 8.18941 4.20593 8.11482 4.20536 8.03934C4.20479 7.96387 4.21941 7.88905 4.24836 7.81934C4.27731 7.74964 4.31999 7.68647 4.37387 7.63361C4.42774 7.58074 4.4917 7.53926 4.56194 7.51163C4.63218 7.484 4.70726 7.47079 4.78271 7.47278C4.85816 7.47478 4.93244 7.49194 5.00112 7.52324C5.0698 7.55454 5.13148 7.59935 5.18249 7.65499L6.56249 9.05749L9.84749 5.84749C9.95296 5.74215 10.0959 5.68298 10.245 5.68298C10.394 5.68298 10.537 5.74215 10.6425 5.84749C10.6953 5.90034 10.737 5.96318 10.7653 6.03234C10.7935 6.1015 10.8077 6.1756 10.807 6.25031C10.8063 6.32502 10.7908 6.39884 10.7612 6.46746C10.7317 6.53608 10.6888 6.59813 10.635 6.64999Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center flex-wrap gap-x-4">
|
||||
<div className="flex items-center text-sm text-gray-700">
|
||||
<KeenIcon icon="abstract-41" className="me-1 text-gray-500" />
|
||||
{info}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center text-sm">
|
||||
<KeenIcon icon="sms" className="me-1 text-gray-500" />
|
||||
<a href="#" className="text-gray-700 hover:text-primary-active">
|
||||
{email}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center flex-wrap gap-5 lg:gap-11">
|
||||
<div className="flex items-center flex-wrap gap-2 lg:gap-5">
|
||||
{statistics.map((statistic, index) => {
|
||||
return renderItem(statistic, index);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="">
|
||||
<CommonAvatars group={team.group} more={team.more} size={team.size} />
|
||||
</div>
|
||||
|
||||
<div className="text-end w-28">
|
||||
{connected ? (
|
||||
<a className="btn btn-light btn-sm">
|
||||
<KeenIcon icon="check-circle" /> Connected
|
||||
</a>
|
||||
) : (
|
||||
<a className="btn btn-sm btn-primary">
|
||||
<KeenIcon icon="users" /> Connect
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { CardConnectionRow };
|
||||
54
src/partials/cards/CardIntegration.tsx
Normal file
54
src/partials/cards/CardIntegration.tsx
Normal file
@ -0,0 +1,54 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { KeenIcon } from '@/components';
|
||||
import { toAbsoluteUrl } from '@/utils/Assets';
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
interface IIntegrationProps {
|
||||
logo: string;
|
||||
path: string;
|
||||
name: string;
|
||||
description: string;
|
||||
actions: ReactNode;
|
||||
}
|
||||
|
||||
const CardIntegration = ({ logo, path, name, description, actions }: IIntegrationProps) => {
|
||||
return (
|
||||
<div className="card">
|
||||
<div className="card-body p-5 lg:p-7.5">
|
||||
<div className="flex items-center justify-between mb-3 lg:mb-5">
|
||||
<div className="flex items-center justify-center">
|
||||
<img
|
||||
src={toAbsoluteUrl(`/media/brand-logos/${logo}`)}
|
||||
className="h-11 shrink-0"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div className="btn btn-sm btn-icon btn-clear btn-light">
|
||||
<KeenIcon icon="exit-right-corner" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1 lg:gap-2.5">
|
||||
<Link
|
||||
to={`${path}`}
|
||||
className="text-base font-medium text-gray-900 hover:text-primary-active"
|
||||
>
|
||||
{name}
|
||||
</Link>
|
||||
<span className="text-2sm text-gray-700">{description}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card-footer justify-between items-center py-3.5">
|
||||
<a className="btn btn-light btn-sm">
|
||||
<KeenIcon icon="mouse-square" />
|
||||
Connect
|
||||
</a>
|
||||
<div className="flex items-center gap-2.5">{actions}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { CardIntegration, type IIntegrationProps };
|
||||
27
src/partials/cards/CardLocation.tsx
Normal file
27
src/partials/cards/CardLocation.tsx
Normal file
@ -0,0 +1,27 @@
|
||||
import { toAbsoluteUrl } from '@/utils/Assets';
|
||||
|
||||
interface ILocationProps {
|
||||
image: string;
|
||||
title: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
const CardLocation = ({ image, title, description }: ILocationProps) => {
|
||||
return (
|
||||
<div className="card shadow-none w-[280px] border-0 mb-4">
|
||||
<img
|
||||
src={toAbsoluteUrl(`/media/images/600x400/${image}`)}
|
||||
className="rounded-t-xl max-w-[280px] shrink-0"
|
||||
alt=""
|
||||
/>
|
||||
<div className="card-border card-rounded-b px-3.5 h-full pt-3 pb-3.5">
|
||||
<a href="#" className="font-medium block text-gray-900 hover:text-primary text-md mb-2">
|
||||
{title}
|
||||
</a>
|
||||
<p className="text-2sm text-gray-700">{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { CardLocation, type ILocationProps };
|
||||
56
src/partials/cards/CardNFT.tsx
Normal file
56
src/partials/cards/CardNFT.tsx
Normal file
@ -0,0 +1,56 @@
|
||||
import { KeenIcon } from '@/components';
|
||||
import { toAbsoluteUrl } from '@/utils/Assets';
|
||||
|
||||
interface INFTProps {
|
||||
image: string;
|
||||
title: string;
|
||||
id: number;
|
||||
info: string;
|
||||
date: string;
|
||||
}
|
||||
|
||||
const CardNFT = ({ image, id, title, info, date }: INFTProps) => {
|
||||
return (
|
||||
<div className="card shadow-none border-0 mb-5">
|
||||
<div
|
||||
className="rounded-t-xl w-[280px] h-[240px] bg-cover bg-center"
|
||||
style={{ backgroundImage: `url(${toAbsoluteUrl(`/media/images/600x600/${image}`)})` }}
|
||||
></div>
|
||||
|
||||
<div className="card-border card-rounded-b px-3.5 pt-5 pb-3.5">
|
||||
<div className="pb-6">
|
||||
<a
|
||||
href="#"
|
||||
className="block font-medium text-gray-900 hover:text-primary text-md leading-4 mb-2"
|
||||
>
|
||||
{title}
|
||||
</a>
|
||||
<div className="text-2sm text-gray-700">
|
||||
Token ID:
|
||||
<span className="text-2sm font-medium text-gray-800"> {id}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 items-center">
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-2sm text-gray-700">Current bid</span>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<KeenIcon icon="xmr" className="text-lg text-brand leading-none" />
|
||||
<span className="text-sm font-semibold text-gray-900 leading-none tracking-tight">
|
||||
{info}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col justify-self-end text-end gap-2">
|
||||
<span className="text-2sm text-gray-700">Ending in</span>
|
||||
<span className="text-2sm font-semibold text-gray-900 leading-none tracking-tight">
|
||||
{date}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { CardNFT, type INFTProps };
|
||||
132
src/partials/cards/CardNFT2.tsx
Normal file
132
src/partials/cards/CardNFT2.tsx
Normal file
@ -0,0 +1,132 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useLanguage } from '@/i18n';
|
||||
import { KeenIcon, Menu, MenuItem, MenuToggle } from '@/components';
|
||||
import { toAbsoluteUrl } from '@/utils/Assets';
|
||||
|
||||
import { DropdownCardItem1 } from '../dropdowns/general';
|
||||
import { CommonAvatar } from '../common';
|
||||
import { IAvatar } from './CardAuthor';
|
||||
|
||||
interface INFT2Item {
|
||||
total: string;
|
||||
description: string;
|
||||
}
|
||||
interface INFT2Items extends Array<INFT2Item> {}
|
||||
|
||||
interface INFT2Props {
|
||||
avatar?: IAvatar;
|
||||
bgImage: string;
|
||||
name: string;
|
||||
email: string;
|
||||
info: string;
|
||||
statistics: INFT2Item[];
|
||||
}
|
||||
|
||||
const CardNFT2 = ({ avatar, bgImage, name, email, info, statistics }: INFT2Props) => {
|
||||
const { isRTL } = useLanguage();
|
||||
|
||||
const renderItem = (statistic: INFT2Item, index: number) => {
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="grid grid-cols-1 gap-1.5 border-[0.5px] border-dashed border-gray-400 rounded-md px-2.5 py-2 shrink-0 max-w-auto"
|
||||
>
|
||||
<span className="text-gray-900 text-sm leading-none font-medium">{statistic.total}</span>
|
||||
<span className="text-gray-700 text-xs">{statistic.description}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card">
|
||||
<div
|
||||
className="card-header card-rounded-t flex justify-end items-start relative p-0 bg-no-repeat bg-cover bg-center h-[120px]"
|
||||
style={{ backgroundImage: `url(${toAbsoluteUrl(`/media/images/2600x1200/${bgImage}`)})` }}
|
||||
>
|
||||
<div className="menu mt-2.5 me-2.5" data-menu="true">
|
||||
<Menu className="items-stretch">
|
||||
<MenuItem
|
||||
toggle="dropdown"
|
||||
trigger="click"
|
||||
dropdownProps={{
|
||||
placement: isRTL() ? 'bottom-start' : 'bottom-end',
|
||||
modifiers: [
|
||||
{
|
||||
name: 'offset',
|
||||
options: {
|
||||
offset: isRTL() ? [0, -10] : [0, 10] // [skid, distance]
|
||||
}
|
||||
}
|
||||
]
|
||||
}}
|
||||
>
|
||||
<MenuToggle className="btn btn-sm btn-icon btn-light btn-clear">
|
||||
<KeenIcon icon="setting-2" />
|
||||
</MenuToggle>
|
||||
{DropdownCardItem1()}
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card-body pt-0">
|
||||
<div className="flex justify-center transform -translate-y-1/2">
|
||||
<CommonAvatar
|
||||
className={avatar?.className}
|
||||
fallback={avatar?.fallback}
|
||||
image={avatar?.image}
|
||||
imageClass={avatar?.imageClass}
|
||||
badgeClass={avatar?.badgeClass}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center gap-1.5 mb-px -mt-7.5">
|
||||
<a
|
||||
href="#"
|
||||
className="hover:text-primary-active text-base leading-5 font-medium text-gray-900"
|
||||
>
|
||||
{name}
|
||||
</a>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="15"
|
||||
height="16"
|
||||
viewBox="0 0 15 16"
|
||||
fill="none"
|
||||
className="text-primary"
|
||||
>
|
||||
<path
|
||||
d="M14.5425 6.89749L13.5 5.83999C13.4273 5.76877 13.3699 5.6835 13.3312 5.58937C13.2925 5.49525 13.2734 5.39424 13.275 5.29249V3.79249C13.274 3.58699 13.2324 3.38371 13.1527 3.19432C13.0729 3.00494 12.9565 2.83318 12.8101 2.68892C12.6638 2.54466 12.4904 2.43073 12.2998 2.35369C12.1093 2.27665 11.9055 2.23801 11.7 2.23999H10.2C10.0982 2.24159 9.99722 2.22247 9.9031 2.18378C9.80898 2.1451 9.72371 2.08767 9.65249 2.01499L8.60249 0.957487C8.30998 0.665289 7.91344 0.50116 7.49999 0.50116C7.08654 0.50116 6.68999 0.665289 6.39749 0.957487L5.33999 1.99999C5.26876 2.07267 5.1835 2.1301 5.08937 2.16879C4.99525 2.20747 4.89424 2.22659 4.79249 2.22499H3.29249C3.08699 2.22597 2.88371 2.26754 2.69432 2.34731C2.50494 2.42709 2.33318 2.54349 2.18892 2.68985C2.04466 2.8362 1.93073 3.00961 1.85369 3.20013C1.77665 3.39064 1.73801 3.5945 1.73999 3.79999V5.29999C1.74159 5.40174 1.72247 5.50275 1.68378 5.59687C1.6451 5.691 1.58767 5.77627 1.51499 5.84749L0.457487 6.89749C0.165289 7.19 0.00115967 7.58654 0.00115967 7.99999C0.00115967 8.41344 0.165289 8.80998 0.457487 9.10249L1.49999 10.16C1.57267 10.2312 1.6301 10.3165 1.66878 10.4106C1.70747 10.5047 1.72659 10.6057 1.72499 10.7075V12.2075C1.72597 12.413 1.76754 12.6163 1.84731 12.8056C1.92709 12.995 2.04349 13.1668 2.18985 13.3111C2.3362 13.4553 2.50961 13.5692 2.70013 13.6463C2.89064 13.7233 3.0945 13.762 3.29999 13.76H4.79999C4.90174 13.7584 5.00275 13.7775 5.09687 13.8162C5.191 13.8549 5.27627 13.9123 5.34749 13.985L6.40499 15.0425C6.69749 15.3347 7.09404 15.4988 7.50749 15.4988C7.92094 15.4988 8.31748 15.3347 8.60999 15.0425L9.65999 14C9.73121 13.9273 9.81647 13.8699 9.9106 13.8312C10.0047 13.7925 10.1057 13.7734 10.2075 13.775H11.7075C12.1212 13.775 12.518 13.6106 12.8106 13.3181C13.1031 13.0255 13.2675 12.6287 13.2675 12.215V10.715C13.2659 10.6132 13.285 10.5122 13.3237 10.4181C13.3624 10.324 13.4198 10.2387 13.4925 10.1675L14.55 9.10999C14.6953 8.96452 14.8104 8.79176 14.8887 8.60164C14.9671 8.41152 15.007 8.20779 15.0063 8.00218C15.0056 7.79656 14.9643 7.59311 14.8847 7.40353C14.8051 7.21394 14.6888 7.04197 14.5425 6.89749ZM10.635 6.64999L6.95249 10.25C6.90055 10.3026 6.83864 10.3443 6.77038 10.3726C6.70212 10.4009 6.62889 10.4153 6.55499 10.415C6.48062 10.4139 6.40719 10.3982 6.33896 10.3685C6.27073 10.3389 6.20905 10.2961 6.15749 10.2425L4.37999 8.44249C4.32532 8.39044 4.28169 8.32793 4.25169 8.25867C4.22169 8.18941 4.20593 8.11482 4.20536 8.03934C4.20479 7.96387 4.21941 7.88905 4.24836 7.81934C4.27731 7.74964 4.31999 7.68647 4.37387 7.63361C4.42774 7.58074 4.4917 7.53926 4.56194 7.51163C4.63218 7.484 4.70726 7.47079 4.78271 7.47278C4.85816 7.47478 4.93244 7.49194 5.00112 7.52324C5.0698 7.55454 5.13148 7.59935 5.18249 7.65499L6.56249 9.05749L9.84749 5.84749C9.95296 5.74215 10.0959 5.68298 10.245 5.68298C10.394 5.68298 10.537 5.74215 10.6425 5.84749C10.6953 5.90034 10.737 5.96318 10.7653 6.03234C10.7935 6.1015 10.8077 6.1756 10.807 6.25031C10.8063 6.32502 10.7908 6.39884 10.7612 6.46746C10.7317 6.53608 10.6888 6.59813 10.635 6.64999Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap justify-center items-center gap-3.5 mb-7">
|
||||
<a href="#" className="text-xs text-gray-700 hover:text-primary-active">
|
||||
{email}
|
||||
</a>
|
||||
<div className="flex items-center text-xs font-medium text-success">
|
||||
{info}
|
||||
<KeenIcon icon="copy" className="ms-1 text-gray-400 text-md" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center flex-wrap gap-2 lg:gap-5 mb-3">
|
||||
{statistics.map((statistic, index) => {
|
||||
return renderItem(statistic, index);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card-footer justify-center">
|
||||
<Link to="/public-profile/profiles/nft" className="btn btn-link">
|
||||
View NFT’s
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { CardNFT2, type INFT2Item, type INFT2Items, type INFT2Props };
|
||||
87
src/partials/cards/CardNFT2Row.tsx
Normal file
87
src/partials/cards/CardNFT2Row.tsx
Normal file
@ -0,0 +1,87 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { KeenIcon } from '@/components';
|
||||
|
||||
import { CommonAvatar } from '../common';
|
||||
import { INFT2Item, INFT2Props } from './CardNFT2';
|
||||
|
||||
const CardNFT2Row = ({ avatar, name, email, info, statistics }: INFT2Props) => {
|
||||
const renderItem = (statistic: INFT2Item, index: number) => {
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="grid grid-cols-1 gap-1.5 border border-dashed border-gray-300 shrink-0 rounded-md min-w-24 max-w-auto px-2.5 py-2"
|
||||
>
|
||||
<span className="text-gray-900 text-sm leading-none font-medium">{statistic.total}</span>
|
||||
<span className="text-gray-700 text-2=xs">{statistic.description}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card p-7.5">
|
||||
<div className="flex items-center flex-wrap justify-between gap-5">
|
||||
<div className="flex items-center gap-3.5">
|
||||
<CommonAvatar
|
||||
className={avatar?.className}
|
||||
fallback={avatar?.fallback}
|
||||
image={avatar?.image}
|
||||
imageClass={avatar?.imageClass}
|
||||
badgeClass={avatar?.badgeClass}
|
||||
/>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center gap-1.5 mb-px">
|
||||
<a
|
||||
href="#"
|
||||
className="hover:text-primary-active text-base leading-5 font-medium text-gray-900"
|
||||
>
|
||||
{name}
|
||||
</a>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="15"
|
||||
height="16"
|
||||
viewBox="0 0 15 16"
|
||||
fill="none"
|
||||
className="text-primary"
|
||||
>
|
||||
<path
|
||||
d="M14.5425 6.89749L13.5 5.83999C13.4273 5.76877 13.3699 5.6835 13.3312 5.58937C13.2925 5.49525 13.2734 5.39424 13.275 5.29249V3.79249C13.274 3.58699 13.2324 3.38371 13.1527 3.19432C13.0729 3.00494 12.9565 2.83318 12.8101 2.68892C12.6638 2.54466 12.4904 2.43073 12.2998 2.35369C12.1093 2.27665 11.9055 2.23801 11.7 2.23999H10.2C10.0982 2.24159 9.99722 2.22247 9.9031 2.18378C9.80898 2.1451 9.72371 2.08767 9.65249 2.01499L8.60249 0.957487C8.30998 0.665289 7.91344 0.50116 7.49999 0.50116C7.08654 0.50116 6.68999 0.665289 6.39749 0.957487L5.33999 1.99999C5.26876 2.07267 5.1835 2.1301 5.08937 2.16879C4.99525 2.20747 4.89424 2.22659 4.79249 2.22499H3.29249C3.08699 2.22597 2.88371 2.26754 2.69432 2.34731C2.50494 2.42709 2.33318 2.54349 2.18892 2.68985C2.04466 2.8362 1.93073 3.00961 1.85369 3.20013C1.77665 3.39064 1.73801 3.5945 1.73999 3.79999V5.29999C1.74159 5.40174 1.72247 5.50275 1.68378 5.59687C1.6451 5.691 1.58767 5.77627 1.51499 5.84749L0.457487 6.89749C0.165289 7.19 0.00115967 7.58654 0.00115967 7.99999C0.00115967 8.41344 0.165289 8.80998 0.457487 9.10249L1.49999 10.16C1.57267 10.2312 1.6301 10.3165 1.66878 10.4106C1.70747 10.5047 1.72659 10.6057 1.72499 10.7075V12.2075C1.72597 12.413 1.76754 12.6163 1.84731 12.8056C1.92709 12.995 2.04349 13.1668 2.18985 13.3111C2.3362 13.4553 2.50961 13.5692 2.70013 13.6463C2.89064 13.7233 3.0945 13.762 3.29999 13.76H4.79999C4.90174 13.7584 5.00275 13.7775 5.09687 13.8162C5.191 13.8549 5.27627 13.9123 5.34749 13.985L6.40499 15.0425C6.69749 15.3347 7.09404 15.4988 7.50749 15.4988C7.92094 15.4988 8.31748 15.3347 8.60999 15.0425L9.65999 14C9.73121 13.9273 9.81647 13.8699 9.9106 13.8312C10.0047 13.7925 10.1057 13.7734 10.2075 13.775H11.7075C12.1212 13.775 12.518 13.6106 12.8106 13.3181C13.1031 13.0255 13.2675 12.6287 13.2675 12.215V10.715C13.2659 10.6132 13.285 10.5122 13.3237 10.4181C13.3624 10.324 13.4198 10.2387 13.4925 10.1675L14.55 9.10999C14.6953 8.96452 14.8104 8.79176 14.8887 8.60164C14.9671 8.41152 15.007 8.20779 15.0063 8.00218C15.0056 7.79656 14.9643 7.59311 14.8847 7.40353C14.8051 7.21394 14.6888 7.04197 14.5425 6.89749ZM10.635 6.64999L6.95249 10.25C6.90055 10.3026 6.83864 10.3443 6.77038 10.3726C6.70212 10.4009 6.62889 10.4153 6.55499 10.415C6.48062 10.4139 6.40719 10.3982 6.33896 10.3685C6.27073 10.3389 6.20905 10.2961 6.15749 10.2425L4.37999 8.44249C4.32532 8.39044 4.28169 8.32793 4.25169 8.25867C4.22169 8.18941 4.20593 8.11482 4.20536 8.03934C4.20479 7.96387 4.21941 7.88905 4.24836 7.81934C4.27731 7.74964 4.31999 7.68647 4.37387 7.63361C4.42774 7.58074 4.4917 7.53926 4.56194 7.51163C4.63218 7.484 4.70726 7.47079 4.78271 7.47278C4.85816 7.47478 4.93244 7.49194 5.00112 7.52324C5.0698 7.55454 5.13148 7.59935 5.18249 7.65499L6.56249 9.05749L9.84749 5.84749C9.95296 5.74215 10.0959 5.68298 10.245 5.68298C10.394 5.68298 10.537 5.74215 10.6425 5.84749C10.6953 5.90034 10.737 5.96318 10.7653 6.03234C10.7935 6.1015 10.8077 6.1756 10.807 6.25031C10.8063 6.32502 10.7908 6.39884 10.7612 6.46746C10.7317 6.53608 10.6888 6.59813 10.635 6.64999Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3.5">
|
||||
<a href="#" className="text-sm text-gray-700 hover:text-primary-active">
|
||||
{email}
|
||||
</a>
|
||||
<div className="flex items-center text-sm text-success">
|
||||
{info}
|
||||
<KeenIcon icon="copy" className="ms-1 text-gray-500 text-md" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center flex-wrap gap-5 lg:gap-12">
|
||||
<div className="flex items-center flex-wrap gap-2 lg:gap-5">
|
||||
{statistics.map((statistic, index) => {
|
||||
return renderItem(statistic, index);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<Link to="/public-profile/profiles/nft" className="btn btn-link">
|
||||
View NFT’s
|
||||
</Link>
|
||||
|
||||
<KeenIcon icon="setting-2" className="text-gray-600 text-lg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { CardNFT2Row };
|
||||
46
src/partials/cards/CardNotification.tsx
Normal file
46
src/partials/cards/CardNotification.tsx
Normal file
@ -0,0 +1,46 @@
|
||||
import { KeenIcon } from '@/components';
|
||||
|
||||
import { CommonHexagonBadge } from '../common';
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
interface INotificationProps {
|
||||
icon: string;
|
||||
title: string;
|
||||
description: string;
|
||||
button?: boolean;
|
||||
actions: ReactNode;
|
||||
}
|
||||
|
||||
const CardNotification = ({ icon, title, description, button, actions }: INotificationProps) => {
|
||||
return (
|
||||
<div className="card-group flex items-center justify-between py-4 gap-2.5">
|
||||
<div className="flex items-center gap-3.5">
|
||||
<CommonHexagonBadge
|
||||
size="size-[50px]"
|
||||
badge={<KeenIcon icon={icon} className="text-1.5xl text-gray-500" />}
|
||||
stroke="stroke-gray-300"
|
||||
fill="fill-gray-100"
|
||||
/>
|
||||
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="flex items-center gap-1.5 leading-none font-medium text-sm text-gray-900">
|
||||
{title}
|
||||
</span>
|
||||
<span className="text-2sm text-gray-700">{description}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-5">
|
||||
{button && (
|
||||
<a href="#" className="btn btn-xs btn-icon btn-primary btn-clear">
|
||||
<KeenIcon icon="notepad-edit" />
|
||||
</a>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-2.5">{actions}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { CardNotification, type INotificationProps };
|
||||
91
src/partials/cards/CardNowPlaying.tsx
Normal file
91
src/partials/cards/CardNowPlaying.tsx
Normal file
@ -0,0 +1,91 @@
|
||||
import { CommonAvatars } from '@/partials/common';
|
||||
import { toAbsoluteUrl } from '@/utils/Assets';
|
||||
|
||||
interface INowPlayingItem {
|
||||
number: string;
|
||||
description: string;
|
||||
}
|
||||
interface INowPlayingItems extends Array<INowPlayingItem> {}
|
||||
|
||||
interface INowPlayingProps {
|
||||
image: string;
|
||||
logo: string;
|
||||
title: string;
|
||||
date: string;
|
||||
statistics: INowPlayingItem[];
|
||||
label: number;
|
||||
team: {
|
||||
group: Array<{ filename: string }>;
|
||||
more?: {
|
||||
number: number;
|
||||
variant: string;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
const CardNowPlaying = ({
|
||||
image,
|
||||
logo,
|
||||
title,
|
||||
date,
|
||||
statistics,
|
||||
team,
|
||||
label
|
||||
}: INowPlayingProps) => {
|
||||
const renderItem = (statistic: INowPlayingItem, index: number) => {
|
||||
return (
|
||||
<div key={index} className="grid grid-cols-1 gap-1.5 text-center">
|
||||
<span className="text-gray-900 text-2sm leading-none font-semibold">
|
||||
{statistic.number}%
|
||||
</span>
|
||||
<span className="text-gray-600 text-2xs font-medium">{statistic.description}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card shadow-none w-[280px] border-0">
|
||||
<img
|
||||
src={toAbsoluteUrl(`/media/images/600x600/${image}`)}
|
||||
className="rounded-t-xl max-w-[280px] shrink-0"
|
||||
alt=""
|
||||
/>
|
||||
|
||||
<div className="card-border card-rounded-b grid gap-6 px-5 py-3.5 mb-4.5">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<img
|
||||
src={toAbsoluteUrl(`/media/images/600x600/${logo}`)}
|
||||
className="rounded-full size-10"
|
||||
alt=""
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-1 gap-0.5">
|
||||
<a
|
||||
href="#"
|
||||
className="text-gray-900 hover:text-primary-active text-md font-semibold mb-px"
|
||||
>
|
||||
{title}
|
||||
</a>
|
||||
|
||||
<span className="flex items-center gap-1.5 text-3xs font-medium text-gray-500">
|
||||
{date}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{statistics.map((statistic, index) => {
|
||||
return renderItem(statistic, index);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center place-content-between gap-2">
|
||||
<CommonAvatars group={team.group} more={team.more} />
|
||||
<span className="badge badge-xs badge-warning badge-outline">Rank {label}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { CardNowPlaying, type INowPlayingItem, type INowPlayingItems, type INowPlayingProps };
|
||||
38
src/partials/cards/CardPost.tsx
Normal file
38
src/partials/cards/CardPost.tsx
Normal file
@ -0,0 +1,38 @@
|
||||
import { KeenIcon } from '@/components';
|
||||
import { toAbsoluteUrl } from '@/utils/Assets';
|
||||
|
||||
interface IPostProps {
|
||||
image: string;
|
||||
label: string;
|
||||
description: string;
|
||||
time: string;
|
||||
}
|
||||
|
||||
const CardPost = ({ image, label, description, time }: IPostProps) => {
|
||||
return (
|
||||
<div className="card shadow-none w-[280px] border-0 mb-4">
|
||||
<div
|
||||
className="rounded-t-xl w-[280px] h-[240px] bg-cover bg-center"
|
||||
style={{ backgroundImage: `url(${toAbsoluteUrl(`/media/images/600x400/${image}`)})` }}
|
||||
></div>
|
||||
|
||||
<div className="card-border card-rounded-b grid gap-1.5 px-5 py-4">
|
||||
<a href="#" className="font-medium text-brand text-2sm hover:text-primary">
|
||||
{label}
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="font-medium text-gray-900 text-lg leading-6 mb-1.5 hover:text-primary"
|
||||
>
|
||||
{description}
|
||||
</a>
|
||||
<time className="flex items-center gap-1.5 text-2sm font-medium text-gray-600 leading-none">
|
||||
<KeenIcon icon="time" className="text-lg text-gray-500" />
|
||||
{time}
|
||||
</time>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { CardPost, type IPostProps };
|
||||
78
src/partials/cards/CardProject.tsx
Normal file
78
src/partials/cards/CardProject.tsx
Normal file
@ -0,0 +1,78 @@
|
||||
import { toAbsoluteUrl } from '@/utils/Assets';
|
||||
|
||||
import { CommonAvatars } from '../common';
|
||||
|
||||
interface IProjectProps {
|
||||
logo: string;
|
||||
name: string;
|
||||
description: string;
|
||||
startDate?: string;
|
||||
endDate?: string;
|
||||
status: {
|
||||
variant: string;
|
||||
label: string;
|
||||
};
|
||||
progress: {
|
||||
variant: string;
|
||||
value: number;
|
||||
};
|
||||
team: {
|
||||
size?: string;
|
||||
group: Array<{ filename?: string; variant?: string; fallback?: string }>;
|
||||
more?: {
|
||||
variant?: string;
|
||||
number?: number;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
const CardProject = ({
|
||||
logo,
|
||||
name,
|
||||
description,
|
||||
startDate,
|
||||
endDate,
|
||||
status,
|
||||
progress,
|
||||
team
|
||||
}: IProjectProps) => {
|
||||
return (
|
||||
<div className="card p-7.5">
|
||||
<div className="flex items-center justify-between mb-3 lg:mb-6">
|
||||
<div className="flex items-center justify-center size-[50px] rounded-lg bg-gray-100">
|
||||
<img src={toAbsoluteUrl(`/media/brand-logos/${logo}`)} className="" alt="" />
|
||||
</div>
|
||||
<span className={`badge badge-md ${status.variant} badge-outline`}>{status.label}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col mb-3 lg:mb-6">
|
||||
<a
|
||||
href="#"
|
||||
className="text-lg font-media/brand text-gray-900 hover:text-primary-active mb-px"
|
||||
>
|
||||
{name}
|
||||
</a>
|
||||
<span className="text-sm text-gray-700">{description}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-5 mb-3.5 lg:mb-7">
|
||||
<span className="text-sm text-gray-600">
|
||||
Start:
|
||||
<span className="text-sm font-medium text-gray-800">{startDate}</span>
|
||||
</span>
|
||||
<span className="text-sm text-gray-600">
|
||||
End:
|
||||
<span className="text-sm font-medium text-gray-800">{endDate}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className={`progress h-1.5 ${progress.variant} mb-4 lg:mb-8`}>
|
||||
<div className="progress-bar" style={{ width: `${progress.value}%` }}></div>
|
||||
</div>
|
||||
|
||||
<CommonAvatars group={team.group} size={team.size} more={team.more} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { CardProject, type IProjectProps };
|
||||
127
src/partials/cards/CardProjectExtended.tsx
Normal file
127
src/partials/cards/CardProjectExtended.tsx
Normal file
@ -0,0 +1,127 @@
|
||||
import { KeenIcon, Menu, MenuItem, MenuToggle } from '@/components';
|
||||
import { toAbsoluteUrl } from '@/utils/Assets';
|
||||
import { useLanguage } from '@/i18n';
|
||||
import { DropdownCard2 } from '../dropdowns/general';
|
||||
import { CommonAvatars } from '../common';
|
||||
|
||||
interface IProjectExtendedItem {
|
||||
total: string;
|
||||
description: string;
|
||||
}
|
||||
interface IProjectExtendedItems extends Array<IProjectExtendedItem> {}
|
||||
|
||||
interface IProjectExtendedProps {
|
||||
status: {
|
||||
variant: string;
|
||||
label: string;
|
||||
};
|
||||
logo: string;
|
||||
title: string;
|
||||
description: string;
|
||||
team: {
|
||||
size?: string;
|
||||
group: Array<{ filename?: string; variant?: string; fallback?: string }>;
|
||||
};
|
||||
statistics: IProjectExtendedItem[];
|
||||
progress?: {
|
||||
variant: string;
|
||||
value: number;
|
||||
};
|
||||
url: string;
|
||||
}
|
||||
|
||||
const CardProjectExtended = ({
|
||||
status,
|
||||
logo,
|
||||
title,
|
||||
description,
|
||||
team,
|
||||
statistics,
|
||||
progress,
|
||||
url
|
||||
}: IProjectExtendedProps) => {
|
||||
const { isRTL } = useLanguage();
|
||||
|
||||
const renderItem = (statistic: IProjectExtendedItem, index: number) => {
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="grid grid-cols-1 content-between gap-1.5 border border-dashed border-gray-300 shrink-0 rounded-md px-2.5 py-2 min-w-24 max-w-auto"
|
||||
>
|
||||
<span className="text-gray-900 text-sm leading-none font-medium">{statistic.total}</span>
|
||||
<span className="text-gray-700 text-xs">{statistic.description}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card overflow-hidden grow justify-between">
|
||||
<div className="p-5 mb-5">
|
||||
<div className="flex items-center justify-between mb-5">
|
||||
<span className={`badge ${status.variant} badge-outline`}>{status.label}</span>
|
||||
|
||||
<Menu className="items-stretch">
|
||||
<MenuItem
|
||||
toggle="dropdown"
|
||||
trigger="click"
|
||||
dropdownProps={{
|
||||
placement: isRTL() ? 'bottom-start' : 'bottom-end',
|
||||
modifiers: [
|
||||
{
|
||||
name: 'offset',
|
||||
options: {
|
||||
offset: isRTL() ? [0, -10] : [0, 10] // [skid, distance]
|
||||
}
|
||||
}
|
||||
]
|
||||
}}
|
||||
>
|
||||
<MenuToggle className="btn btn-sm btn-icon btn-light btn-clear">
|
||||
<KeenIcon icon="dots-vertical" />
|
||||
</MenuToggle>
|
||||
{DropdownCard2()}
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center mb-2">
|
||||
<img
|
||||
src={toAbsoluteUrl(`/media/brand-logos/${logo}`)}
|
||||
className="min-w-12 shrink-0"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="text-center mb-7">
|
||||
<a href={url} className="text-lg font-medium text-gray-900 hover:text-primary">
|
||||
{title}
|
||||
</a>
|
||||
|
||||
<div className="text-sm text-gray-700">{description}</div>
|
||||
</div>
|
||||
|
||||
<div className="grid justify-center gap-1.5 mb-7.5">
|
||||
<span className="text-2xs uppercase text-gray-600 text-center">team</span>
|
||||
<CommonAvatars group={team.group} size={team.size} />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center flex-wrap gap-2 lg:gap-5">
|
||||
{statistics.map((statistic, index) => {
|
||||
return renderItem(statistic, index);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`progress ${progress?.variant}`}>
|
||||
<div className="progress-bar" style={{ width: `${progress?.value}%` }}></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export {
|
||||
CardProjectExtended,
|
||||
type IProjectExtendedItem,
|
||||
type IProjectExtendedItems,
|
||||
type IProjectExtendedProps
|
||||
};
|
||||
102
src/partials/cards/CardProjectExtendedRow.tsx
Normal file
102
src/partials/cards/CardProjectExtendedRow.tsx
Normal file
@ -0,0 +1,102 @@
|
||||
import { KeenIcon, Menu, MenuItem, MenuToggle } from '@/components';
|
||||
import { toAbsoluteUrl } from '@/utils/Assets';
|
||||
import { useLanguage } from '@/i18n';
|
||||
import { DropdownCard2 } from '../dropdowns/general';
|
||||
import { CommonAvatars } from '../common';
|
||||
|
||||
import { IProjectExtendedItem, IProjectExtendedProps } from './CardProjectExtended';
|
||||
|
||||
const CardProjectExtendedRow = ({
|
||||
status,
|
||||
logo,
|
||||
title,
|
||||
description,
|
||||
team,
|
||||
statistics,
|
||||
url
|
||||
}: IProjectExtendedProps) => {
|
||||
const { isRTL } = useLanguage();
|
||||
|
||||
const renderItem = (statistic: IProjectExtendedItem, index: number) => {
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="grid grid-cols-1 content-between gap-1.5 border border-dashed border-gray-300 shrink-0 rounded-md px-2.5 py-2 min-w-24 max-w-auto"
|
||||
>
|
||||
<span className="text-gray-900 text-2sm leading-none font-semibold">{statistic.total}</span>
|
||||
<span className="text-gray-600 text-xs font-medium">{statistic.description}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card p-7.5">
|
||||
<div className="flex items-center flex-wrap justify-between gap-5">
|
||||
<div className="flex items-center gap-3.5">
|
||||
<div className="flex items-center justify-center min-w-12">
|
||||
<img
|
||||
src={toAbsoluteUrl(`/media/brand-logos/${logo}`)}
|
||||
className="min-w-12 shrink-0"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<a href={url} className="text-lg font-medium text-gray-900 hover:text-primary">
|
||||
{title}
|
||||
</a>
|
||||
|
||||
<div className="text-sm text-gray-700">{description}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center flex-wrap gap-5 lg:gap-12">
|
||||
<div className="flex items-center flex-wrap gap-5 lg:gap-14">
|
||||
<div className="flex items-center lg:justify-center flex-wrap gap-2 lg:gap-5">
|
||||
{statistics.map((statistic, index) => {
|
||||
return renderItem(statistic, index);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="w-[125px] shrink-0">
|
||||
<span className={`badge badge-md ${status.variant} badge-outline`}>
|
||||
{status.label}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-5 lg:gap-14">
|
||||
<div className="grid justify-end min-w-24">
|
||||
<CommonAvatars group={team.group} size={team.size} />
|
||||
</div>
|
||||
|
||||
<Menu className="items-stretch">
|
||||
<MenuItem
|
||||
toggle="dropdown"
|
||||
trigger="click"
|
||||
dropdownProps={{
|
||||
placement: isRTL() ? 'bottom-start' : 'bottom-end',
|
||||
modifiers: [
|
||||
{
|
||||
name: 'offset',
|
||||
options: {
|
||||
offset: isRTL() ? [0, -10] : [0, 10] // [skid, distance]
|
||||
}
|
||||
}
|
||||
]
|
||||
}}
|
||||
>
|
||||
<MenuToggle className="btn btn-sm btn-icon btn-light btn-clear">
|
||||
<KeenIcon icon="dots-vertical" />
|
||||
</MenuToggle>
|
||||
{DropdownCard2()}
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { CardProjectExtendedRow };
|
||||
90
src/partials/cards/CardProjectRow.tsx
Normal file
90
src/partials/cards/CardProjectRow.tsx
Normal file
@ -0,0 +1,90 @@
|
||||
import { KeenIcon, Menu, MenuItem, MenuToggle } from '@/components';
|
||||
import { toAbsoluteUrl } from '@/utils/Assets';
|
||||
import { useLanguage } from '@/i18n';
|
||||
import { DropdownCard2 } from '../dropdowns/general';
|
||||
import { CommonAvatars } from '../common';
|
||||
|
||||
interface IProjectRowProps {
|
||||
logo: string;
|
||||
name: string;
|
||||
description: string;
|
||||
status: {
|
||||
variant: string;
|
||||
label: string;
|
||||
};
|
||||
progress: {
|
||||
variant: string;
|
||||
value: number;
|
||||
};
|
||||
team: {
|
||||
size?: string;
|
||||
group: Array<{ filename?: string; variant?: string; fallback?: string }>;
|
||||
more?: {
|
||||
variant?: string;
|
||||
number?: number;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
const CardProjectRow = ({ logo, name, description, status, progress, team }: IProjectRowProps) => {
|
||||
const { isRTL } = useLanguage();
|
||||
return (
|
||||
<div className="card p-7">
|
||||
<div className="flex items-center flex-wrap justify-between gap-5">
|
||||
<div className="flex items-center gap-3.5">
|
||||
<div className="flex items-center justify-center size-14 shrink-0 rounded-lg bg-gray-100">
|
||||
<img src={toAbsoluteUrl(`/media/brand-logos/${logo}`)} className="" alt="" />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<a href="#" className="text-lg text-gray-900 hover:text-primary-active mb-px">
|
||||
{name}
|
||||
</a>
|
||||
<span className="text-sm text-gray-700">{description}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center flex-wrap gap-5 lg:gap-20">
|
||||
<div className="flex items-center flex-wrap gap-5 lg:gap-14">
|
||||
<span className={`badge badge-md ${status.variant} badge-outline`}>{status.label}</span>
|
||||
|
||||
<div className={`progress h-1.5 w-36 ${progress.variant}`}>
|
||||
<div className="progress-bar" style={{ width: `${progress.value}%` }}></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-5 lg:gap-14">
|
||||
<div className="flex justify-end w-24">
|
||||
<CommonAvatars group={team.group} size={team.size} more={team.more} />
|
||||
</div>
|
||||
|
||||
<Menu className="items-stretch">
|
||||
<MenuItem
|
||||
toggle="dropdown"
|
||||
trigger="click"
|
||||
dropdownProps={{
|
||||
placement: isRTL() ? 'bottom-start' : 'bottom-end',
|
||||
modifiers: [
|
||||
{
|
||||
name: 'offset',
|
||||
options: {
|
||||
offset: isRTL() ? [0, -10] : [0, 10] // [skid, distance]
|
||||
}
|
||||
}
|
||||
]
|
||||
}}
|
||||
>
|
||||
<MenuToggle className="btn btn-sm btn-icon btn-light btn-clear">
|
||||
<KeenIcon icon="dots-vertical" />
|
||||
</MenuToggle>
|
||||
{DropdownCard2()}
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { CardProjectRow, type IProjectRowProps };
|
||||
76
src/partials/cards/CardRole.tsx
Normal file
76
src/partials/cards/CardRole.tsx
Normal file
@ -0,0 +1,76 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useLanguage } from '@/i18n';
|
||||
import { KeenIcon, Menu, MenuItem, MenuToggle } from '@/components';
|
||||
|
||||
import { DropdownCardItem1 } from '../dropdowns/general';
|
||||
import { CommonHexagonBadge } from '../common';
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
interface Badge {
|
||||
size: string;
|
||||
badge: ReactNode;
|
||||
fill: string;
|
||||
stroke: string;
|
||||
}
|
||||
|
||||
interface IRoleProps {
|
||||
badge: Badge;
|
||||
title: string;
|
||||
subTitle: string;
|
||||
description: string;
|
||||
team: string;
|
||||
path: string;
|
||||
}
|
||||
|
||||
const CardRole = ({ path, title, subTitle, description, team, badge }: IRoleProps) => {
|
||||
const { isRTL } = useLanguage();
|
||||
|
||||
return (
|
||||
<div className="card flex flex-col gap-5 p-5 lg:p-7.5">
|
||||
<div className="flex items-center flex-wrap justify-between gap-1">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<CommonHexagonBadge {...badge} />
|
||||
|
||||
<div className="flex flex-col">
|
||||
<Link
|
||||
to={`${path}`}
|
||||
className="text-md font-medium text-gray-900 hover:text-primary-active mb-px"
|
||||
>
|
||||
{title}
|
||||
</Link>
|
||||
<span className="text-2sm text-gray-700">{subTitle}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Menu className="inline-flex">
|
||||
<MenuItem
|
||||
toggle="dropdown"
|
||||
trigger="click"
|
||||
dropdownProps={{
|
||||
placement: isRTL() ? 'bottom-start' : 'bottom-end',
|
||||
modifiers: [
|
||||
{
|
||||
name: 'offset',
|
||||
options: {
|
||||
offset: isRTL() ? [0, -10] : [0, 10] // [skid, distance]
|
||||
}
|
||||
}
|
||||
]
|
||||
}}
|
||||
>
|
||||
<MenuToggle className="btn btn-sm btn-icon btn-light btn-clear">
|
||||
<KeenIcon icon="dots-vertical" />
|
||||
</MenuToggle>
|
||||
{DropdownCardItem1()}
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</div>
|
||||
|
||||
<p className="text-2sm text-gray-700">{description}</p>
|
||||
|
||||
<span className="text-2sm text-gray-800">{team}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { CardRole, type IRoleProps };
|
||||
100
src/partials/cards/CardTeam.tsx
Normal file
100
src/partials/cards/CardTeam.tsx
Normal file
@ -0,0 +1,100 @@
|
||||
import { KeenIcon } from '@/components';
|
||||
|
||||
import { CommonAvatars, CommonRating } from '../common';
|
||||
|
||||
interface ITeamProps {
|
||||
icon: string;
|
||||
title: string;
|
||||
description: string;
|
||||
labels: string[];
|
||||
team: {
|
||||
size?: string;
|
||||
group: Array<{ filename?: string; variant?: string; fallback?: string }>;
|
||||
more?: {
|
||||
number: number;
|
||||
variant: string;
|
||||
};
|
||||
className?: string;
|
||||
};
|
||||
connected: boolean;
|
||||
rating: {
|
||||
value: number;
|
||||
round: number;
|
||||
};
|
||||
}
|
||||
|
||||
const CardTeam = ({ icon, title, description, labels, rating, team, connected }: ITeamProps) => {
|
||||
const renderItem = (label: string, index: number) => {
|
||||
return (
|
||||
<span key={index} className="badge badge-sm badge-outline">
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card">
|
||||
<div className="card-body grid gap-7 py-7.5">
|
||||
<div className="grid place-items-center gap-4">
|
||||
<div className="flex justify-center items-center size-14 rounded-full ring-1 ring-gray-300 bg-gray-100">
|
||||
<KeenIcon icon={icon} className="text-2xl text-gray-600" />
|
||||
</div>
|
||||
|
||||
<div className="grid place-items-center">
|
||||
<a
|
||||
href="#"
|
||||
className="text-base font-medium text-gray-900 hover:text-primary-active mb-px"
|
||||
>
|
||||
{title}
|
||||
</a>
|
||||
<span className="text-2sm text-gray-700 text-center">{description}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid">
|
||||
<div className="flex items-center justify-between flex-wrap mb-3.5 gap-2">
|
||||
<span className="text-2xs text-gray-600 uppercase">skills</span>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{labels.map((label, index) => {
|
||||
return renderItem(label, index);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-300 border-dashed"></div>
|
||||
|
||||
<div className="flex items-center justify-between flex-wrap my-2.5 gap-2">
|
||||
<span className="text-2xs text-gray-600 uppercase">rating</span>
|
||||
<CommonRating rating={rating.value} round={rating.round} />
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-300 border-dashed mb-3.5"></div>
|
||||
|
||||
<div className="flex items-center justify-between flex-wrap gap-2">
|
||||
<span className="text-2xs text-gray-600 uppercase">memebers</span>
|
||||
<CommonAvatars
|
||||
group={team.group}
|
||||
more={team.more}
|
||||
className={team.className}
|
||||
size={team.size}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card-footer justify-center">
|
||||
{connected ? (
|
||||
<a className="btn btn-light btn-sm">
|
||||
<KeenIcon icon="check-circle" className="" /> Joined
|
||||
</a>
|
||||
) : (
|
||||
<a className="btn btn-sm btn-primary">
|
||||
<KeenIcon icon="people" className="" /> Join
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { CardTeam, type ITeamProps };
|
||||
75
src/partials/cards/CardTeamRow.tsx
Normal file
75
src/partials/cards/CardTeamRow.tsx
Normal file
@ -0,0 +1,75 @@
|
||||
import { KeenIcon } from '@/components';
|
||||
|
||||
import { CommonAvatars, CommonRating } from '../common';
|
||||
import { ITeamProps } from './CardTeam';
|
||||
|
||||
const CardTeamRow = ({ icon, title, description, labels, rating, team, connected }: ITeamProps) => {
|
||||
const renderItem = (label: string, index: number) => {
|
||||
return (
|
||||
<span key={index} className="badge badge-sm badge-outline">
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card p-7.5">
|
||||
<div className="flex flex-wrap justify-between items-center gap-7">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex justify-center items-center size-14 shrink-0 rounded-full ring-1 ring-gray-300 bg-gray-100">
|
||||
<KeenIcon icon={icon} className="text-2xl text-gray-600" />
|
||||
</div>
|
||||
<div className="grid grid-col gap-1">
|
||||
<a
|
||||
href="#"
|
||||
className="text-base font-medium text-gray-900 hover:text-primary-active mb-px"
|
||||
>
|
||||
{title}
|
||||
</a>
|
||||
<span className="text-2sm text-gray-700">{description}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-6 lg:gap-12">
|
||||
<div className="grid gap-5 justify-end lg:text-end">
|
||||
<span className="text-2xs font-normal text-gray-500 uppercase">skills</span>
|
||||
<div className="flex gap-1.5">
|
||||
{labels.map((label, index) => {
|
||||
return renderItem(label, index);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid justify-end gap-6 lg:text-end">
|
||||
<div className="text-2xs text-gray-600 uppercase">rating</div>
|
||||
<CommonRating rating={rating.value} round={rating.round} />
|
||||
</div>
|
||||
|
||||
<div className="grid justify-end gap-3.5 lg:text-end lg:min-w-24 shrink-0 max-w-auto">
|
||||
<span className="text-2xs text-gray-600 uppercase">memebers</span>
|
||||
<CommonAvatars
|
||||
group={team.group}
|
||||
more={team.more}
|
||||
className={team.className}
|
||||
size={team.size}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid justify-end min-w-20">
|
||||
{connected ? (
|
||||
<a className="btn btn-light btn-sm">
|
||||
<KeenIcon icon="check-circle" className="" /> Joined
|
||||
</a>
|
||||
) : (
|
||||
<a className="btn btn-sm btn-primary">
|
||||
<KeenIcon icon="people" className="" /> Join
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { CardTeamRow };
|
||||
71
src/partials/cards/CardTournament.tsx
Normal file
71
src/partials/cards/CardTournament.tsx
Normal file
@ -0,0 +1,71 @@
|
||||
import { toAbsoluteUrl } from '@/utils/Assets';
|
||||
|
||||
interface ITournamentProps {
|
||||
image: string;
|
||||
logo: string;
|
||||
title: string;
|
||||
time: string;
|
||||
labels: string[];
|
||||
progress: {
|
||||
variant: string;
|
||||
value: number;
|
||||
slotNumber: number;
|
||||
leftNumber: number;
|
||||
};
|
||||
}
|
||||
|
||||
const CardTournament = ({ image, logo, title, time, labels, progress }: ITournamentProps) => {
|
||||
const renderItem = (label: string, index: number) => {
|
||||
return (
|
||||
<span key={index} className="badge badge-sm badge-outline">
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card shadow-none w-[285px] border-0">
|
||||
<div
|
||||
className="bg-cover bg-center bg-no-repeat rounded-t-xl h-56 w-[285px]"
|
||||
style={{ backgroundImage: `url(${toAbsoluteUrl(`/media/images/600x600/${image}`)})` }}
|
||||
></div>
|
||||
|
||||
<div className="card-border card-rounded-b grid gap-6 px-5 pt-3.5 pb-3 mb-4">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<img src={toAbsoluteUrl(`/media/brand-logos/${logo}`)} className="size" alt="" />
|
||||
|
||||
<div className="grid grid-cols-1 gap-0.5">
|
||||
<a
|
||||
href="#"
|
||||
className="text-gray-900 hover:text-primary-active text-md font-medium mb-px"
|
||||
>
|
||||
{title}
|
||||
</a>
|
||||
<time className="flex items-center gap-1.5 text-3xs text-gray-600">
|
||||
<div className="rounded-full w-1.5 h-1.5 bg-danger gap-1.5"></div> {time}
|
||||
</time>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{labels.map((label, index) => {
|
||||
return renderItem(label, index);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="grid gap-1.5 mb-0.5">
|
||||
<div className={`progress h-1.5 ${progress.variant}`}>
|
||||
<div className="progress-bar" style={{ width: `${progress.value}%` }}></div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center place-content-between">
|
||||
<span className="text-gray-600 text-2xs font-medium">{progress.slotNumber} slots</span>
|
||||
<span className="text-gray-500 text-2xs font-medium">{progress.leftNumber} left</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { CardTournament, type ITournamentProps };
|
||||
57
src/partials/cards/CardUserMini.tsx
Normal file
57
src/partials/cards/CardUserMini.tsx
Normal file
@ -0,0 +1,57 @@
|
||||
import { CommonAvatar } from '../common';
|
||||
import { IAvatar } from './CardAuthor';
|
||||
|
||||
interface IUserMiniProps {
|
||||
avatar?: IAvatar;
|
||||
name: string;
|
||||
verify: boolean;
|
||||
email: string;
|
||||
}
|
||||
|
||||
const CardUserMini = ({ avatar, verify, name, email }: IUserMiniProps) => {
|
||||
return (
|
||||
<div className="card flex flex-col items-center p-5 lg:py-10">
|
||||
<div className="mb-3.5">
|
||||
{avatar && (
|
||||
<CommonAvatar
|
||||
className={avatar?.className}
|
||||
image={avatar?.image}
|
||||
imageClass={avatar?.imageClass}
|
||||
fallback={avatar?.fallback}
|
||||
badgeClass={avatar?.badgeClass}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center gap-1.5 mb-2">
|
||||
<a
|
||||
href="#"
|
||||
className="hover:text-primary-active text-base leading-5 font-medium text-gray-900"
|
||||
>
|
||||
{name}
|
||||
</a>
|
||||
|
||||
{verify && (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="15"
|
||||
height="16"
|
||||
viewBox="0 0 15 16"
|
||||
fill="none"
|
||||
className="text-primary"
|
||||
>
|
||||
<path
|
||||
d="M14.5425 6.89749L13.5 5.83999C13.4273 5.76877 13.3699 5.6835 13.3312 5.58937C13.2925 5.49525 13.2734 5.39424 13.275 5.29249V3.79249C13.274 3.58699 13.2324 3.38371 13.1527 3.19432C13.0729 3.00494 12.9565 2.83318 12.8101 2.68892C12.6638 2.54466 12.4904 2.43073 12.2998 2.35369C12.1093 2.27665 11.9055 2.23801 11.7 2.23999H10.2C10.0982 2.24159 9.99722 2.22247 9.9031 2.18378C9.80898 2.1451 9.72371 2.08767 9.65249 2.01499L8.60249 0.957487C8.30998 0.665289 7.91344 0.50116 7.49999 0.50116C7.08654 0.50116 6.68999 0.665289 6.39749 0.957487L5.33999 1.99999C5.26876 2.07267 5.1835 2.1301 5.08937 2.16879C4.99525 2.20747 4.89424 2.22659 4.79249 2.22499H3.29249C3.08699 2.22597 2.88371 2.26754 2.69432 2.34731C2.50494 2.42709 2.33318 2.54349 2.18892 2.68985C2.04466 2.8362 1.93073 3.00961 1.85369 3.20013C1.77665 3.39064 1.73801 3.5945 1.73999 3.79999V5.29999C1.74159 5.40174 1.72247 5.50275 1.68378 5.59687C1.6451 5.691 1.58767 5.77627 1.51499 5.84749L0.457487 6.89749C0.165289 7.19 0.00115967 7.58654 0.00115967 7.99999C0.00115967 8.41344 0.165289 8.80998 0.457487 9.10249L1.49999 10.16C1.57267 10.2312 1.6301 10.3165 1.66878 10.4106C1.70747 10.5047 1.72659 10.6057 1.72499 10.7075V12.2075C1.72597 12.413 1.76754 12.6163 1.84731 12.8056C1.92709 12.995 2.04349 13.1668 2.18985 13.3111C2.3362 13.4553 2.50961 13.5692 2.70013 13.6463C2.89064 13.7233 3.0945 13.762 3.29999 13.76H4.79999C4.90174 13.7584 5.00275 13.7775 5.09687 13.8162C5.191 13.8549 5.27627 13.9123 5.34749 13.985L6.40499 15.0425C6.69749 15.3347 7.09404 15.4988 7.50749 15.4988C7.92094 15.4988 8.31748 15.3347 8.60999 15.0425L9.65999 14C9.73121 13.9273 9.81647 13.8699 9.9106 13.8312C10.0047 13.7925 10.1057 13.7734 10.2075 13.775H11.7075C12.1212 13.775 12.518 13.6106 12.8106 13.3181C13.1031 13.0255 13.2675 12.6287 13.2675 12.215V10.715C13.2659 10.6132 13.285 10.5122 13.3237 10.4181C13.3624 10.324 13.4198 10.2387 13.4925 10.1675L14.55 9.10999C14.6953 8.96452 14.8104 8.79176 14.8887 8.60164C14.9671 8.41152 15.007 8.20779 15.0063 8.00218C15.0056 7.79656 14.9643 7.59311 14.8847 7.40353C14.8051 7.21394 14.6888 7.04197 14.5425 6.89749ZM10.635 6.64999L6.95249 10.25C6.90055 10.3026 6.83864 10.3443 6.77038 10.3726C6.70212 10.4009 6.62889 10.4153 6.55499 10.415C6.48062 10.4139 6.40719 10.3982 6.33896 10.3685C6.27073 10.3389 6.20905 10.2961 6.15749 10.2425L4.37999 8.44249C4.32532 8.39044 4.28169 8.32793 4.25169 8.25867C4.22169 8.18941 4.20593 8.11482 4.20536 8.03934C4.20479 7.96387 4.21941 7.88905 4.24836 7.81934C4.27731 7.74964 4.31999 7.68647 4.37387 7.63361C4.42774 7.58074 4.4917 7.53926 4.56194 7.51163C4.63218 7.484 4.70726 7.47079 4.78271 7.47278C4.85816 7.47478 4.93244 7.49194 5.00112 7.52324C5.0698 7.55454 5.13148 7.59935 5.18249 7.65499L6.56249 9.05749L9.84749 5.84749C9.95296 5.74215 10.0959 5.68298 10.245 5.68298C10.394 5.68298 10.537 5.74215 10.6425 5.84749C10.6953 5.90034 10.737 5.96318 10.7653 6.03234C10.7935 6.1015 10.8077 6.1756 10.807 6.25031C10.8063 6.32502 10.7908 6.39884 10.7612 6.46746C10.7317 6.53608 10.6888 6.59813 10.635 6.64999Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
<a href="#" className="text-gray-700 text-sm hover:text-primary-active">
|
||||
{email}
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { CardUserMini, type IUserMiniProps };
|
||||
78
src/partials/cards/CardUserSocial.tsx
Normal file
78
src/partials/cards/CardUserSocial.tsx
Normal file
@ -0,0 +1,78 @@
|
||||
import { KeenIcon } from '@/components';
|
||||
|
||||
import { CommonAvatar } from '../common';
|
||||
import { IAvatar } from './CardAuthor';
|
||||
|
||||
interface IUserSocialProps {
|
||||
avatar: IAvatar;
|
||||
name: string;
|
||||
description: string;
|
||||
verify: boolean;
|
||||
}
|
||||
|
||||
const CardUserSocial = ({ avatar, name, description, verify }: IUserSocialProps) => {
|
||||
return (
|
||||
<div className="card">
|
||||
<div className="card-body flex flex-col items-center lg:pt-10">
|
||||
<div className="mb-3">
|
||||
<CommonAvatar
|
||||
className={avatar?.className}
|
||||
fallback={avatar?.fallback}
|
||||
image={avatar?.image}
|
||||
imageClass={avatar?.imageClass}
|
||||
badgeClass={avatar?.badgeClass}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center gap-1.5 mb-3">
|
||||
<a
|
||||
href="#"
|
||||
className="hover:text-primary-active text-base leading-5 font-medium text-gray-900"
|
||||
>
|
||||
{name}
|
||||
</a>
|
||||
|
||||
{verify && (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="15"
|
||||
height="16"
|
||||
viewBox="0 0 15 16"
|
||||
fill="none"
|
||||
className="text-primary"
|
||||
>
|
||||
<path
|
||||
d="M14.5425 6.89749L13.5 5.83999C13.4273 5.76877 13.3699 5.6835 13.3312 5.58937C13.2925 5.49525 13.2734 5.39424 13.275 5.29249V3.79249C13.274 3.58699 13.2324 3.38371 13.1527 3.19432C13.0729 3.00494 12.9565 2.83318 12.8101 2.68892C12.6638 2.54466 12.4904 2.43073 12.2998 2.35369C12.1093 2.27665 11.9055 2.23801 11.7 2.23999H10.2C10.0982 2.24159 9.99722 2.22247 9.9031 2.18378C9.80898 2.1451 9.72371 2.08767 9.65249 2.01499L8.60249 0.957487C8.30998 0.665289 7.91344 0.50116 7.49999 0.50116C7.08654 0.50116 6.68999 0.665289 6.39749 0.957487L5.33999 1.99999C5.26876 2.07267 5.1835 2.1301 5.08937 2.16879C4.99525 2.20747 4.89424 2.22659 4.79249 2.22499H3.29249C3.08699 2.22597 2.88371 2.26754 2.69432 2.34731C2.50494 2.42709 2.33318 2.54349 2.18892 2.68985C2.04466 2.8362 1.93073 3.00961 1.85369 3.20013C1.77665 3.39064 1.73801 3.5945 1.73999 3.79999V5.29999C1.74159 5.40174 1.72247 5.50275 1.68378 5.59687C1.6451 5.691 1.58767 5.77627 1.51499 5.84749L0.457487 6.89749C0.165289 7.19 0.00115967 7.58654 0.00115967 7.99999C0.00115967 8.41344 0.165289 8.80998 0.457487 9.10249L1.49999 10.16C1.57267 10.2312 1.6301 10.3165 1.66878 10.4106C1.70747 10.5047 1.72659 10.6057 1.72499 10.7075V12.2075C1.72597 12.413 1.76754 12.6163 1.84731 12.8056C1.92709 12.995 2.04349 13.1668 2.18985 13.3111C2.3362 13.4553 2.50961 13.5692 2.70013 13.6463C2.89064 13.7233 3.0945 13.762 3.29999 13.76H4.79999C4.90174 13.7584 5.00275 13.7775 5.09687 13.8162C5.191 13.8549 5.27627 13.9123 5.34749 13.985L6.40499 15.0425C6.69749 15.3347 7.09404 15.4988 7.50749 15.4988C7.92094 15.4988 8.31748 15.3347 8.60999 15.0425L9.65999 14C9.73121 13.9273 9.81647 13.8699 9.9106 13.8312C10.0047 13.7925 10.1057 13.7734 10.2075 13.775H11.7075C12.1212 13.775 12.518 13.6106 12.8106 13.3181C13.1031 13.0255 13.2675 12.6287 13.2675 12.215V10.715C13.2659 10.6132 13.285 10.5122 13.3237 10.4181C13.3624 10.324 13.4198 10.2387 13.4925 10.1675L14.55 9.10999C14.6953 8.96452 14.8104 8.79176 14.8887 8.60164C14.9671 8.41152 15.007 8.20779 15.0063 8.00218C15.0056 7.79656 14.9643 7.59311 14.8847 7.40353C14.8051 7.21394 14.6888 7.04197 14.5425 6.89749ZM10.635 6.64999L6.95249 10.25C6.90055 10.3026 6.83864 10.3443 6.77038 10.3726C6.70212 10.4009 6.62889 10.4153 6.55499 10.415C6.48062 10.4139 6.40719 10.3982 6.33896 10.3685C6.27073 10.3389 6.20905 10.2961 6.15749 10.2425L4.37999 8.44249C4.32532 8.39044 4.28169 8.32793 4.25169 8.25867C4.22169 8.18941 4.20593 8.11482 4.20536 8.03934C4.20479 7.96387 4.21941 7.88905 4.24836 7.81934C4.27731 7.74964 4.31999 7.68647 4.37387 7.63361C4.42774 7.58074 4.4917 7.53926 4.56194 7.51163C4.63218 7.484 4.70726 7.47079 4.78271 7.47278C4.85816 7.47478 4.93244 7.49194 5.00112 7.52324C5.0698 7.55454 5.13148 7.59935 5.18249 7.65499L6.56249 9.05749L9.84749 5.84749C9.95296 5.74215 10.0959 5.68298 10.245 5.68298C10.394 5.68298 10.537 5.74215 10.6425 5.84749C10.6953 5.90034 10.737 5.96318 10.7653 6.03234C10.7935 6.1015 10.8077 6.1756 10.807 6.25031C10.8063 6.32502 10.7908 6.39884 10.7612 6.46746C10.7317 6.53608 10.6888 6.59813 10.635 6.64999Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<span className="text-gray-700 text-sm mb-4">{description}</span>
|
||||
|
||||
<div className="flex items-center gap-2.5">
|
||||
<a href="#">
|
||||
<KeenIcon icon="facebook" className="text-gray-600 text-lg" />
|
||||
</a>
|
||||
|
||||
<a href="#">
|
||||
<KeenIcon icon="dribbble" className="text-gray-600 text-lg" />
|
||||
</a>
|
||||
|
||||
<a href="{{ url }}">
|
||||
<KeenIcon icon="instagram" className="text-gray-600 text-lg" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card-footer justify-center">
|
||||
<a className="btn btn-light btn-sm">
|
||||
<KeenIcon icon="messages" /> Message
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { CardUserSocial, type IUserSocialProps };
|
||||
82
src/partials/cards/CardUserSocialRow.tsx
Normal file
82
src/partials/cards/CardUserSocialRow.tsx
Normal file
@ -0,0 +1,82 @@
|
||||
import { KeenIcon } from '@/components';
|
||||
|
||||
import { CommonAvatar } from '../common';
|
||||
import { IUserSocialProps } from './CardUserSocial';
|
||||
|
||||
const CardUserSocialRow = ({ avatar, name, description, verify }: IUserSocialProps) => {
|
||||
return (
|
||||
<div className="card p-7.5">
|
||||
<div className="flex items-center flex-wrap justify-between gap-5">
|
||||
<div className="flex items-center gap-3.5">
|
||||
<CommonAvatar
|
||||
className={avatar?.className}
|
||||
image={avatar?.image}
|
||||
imageClass={avatar?.imageClass}
|
||||
badgeClass={avatar?.badgeClass}
|
||||
fallback={avatar?.fallback}
|
||||
/>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center gap-1.5 mb-px">
|
||||
<a
|
||||
href="#"
|
||||
className="hover:text-primary-active text-base leading-5 font-medium text-gray-900"
|
||||
>
|
||||
{name}
|
||||
</a>
|
||||
|
||||
{verify && (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="15"
|
||||
height="16"
|
||||
viewBox="0 0 15 16"
|
||||
fill="none"
|
||||
className="text-primary"
|
||||
>
|
||||
<path
|
||||
d="M14.5425 6.89749L13.5 5.83999C13.4273 5.76877 13.3699 5.6835 13.3312 5.58937C13.2925 5.49525 13.2734 5.39424 13.275 5.29249V3.79249C13.274 3.58699 13.2324 3.38371 13.1527 3.19432C13.0729 3.00494 12.9565 2.83318 12.8101 2.68892C12.6638 2.54466 12.4904 2.43073 12.2998 2.35369C12.1093 2.27665 11.9055 2.23801 11.7 2.23999H10.2C10.0982 2.24159 9.99722 2.22247 9.9031 2.18378C9.80898 2.1451 9.72371 2.08767 9.65249 2.01499L8.60249 0.957487C8.30998 0.665289 7.91344 0.50116 7.49999 0.50116C7.08654 0.50116 6.68999 0.665289 6.39749 0.957487L5.33999 1.99999C5.26876 2.07267 5.1835 2.1301 5.08937 2.16879C4.99525 2.20747 4.89424 2.22659 4.79249 2.22499H3.29249C3.08699 2.22597 2.88371 2.26754 2.69432 2.34731C2.50494 2.42709 2.33318 2.54349 2.18892 2.68985C2.04466 2.8362 1.93073 3.00961 1.85369 3.20013C1.77665 3.39064 1.73801 3.5945 1.73999 3.79999V5.29999C1.74159 5.40174 1.72247 5.50275 1.68378 5.59687C1.6451 5.691 1.58767 5.77627 1.51499 5.84749L0.457487 6.89749C0.165289 7.19 0.00115967 7.58654 0.00115967 7.99999C0.00115967 8.41344 0.165289 8.80998 0.457487 9.10249L1.49999 10.16C1.57267 10.2312 1.6301 10.3165 1.66878 10.4106C1.70747 10.5047 1.72659 10.6057 1.72499 10.7075V12.2075C1.72597 12.413 1.76754 12.6163 1.84731 12.8056C1.92709 12.995 2.04349 13.1668 2.18985 13.3111C2.3362 13.4553 2.50961 13.5692 2.70013 13.6463C2.89064 13.7233 3.0945 13.762 3.29999 13.76H4.79999C4.90174 13.7584 5.00275 13.7775 5.09687 13.8162C5.191 13.8549 5.27627 13.9123 5.34749 13.985L6.40499 15.0425C6.69749 15.3347 7.09404 15.4988 7.50749 15.4988C7.92094 15.4988 8.31748 15.3347 8.60999 15.0425L9.65999 14C9.73121 13.9273 9.81647 13.8699 9.9106 13.8312C10.0047 13.7925 10.1057 13.7734 10.2075 13.775H11.7075C12.1212 13.775 12.518 13.6106 12.8106 13.3181C13.1031 13.0255 13.2675 12.6287 13.2675 12.215V10.715C13.2659 10.6132 13.285 10.5122 13.3237 10.4181C13.3624 10.324 13.4198 10.2387 13.4925 10.1675L14.55 9.10999C14.6953 8.96452 14.8104 8.79176 14.8887 8.60164C14.9671 8.41152 15.007 8.20779 15.0063 8.00218C15.0056 7.79656 14.9643 7.59311 14.8847 7.40353C14.8051 7.21394 14.6888 7.04197 14.5425 6.89749ZM10.635 6.64999L6.95249 10.25C6.90055 10.3026 6.83864 10.3443 6.77038 10.3726C6.70212 10.4009 6.62889 10.4153 6.55499 10.415C6.48062 10.4139 6.40719 10.3982 6.33896 10.3685C6.27073 10.3389 6.20905 10.2961 6.15749 10.2425L4.37999 8.44249C4.32532 8.39044 4.28169 8.32793 4.25169 8.25867C4.22169 8.18941 4.20593 8.11482 4.20536 8.03934C4.20479 7.96387 4.21941 7.88905 4.24836 7.81934C4.27731 7.74964 4.31999 7.68647 4.37387 7.63361C4.42774 7.58074 4.4917 7.53926 4.56194 7.51163C4.63218 7.484 4.70726 7.47079 4.78271 7.47278C4.85816 7.47478 4.93244 7.49194 5.00112 7.52324C5.0698 7.55454 5.13148 7.59935 5.18249 7.65499L6.56249 9.05749L9.84749 5.84749C9.95296 5.74215 10.0959 5.68298 10.245 5.68298C10.394 5.68298 10.537 5.74215 10.6425 5.84749C10.6953 5.90034 10.737 5.96318 10.7653 6.03234C10.7935 6.1015 10.8077 6.1756 10.807 6.25031C10.8063 6.32502 10.7908 6.39884 10.7612 6.46746C10.7317 6.53608 10.6888 6.59813 10.635 6.64999Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-1.5">
|
||||
<KeenIcon icon="geolocation" className="text-gray-500 text-md" />
|
||||
<a href="#" className="text-sm text-gray-700">
|
||||
{description}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center flex-wrap gap-5 lg:gap-12">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<a href="#">
|
||||
<KeenIcon icon="facebook" className="text-gray-600 text-lg" />
|
||||
</a>
|
||||
|
||||
<a href="#">
|
||||
<KeenIcon icon="dribbble" className="text-gray-600 text-lg" />
|
||||
</a>
|
||||
|
||||
<a href="#">
|
||||
<KeenIcon icon="instagram" className="text-gray-600 text-lg" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<a className="btn btn-light btn-sm">
|
||||
<KeenIcon icon="messages" /> Message
|
||||
</a>
|
||||
|
||||
<button className="btn btn-icon btn-light btn-clear btn-sm">
|
||||
<KeenIcon icon="dots-vertical" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { CardUserSocialRow };
|
||||
66
src/partials/cards/CardWork.tsx
Normal file
66
src/partials/cards/CardWork.tsx
Normal file
@ -0,0 +1,66 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { KeenIcon } from '@/components';
|
||||
import { toAbsoluteUrl } from '@/utils/Assets';
|
||||
|
||||
interface IWorkProps {
|
||||
image: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
authorAvatar: string;
|
||||
authorName: string;
|
||||
likes: number;
|
||||
comments: number;
|
||||
}
|
||||
|
||||
const CardWork = ({ image, title, authorAvatar, authorName, likes, comments }: IWorkProps) => {
|
||||
return (
|
||||
<div className="card border-0">
|
||||
<img
|
||||
src={toAbsoluteUrl(`/media/images/600x400/${image}`)}
|
||||
className="w-full h-auto rounded-t-xl"
|
||||
alt=""
|
||||
/>
|
||||
|
||||
<div className="card-border card-rounded-b flex flex-col gap-2 px-5 py-4.5">
|
||||
<Link
|
||||
to="/public-profile/profiles/company"
|
||||
className="text-lg font-medium text-gray-900 hover:text-primary"
|
||||
>
|
||||
{title}
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center justify-between grow">
|
||||
<div className="flex items-center grow">
|
||||
<img
|
||||
src={toAbsoluteUrl(`/media/avatars/${authorAvatar}`)}
|
||||
className="rounded-full size-7 me-2"
|
||||
alt=""
|
||||
/>
|
||||
|
||||
<Link
|
||||
to="/public-profile/profiles/nft"
|
||||
className="text-2sm text-gray-800 hover:text-primary mb-px"
|
||||
>
|
||||
{authorName}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 items-center">
|
||||
<div className="flex gap-1 items-center">
|
||||
<KeenIcon icon="heart" className="text-base text-gray-500" />
|
||||
<span className="text-2sm text-gray-800 py-2">{likes}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-1 items-center">
|
||||
<KeenIcon icon="messages" className="text-base text-gray-500" />
|
||||
<span className="text-2sm text-gray-800 py-2">{comments}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { CardWork, type IWorkProps };
|
||||
95
src/partials/cards/CardWorkRow.tsx
Normal file
95
src/partials/cards/CardWorkRow.tsx
Normal file
@ -0,0 +1,95 @@
|
||||
import { KeenIcon, Menu, MenuItem, MenuToggle } from '@/components';
|
||||
import { toAbsoluteUrl } from '@/utils/Assets';
|
||||
import { useLanguage } from '@/i18n';
|
||||
import { DropdownCard2 } from '../dropdowns/general';
|
||||
import { IWorkProps } from './CardWork';
|
||||
|
||||
const CardWorkRow = ({
|
||||
image,
|
||||
description,
|
||||
title,
|
||||
authorAvatar,
|
||||
authorName,
|
||||
likes,
|
||||
comments
|
||||
}: IWorkProps) => {
|
||||
const { isRTL } = useLanguage();
|
||||
|
||||
return (
|
||||
<div className="card p-5">
|
||||
<div className="flex flex-wrap justify-between items-center gap-7">
|
||||
<div className="flex flex-wrap items-center gap-5">
|
||||
<img
|
||||
src={toAbsoluteUrl(`/media/images/600x400/${image}`)}
|
||||
className="rounded-md max-h-20 max-w-full shrink-0"
|
||||
alt=""
|
||||
/>
|
||||
|
||||
<div className="grid grid-col gap-1">
|
||||
<a
|
||||
href="#"
|
||||
className="text-lg font-semibold text-gray-900 hover:text-primary-active mb-px"
|
||||
>
|
||||
{title}
|
||||
</a>
|
||||
<span className="text-sm font-medium text-gray-600">{description}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-5 lg:gap-7.5">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<img
|
||||
src={toAbsoluteUrl(`/media/avatars/${authorAvatar}`)}
|
||||
className="rounded-full h-7"
|
||||
alt=""
|
||||
/>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
className="text-2sm font-medium text-gray-700 hover:text-primary-active mb-px"
|
||||
>
|
||||
{authorName}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-1 items-center w-20 justify-end">
|
||||
<KeenIcon icon="heart" className="text-base text-gray-500" />
|
||||
<span className="text-2sm font-medium text-gray-700 py-2">{likes}</span>
|
||||
<span className="text-2sm font-medium text-gray-700">Likes</span>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-1 items-center w-28 justify-end">
|
||||
<KeenIcon icon="messages" className="text-base text-gray-500" />
|
||||
<span className="text-2sm font-medium text-gray-700 py-2">{comments}</span>
|
||||
<span className="text-2sm font-medium text-gray-700">Comments</span>
|
||||
</div>
|
||||
|
||||
<Menu className="items-stretch">
|
||||
<MenuItem
|
||||
toggle="dropdown"
|
||||
trigger="click"
|
||||
dropdownProps={{
|
||||
placement: isRTL() ? 'bottom-start' : 'bottom-end',
|
||||
modifiers: [
|
||||
{
|
||||
name: 'offset',
|
||||
options: {
|
||||
offset: isRTL() ? [0, -10] : [0, 10] // [skid, distance]
|
||||
}
|
||||
}
|
||||
]
|
||||
}}
|
||||
>
|
||||
<MenuToggle className="btn btn-sm btn-icon btn-light btn-clear">
|
||||
<KeenIcon icon="dots-vertical" />
|
||||
</MenuToggle>
|
||||
{DropdownCard2()}
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { CardWorkRow };
|
||||
29
src/partials/cards/index.ts
Normal file
29
src/partials/cards/index.ts
Normal file
@ -0,0 +1,29 @@
|
||||
export * from './CardAddNew';
|
||||
export * from './CardAddNewRow';
|
||||
export * from './CardAuthor';
|
||||
export * from './CardAuthorRow';
|
||||
export * from './CardCampaign';
|
||||
export * from './CardCampaignRow';
|
||||
export * from './CardConnection';
|
||||
export * from './CardConnectionRow';
|
||||
export * from './CardIntegration';
|
||||
export * from './CardLocation';
|
||||
export * from './CardNFT';
|
||||
export * from './CardNFT2';
|
||||
export * from './CardNFT2Row';
|
||||
export * from './CardNotification';
|
||||
export * from './CardNowPlaying';
|
||||
export * from './CardPost';
|
||||
export * from './CardProject';
|
||||
export * from './CardProjectExtended';
|
||||
export * from './CardProjectExtendedRow';
|
||||
export * from './CardProjectRow';
|
||||
export * from './CardRole';
|
||||
export * from './CardTeam';
|
||||
export * from './CardTeamRow';
|
||||
export * from './CardTournament';
|
||||
export * from './CardUserMini';
|
||||
export * from './CardUserSocial';
|
||||
export * from './CardUserSocialRow';
|
||||
export * from './CardWork';
|
||||
export * from './CardWorkRow';
|
||||
Reference in New Issue
Block a user