revamp template
This commit is contained in:
fro1991
22
src/partials/activities/items/ActivitiesAnniversary.tsx
Normal file
22
src/partials/activities/items/ActivitiesAnniversary.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { TimelinesWrapper } from '@/partials/timelines/default/item';
|
||||
|
||||
const ActivitiesAnniversary = () => {
|
||||
return (
|
||||
<TimelinesWrapper icon="cup" line={false} removeSpace={true}>
|
||||
<div className="flex flex-col">
|
||||
<div className="text-sm text-gray-800">
|
||||
We recently
|
||||
<Link to="/public-profile/profiles/nft" className="text-sm font-medium link">
|
||||
celebrated
|
||||
</Link>
|
||||
the blog's 1-year anniversary
|
||||
</div>
|
||||
<span className="text-xs text-gray-600">3 months ago, 4:07 PM</span>
|
||||
</div>
|
||||
</TimelinesWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export { ActivitiesAnniversary };
|
||||
20
src/partials/activities/items/ActivitiesBlogAnniversary.tsx
Normal file
20
src/partials/activities/items/ActivitiesBlogAnniversary.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
import { TimelinesWrapper } from '@/partials/timelines/default/item';
|
||||
|
||||
const ActivitiesBlogAnniversary = () => {
|
||||
return (
|
||||
<TimelinesWrapper icon="rocket" line={false}>
|
||||
<div className="flex flex-col">
|
||||
<div className="text-sm text-gray-800">
|
||||
We recently
|
||||
<a href="#" className="text-sm font-medium link">
|
||||
celebrated
|
||||
</a>
|
||||
the blog's 1-year anniversary
|
||||
</div>
|
||||
<span className="text-xs text-gray-600">3 weeks ago, 4:07 PM</span>
|
||||
</div>
|
||||
</TimelinesWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export { ActivitiesBlogAnniversary };
|
||||
@ -0,0 +1,52 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { TimelinesWrapper } from '@/partials/timelines/default/item';
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
interface IBloggingConferenceProps {
|
||||
heading?: string;
|
||||
datetime?: string;
|
||||
image?: ReactNode;
|
||||
title?: string;
|
||||
}
|
||||
|
||||
const ActivitiesBloggingConference = ({
|
||||
heading,
|
||||
datetime,
|
||||
image,
|
||||
title
|
||||
}: IBloggingConferenceProps) => {
|
||||
return (
|
||||
<TimelinesWrapper icon="directbox-default" line={true}>
|
||||
<div className="flex flex-col pb-2.5">
|
||||
<span className="text-sm text-gray-800">
|
||||
{heading ?? 'Attending the virtual blogging conference was an enriching experience'}
|
||||
</span>
|
||||
|
||||
<span className="text-xs text-gray-600">{datetime ?? '2 days ago, 4:07 PM'}</span>
|
||||
</div>
|
||||
|
||||
<div className="card shadow-none">
|
||||
<div className="card-body lg:py-4">
|
||||
<div className="flex justify-center py-4">{image}</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="text-md font-medium text-gray-900 text-center">
|
||||
{title ?? 'Blogging Conference'}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<Link to="/public-profile/profiles/company" className="text-2sm font-semibold link">
|
||||
Axio new release
|
||||
</Link>
|
||||
<span className="text-2sm text-gray-700 me-2">email campaign</span>
|
||||
<span className="badge badge-sm badge-success badge-outline">Public</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TimelinesWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export { ActivitiesBloggingConference, type IBloggingConferenceProps };
|
||||
17
src/partials/activities/items/ActivitiesDesignerWelcome.tsx
Normal file
17
src/partials/activities/items/ActivitiesDesignerWelcome.tsx
Normal file
@ -0,0 +1,17 @@
|
||||
import { TimelinesWrapper } from '@/partials/timelines/default/item';
|
||||
|
||||
const ActivitiesDesignerWelcome = () => {
|
||||
return (
|
||||
<TimelinesWrapper icon="design-1" line={true}>
|
||||
<div className="flex flex-col">
|
||||
<div className="text-sm text-gray-800">
|
||||
Onboarded a talented designer to our creative team, adding valuable expertise to upcoming
|
||||
projects.
|
||||
</div>
|
||||
<span className="text-xs text-gray-600">2 weeks ago, 10:45 AM</span>
|
||||
</div>
|
||||
</TimelinesWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export { ActivitiesDesignerWelcome };
|
||||
@ -0,0 +1,22 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { TimelinesWrapper } from '@/partials/timelines/default/item';
|
||||
|
||||
const ActivitiesFollowersMilestone = () => {
|
||||
return (
|
||||
<TimelinesWrapper icon="coffee" line={true}>
|
||||
<div className="flex flex-col">
|
||||
<div className="text-sm text-gray-900">
|
||||
Reaching the milestone of
|
||||
<Link to="/public-profile/profiles/feeds" className="text-sm font-medium link">
|
||||
10,000 followers
|
||||
</Link>
|
||||
on the blog was a dream come true
|
||||
</div>
|
||||
<span className="text-xs text-gray-600">5 days ago, 4:07 PM</span>
|
||||
</div>
|
||||
</TimelinesWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export { ActivitiesFollowersMilestone };
|
||||
21
src/partials/activities/items/ActivitiesInterview.tsx
Normal file
21
src/partials/activities/items/ActivitiesInterview.tsx
Normal file
@ -0,0 +1,21 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { TimelinesWrapper } from '@/partials/timelines/default/item';
|
||||
|
||||
const ActivitiesInterview = () => {
|
||||
return (
|
||||
<TimelinesWrapper icon="entrance-left" line={true}>
|
||||
<div className="flex flex-col">
|
||||
<div className="text-sm text-gray-800">
|
||||
I had the privilege of interviewing an industry expert for an
|
||||
<Link to="/public-profile/profiles/blogger" className="text-sm link">
|
||||
upcoming blog post
|
||||
</Link>
|
||||
</div>
|
||||
<span className="text-xs text-gray-600">2 days ago, 4:07 PM</span>
|
||||
</div>
|
||||
</TimelinesWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export { ActivitiesInterview };
|
||||
19
src/partials/activities/items/ActivitiesLogin.tsx
Normal file
19
src/partials/activities/items/ActivitiesLogin.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import { TimelinesWrapper } from '@/partials/timelines/default/item';
|
||||
|
||||
const ActivitiesLogin = () => {
|
||||
return (
|
||||
<TimelinesWrapper icon="entrance-left" line={true}>
|
||||
<div className="flex flex-col">
|
||||
<div className="text-sm text-gray-800">
|
||||
Jenny's last login to the
|
||||
<a href="#" className="text-sm link">
|
||||
Customer Portal
|
||||
</a>
|
||||
</div>
|
||||
<span className="text-xs text-gray-600">5 days ago, 4:07 PM</span>
|
||||
</div>
|
||||
</TimelinesWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export { ActivitiesLogin };
|
||||
21
src/partials/activities/items/ActivitiesNewArticle.tsx
Normal file
21
src/partials/activities/items/ActivitiesNewArticle.tsx
Normal file
@ -0,0 +1,21 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { TimelinesWrapper } from '@/partials/timelines/default/item';
|
||||
|
||||
const ActivitiesNewArticle = () => {
|
||||
return (
|
||||
<TimelinesWrapper icon="people" line={true}>
|
||||
<div className="flex flex-col">
|
||||
<div className="text-sm text-gray-800">
|
||||
Posted a new article
|
||||
<Link to="/public-profile/profiles/blogger" className="text-sm font-medium link">
|
||||
Top 10 Tech Trends
|
||||
</Link>
|
||||
</div>
|
||||
<span className="text-xs text-gray-600">Today, 9:00 AM</span>
|
||||
</div>
|
||||
</TimelinesWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export { ActivitiesNewArticle };
|
||||
24
src/partials/activities/items/ActivitiesNewProduct.tsx
Normal file
24
src/partials/activities/items/ActivitiesNewProduct.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
import { TimelinesWrapper } from '@/partials/timelines/default/item';
|
||||
|
||||
const ActivitiesNewProduct = () => {
|
||||
return (
|
||||
<TimelinesWrapper icon="people" line={true}>
|
||||
<div className="flex flex-col">
|
||||
<div className="text-sm text-gray-800">
|
||||
Jenny sent an
|
||||
<a href="#" className="text-sm link">
|
||||
inquiry
|
||||
</a>
|
||||
about a
|
||||
<a href="#" className="text-sm link">
|
||||
new product
|
||||
</a>
|
||||
.
|
||||
</div>
|
||||
<span className="text-xs text-gray-600">Today, 9:00 AM</span>
|
||||
</div>
|
||||
</TimelinesWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export { ActivitiesNewProduct };
|
||||
97
src/partials/activities/items/ActivitiesNewTeam.tsx
Normal file
97
src/partials/activities/items/ActivitiesNewTeam.tsx
Normal file
@ -0,0 +1,97 @@
|
||||
import { KeenIcon } from '@/components';
|
||||
|
||||
import { CommonAvatars, CommonRating } from '@/partials/common';
|
||||
import { TimelinesWrapper } from '@/partials/timelines/default/item';
|
||||
|
||||
const ActivitiesNewTeam = () => {
|
||||
return (
|
||||
<TimelinesWrapper icon="code" line={true}>
|
||||
<div className="grow">
|
||||
<div className="flex flex-col pb-2.5">
|
||||
<div className="text-sm text-gray-800">
|
||||
A new team
|
||||
<a href="#" className="text-sm font-medium text-gray-900 hover:text-primary-active">
|
||||
Market Mavericks
|
||||
</a>
|
||||
joined community
|
||||
</div>
|
||||
<span className="text-xs text-gray-600">1 month ago, 11:45 AM</span>
|
||||
</div>
|
||||
|
||||
<div className="card shadow-none p-4">
|
||||
<div className="flex flex-wrap justify-between items-center gap-7">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="relative size-[50px] shrink-0">
|
||||
<svg
|
||||
className="w-full h-full stroke-primary-clarity fill-primary-light"
|
||||
width="44"
|
||||
height="48"
|
||||
viewBox="0 0 44 48"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M16 2.4641C19.7128 0.320509 24.2872 0.320508 28 2.4641L37.6506 8.0359C41.3634 10.1795 43.6506 14.141 43.6506
|
||||
18.4282V29.5718C43.6506 33.859 41.3634 37.8205 37.6506 39.9641L28 45.5359C24.2872 47.6795 19.7128 47.6795 16 45.5359L6.34937
|
||||
39.9641C2.63655 37.8205 0.349365 33.859 0.349365 29.5718V18.4282C0.349365 14.141 2.63655 10.1795 6.34937 8.0359L16 2.4641Z"
|
||||
fill="none"
|
||||
/>
|
||||
<path
|
||||
d="M16.25 2.89711C19.8081 0.842838 24.1919 0.842837 27.75 2.89711L37.4006 8.46891C40.9587 10.5232 43.1506 14.3196 43.1506
|
||||
18.4282V29.5718C43.1506 33.6804 40.9587 37.4768 37.4006 39.5311L27.75 45.1029C24.1919 47.1572 19.8081 47.1572 16.25 45.1029L6.59937
|
||||
39.5311C3.04125 37.4768 0.849365 33.6803 0.849365 29.5718V18.4282C0.849365 14.3196 3.04125 10.5232 6.59937 8.46891L16.25 2.89711Z"
|
||||
stroke="none"
|
||||
strokeOpacity="1"
|
||||
/>
|
||||
</svg>
|
||||
<div className="absolute leading-none start-2/4 top-2/4 -translate-y-2/4 -translate-x-2/4 rtl:translate-x-2/4">
|
||||
<KeenIcon icon="abstract-39" className="text-xl ps-px text-primary" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<a href="#" className="text-base font-medium hover:text-primary text-gray-900">
|
||||
Market Mavericks
|
||||
</a>
|
||||
<p className="text-2sm text-gray-700">
|
||||
Navigating markets with strategic solutions
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-6 lg:gap-12">
|
||||
<div className="flex flex-col items-end gap-5">
|
||||
<span className="text-2xs text-gray-600 uppercase">rating</span>
|
||||
<CommonRating rating={4} round={0.5} />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-end gap-3 lg:min-w-24 shrink-0 max-w-auto">
|
||||
<span className="text-2xs text-gray-600 uppercase">members</span>
|
||||
<CommonAvatars
|
||||
size="size-7"
|
||||
group={[
|
||||
{ filename: '300-4.png' },
|
||||
{ filename: '300-1.png' },
|
||||
{ filename: '300-2.png' },
|
||||
{
|
||||
fallback: 'S',
|
||||
variant: 'text-primary-inverse ring-primary-light bg-primary'
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid justify-end min-w-20">
|
||||
<a className="btn btn-sm btn-primary">
|
||||
<KeenIcon icon="people" /> Join
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TimelinesWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export { ActivitiesNewTeam };
|
||||
@ -0,0 +1,62 @@
|
||||
import { toAbsoluteUrl } from '@/utils/Assets';
|
||||
|
||||
import { TimelinesWrapper } from '@/partials/timelines/default/item';
|
||||
|
||||
const ActivitiesPhotographyWorkshop = () => {
|
||||
return (
|
||||
<TimelinesWrapper icon="code" line={true}>
|
||||
<div className="flex flex-col pb-2.5">
|
||||
<span className="text-sm text-gray-800">
|
||||
Jenny attended a Nature Photography Immersion workshop
|
||||
</span>
|
||||
<span className="text-xs text-gray-600">3 days ago, 11:45 AM</span>
|
||||
</div>
|
||||
|
||||
<div className="card shadow-none">
|
||||
<div className="card-body">
|
||||
<div className="grid gap-4">
|
||||
<div className="flex flex-col md:flex-row md:items-center gap-5">
|
||||
<div className="flex items-center gap-5 shrink-0">
|
||||
<div className="border border-brand-clarity rounded-lg max-h-20">
|
||||
<div className="flex items-center justify-center border-b border-b-brand-clarity bg-brand-light rounded-t-lg">
|
||||
<span className="text-2sm text-brand font-medium p-2">Apr</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-center size-12">
|
||||
<span className="font-medium text-gray-800 text-1.5xl tracking-tight">02</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<img
|
||||
src={toAbsoluteUrl('/media/images/600x400/8.jpg')}
|
||||
className="rounded-lg max-h-20 max-w-full"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<a
|
||||
href="#"
|
||||
className="text-xs text-brand leading-[14px] hover:text-primary-active mb-px"
|
||||
>
|
||||
Photo Workshop
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="text-md font-medium hover:text-primary text-gray-900 leading-4"
|
||||
>
|
||||
Nature Photography Immersion
|
||||
</a>
|
||||
<p className="text-xs text-gray-800 leading-[22px]">
|
||||
Enhance your nature photography skills in a hands-on workshop guided by
|
||||
experienced photographers.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TimelinesWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export { ActivitiesPhotographyWorkshop };
|
||||
16
src/partials/activities/items/ActivitiesProductSpecific.tsx
Normal file
16
src/partials/activities/items/ActivitiesProductSpecific.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
import { TimelinesWrapper } from '@/partials/timelines/default/item';
|
||||
|
||||
const ActivitiesProductSpecific = () => {
|
||||
return (
|
||||
<TimelinesWrapper icon="rocket" line={false}>
|
||||
<div className="flex flex-col">
|
||||
<div className="text-sm text-gray-800">
|
||||
Explored niche demo ideas for product-specific solutions.
|
||||
</div>
|
||||
<span className="text-xs text-gray-600">3 weeks ago, 4:07 PM</span>
|
||||
</div>
|
||||
</TimelinesWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export { ActivitiesProductSpecific };
|
||||
73
src/partials/activities/items/ActivitiesProductWebinar.tsx
Normal file
73
src/partials/activities/items/ActivitiesProductWebinar.tsx
Normal file
@ -0,0 +1,73 @@
|
||||
import { KeenIcon } from '@/components';
|
||||
|
||||
import { CommonAvatars } from '@/partials/common';
|
||||
import { TimelinesWrapper } from '@/partials/timelines/default/item';
|
||||
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const ActivitiesProductWebinar = () => {
|
||||
return (
|
||||
<TimelinesWrapper icon="calendar-tick" line={true}>
|
||||
<div className="flex flex-col pb-2.5">
|
||||
<span className="text-sm text-gray-800">
|
||||
Jenny attended a webinar on new product features.
|
||||
</span>
|
||||
<span className="text-xs text-gray-600">3 days ago, 11:45 AM</span>
|
||||
</div>
|
||||
|
||||
<div className="card shadow-none p-4">
|
||||
<div className="flex flex-wrap gap-2.5">
|
||||
<KeenIcon icon="code" className="text-lg text-info" />
|
||||
<div className="flex flex-col gap-5 grow">
|
||||
<div className="flex flex-wrap items-center justify-between">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<span className="text-md font-medium text-gray-900 cursor-pointer hover:text-primary mb-px">
|
||||
Leadership Development Series: Part 1
|
||||
</span>
|
||||
<span className="text-xs text-gray-600">
|
||||
The first installment of a leadership development series.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Link to="/account/members/teams" className="btn btn-link">
|
||||
View
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-7.5">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-2sm font-medium text-gray-600">Code:</span>
|
||||
<span className="text-2sm text-primary">#leaderdev-1</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-2sm text-gray-600">Progress:</span>
|
||||
<div className="progress progress-success min-w-[120px]">
|
||||
<div className="progress-bar" style={{ width: '80%' }}></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1.5 lg:min-w-24 shrink-0 max-w-auto">
|
||||
<span className="text-2sm text-gray-600">Guests:</span>
|
||||
<CommonAvatars
|
||||
size="size-7"
|
||||
group={[
|
||||
{ filename: '300-4.png' },
|
||||
{ filename: '300-1.png' },
|
||||
{ filename: '300-2.png' },
|
||||
{
|
||||
fallback: '+24',
|
||||
variant: 'text-primary-inverse ring-primary-light bg-primary'
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TimelinesWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export { ActivitiesProductWebinar };
|
||||
16
src/partials/activities/items/ActivitiesProjectStatus.tsx
Normal file
16
src/partials/activities/items/ActivitiesProjectStatus.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
import { TimelinesWrapper } from '@/partials/timelines/default/item';
|
||||
|
||||
const ActivitiesProjectStatus = () => {
|
||||
return (
|
||||
<TimelinesWrapper icon="rocket" line={false}>
|
||||
<div className="flex flex-col">
|
||||
<div className="text-sm text-gray-900">
|
||||
Completed phase one of client project ahead of schedule.
|
||||
</div>
|
||||
<span className="text-xs text-gray-600">6 days ago, 10:45 AM</span>
|
||||
</div>
|
||||
</TimelinesWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export { ActivitiesProjectStatus };
|
||||
21
src/partials/activities/items/ActivitiesUpcomingContent.tsx
Normal file
21
src/partials/activities/items/ActivitiesUpcomingContent.tsx
Normal file
@ -0,0 +1,21 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { TimelinesWrapper } from '@/partials/timelines/default/item';
|
||||
|
||||
const ActivitiesUpcomingContent = () => {
|
||||
return (
|
||||
<TimelinesWrapper icon="share" line={true}>
|
||||
<div className="flex flex-col">
|
||||
<div className="text-sm text-gray-800">
|
||||
I couldn't resist sharing a sneak peek of our
|
||||
<Link to="/public-profile/profiles/blogger" className="text-sm link">
|
||||
upcoming content
|
||||
</Link>
|
||||
</div>
|
||||
<span className="text-xs text-gray-600">5 days ago, 4:07 PM</span>
|
||||
</div>
|
||||
</TimelinesWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export { ActivitiesUpcomingContent };
|
||||
22
src/partials/activities/items/ActivitiesVirtualTeam.tsx
Normal file
22
src/partials/activities/items/ActivitiesVirtualTeam.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { TimelinesWrapper } from '@/partials/timelines/default/item';
|
||||
|
||||
const ActivitiesVirtualTeam = () => {
|
||||
return (
|
||||
<TimelinesWrapper icon="like-shapes" line={false}>
|
||||
<div className="flex flex-col">
|
||||
<div className="text-sm font-medium text-gray-800">
|
||||
Hosted a virtual
|
||||
<Link to="/public-profile/profiles/creator" className="text-sm font-medium link">
|
||||
team-building event
|
||||
</Link>
|
||||
, fostering collaboration and strengthening bonds among team members.
|
||||
</div>
|
||||
<span className="text-xs font-medium text-gray-500">1 month ago, 13:56 PM</span>
|
||||
</div>
|
||||
</TimelinesWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export { ActivitiesVirtualTeam };
|
||||
16
src/partials/activities/items/index.ts
Normal file
16
src/partials/activities/items/index.ts
Normal file
@ -0,0 +1,16 @@
|
||||
export * from './ActivitiesAnniversary';
|
||||
export * from './ActivitiesBlogAnniversary';
|
||||
export * from './ActivitiesBloggingConference';
|
||||
export * from './ActivitiesDesignerWelcome';
|
||||
export * from './ActivitiesFollowersMilestone';
|
||||
export * from './ActivitiesInterview';
|
||||
export * from './ActivitiesLogin';
|
||||
export * from './ActivitiesNewArticle';
|
||||
export * from './ActivitiesNewProduct';
|
||||
export * from './ActivitiesNewTeam';
|
||||
export * from './ActivitiesPhotographyWorkshop';
|
||||
export * from './ActivitiesProductSpecific';
|
||||
export * from './ActivitiesProductWebinar';
|
||||
export * from './ActivitiesProjectStatus';
|
||||
export * from './ActivitiesUpcomingContent';
|
||||
export * from './ActivitiesVirtualTeam';
|
||||
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';
|
||||
43
src/partials/common/CommonAvatar.tsx
Normal file
43
src/partials/common/CommonAvatar.tsx
Normal file
@ -0,0 +1,43 @@
|
||||
import clsx from 'clsx';
|
||||
|
||||
import { KeenIcon } from '@/components';
|
||||
import { toAbsoluteUrl } from '@/utils/Assets';
|
||||
|
||||
interface IAvatarProps {
|
||||
image?: string;
|
||||
fallback?: string;
|
||||
icon?: string;
|
||||
iconClass?: string;
|
||||
badgeClass?: string;
|
||||
className?: string;
|
||||
imageClass?: string;
|
||||
}
|
||||
|
||||
const CommonAvatar = ({
|
||||
image,
|
||||
fallback,
|
||||
icon,
|
||||
iconClass,
|
||||
badgeClass,
|
||||
className,
|
||||
imageClass
|
||||
}: IAvatarProps) => {
|
||||
return (
|
||||
<div className={clsx(className && className)}>
|
||||
{image && (
|
||||
<img
|
||||
src={toAbsoluteUrl(`/media/avatars/${image}`)}
|
||||
className={clsx(imageClass && imageClass)}
|
||||
alt=""
|
||||
/>
|
||||
)}
|
||||
{!image && fallback && fallback}
|
||||
{!image && !fallback && icon && (
|
||||
<KeenIcon icon={icon} className={clsx(iconClass && iconClass)} />
|
||||
)}
|
||||
{badgeClass && <div className={clsx(badgeClass && badgeClass)}></div>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { CommonAvatar, type IAvatarProps };
|
||||
70
src/partials/common/CommonAvatars.tsx
Normal file
70
src/partials/common/CommonAvatars.tsx
Normal file
@ -0,0 +1,70 @@
|
||||
import clsx from 'clsx';
|
||||
|
||||
import { toAbsoluteUrl } from '@/utils/Assets';
|
||||
|
||||
interface IAvatarsItem {
|
||||
path?: string;
|
||||
filename?: string;
|
||||
fallback?: string;
|
||||
variant?: string;
|
||||
}
|
||||
interface IAvatarsItems extends Array<IAvatarsItem> {}
|
||||
|
||||
interface IAvatarsProps {
|
||||
size?: string;
|
||||
group: IAvatarsItem[];
|
||||
more?: { variant?: string; number?: number | string; label?: string };
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const CommonAvatars = ({ size, group, more, className }: IAvatarsProps) => {
|
||||
const avatarSize = size ? size : 'size-6';
|
||||
|
||||
const renderItem = (each: IAvatarsItem, index: number) => {
|
||||
return (
|
||||
<div key={index} className="flex">
|
||||
{each.filename || each.path ? (
|
||||
<img
|
||||
src={toAbsoluteUrl(each.path || `/media/avatars/${each.filename}`)}
|
||||
className={clsx(
|
||||
`hover:z-5 relative shrink-0 rounded-full ring-1 ring-light-light ${avatarSize}`
|
||||
)}
|
||||
alt=""
|
||||
/>
|
||||
) : each.fallback ? (
|
||||
<span
|
||||
className={clsx(
|
||||
`hover:z-5 relative inline-flex items-center justify-center shrink-0 rounded-full ring-1 font-semibold leading-none text-3xs ${avatarSize}`,
|
||||
each.variant
|
||||
)}
|
||||
>
|
||||
{each.fallback}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={clsx('flex -space-x-2', className && className)}>
|
||||
{group.map((each, index) => {
|
||||
return renderItem(each, index);
|
||||
})}
|
||||
|
||||
{more && (
|
||||
<div className="flex">
|
||||
<span
|
||||
className={clsx(
|
||||
`relative inline-flex items-center justify-center shrink-0 rounded-full ring-1 font-semibold leading-none text-3xs ${size} size-6`,
|
||||
more.variant
|
||||
)}
|
||||
>
|
||||
+{more.number || more.label}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { CommonAvatars, type IAvatarsItem, type IAvatarsItems, type IAvatarsProps };
|
||||
42
src/partials/common/CommonHexagonBadge.tsx
Normal file
42
src/partials/common/CommonHexagonBadge.tsx
Normal file
@ -0,0 +1,42 @@
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
interface IHexagonBadgeProps {
|
||||
size?: string;
|
||||
stroke?: string;
|
||||
fill?: string;
|
||||
badge?: ReactNode;
|
||||
}
|
||||
|
||||
const CommonHexagonBadge = ({ size, stroke, fill, badge }: IHexagonBadgeProps) => {
|
||||
return (
|
||||
<div className={`relative ${size} shrink-0`}>
|
||||
<svg
|
||||
className={`w-full h-full ${stroke} ${fill}`}
|
||||
width="44"
|
||||
height="48"
|
||||
viewBox="0 0 44 48"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M16 2.4641C19.7128 0.320509 24.2872 0.320508 28 2.4641L37.6506 8.0359C41.3634 10.1795 43.6506 14.141 43.6506
|
||||
18.4282V29.5718C43.6506 33.859 41.3634 37.8205 37.6506 39.9641L28 45.5359C24.2872 47.6795 19.7128 47.6795 16 45.5359L6.34937
|
||||
39.9641C2.63655 37.8205 0.349365 33.859 0.349365 29.5718V18.4282C0.349365 14.141 2.63655 10.1795 6.34937 8.0359L16 2.4641Z"
|
||||
fill=""
|
||||
/>
|
||||
<path
|
||||
d="M16.25 2.89711C19.8081 0.842838 24.1919 0.842837 27.75 2.89711L37.4006 8.46891C40.9587 10.5232 43.1506 14.3196 43.1506
|
||||
18.4282V29.5718C43.1506 33.6804 40.9587 37.4768 37.4006 39.5311L27.75 45.1029C24.1919 47.1572 19.8081 47.1572 16.25 45.1029L6.59937
|
||||
39.5311C3.04125 37.4768 0.849365 33.6803 0.849365 29.5718V18.4282C0.849365 14.3196 3.04125 10.5232 6.59937 8.46891L16.25 2.89711Z"
|
||||
stroke=""
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div className="absolute leading-none start-2/4 top-2/4 -translate-y-2/4 -translate-x-2/4 rtl:translate-x-2/4">
|
||||
{badge}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { CommonHexagonBadge, type IHexagonBadgeProps };
|
||||
36
src/partials/common/CommonRating.tsx
Normal file
36
src/partials/common/CommonRating.tsx
Normal file
@ -0,0 +1,36 @@
|
||||
import clsx from 'clsx';
|
||||
|
||||
interface IRatingProps {
|
||||
className?: string;
|
||||
rating: number;
|
||||
round?: number;
|
||||
}
|
||||
|
||||
const CommonRating = ({ className, rating, round }: IRatingProps) => {
|
||||
return (
|
||||
<div className={clsx('rating', className && className)}>
|
||||
{[...Array(5)].map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={clsx(
|
||||
'rating-label',
|
||||
index < rating ? 'checked' : '',
|
||||
index === rating && round ? 'indeterminate' : ''
|
||||
)}
|
||||
>
|
||||
{index === rating && round ? (
|
||||
<i
|
||||
className="rating-on ki-solid ki-star text-base leading-none"
|
||||
style={{ width: `${round * 100}%` }}
|
||||
></i>
|
||||
) : (
|
||||
<i className="rating-on ki-solid ki-star text-base leading-none"></i>
|
||||
)}
|
||||
<i className="rating-off ki-outline ki-star text-base leading-none"></i>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { CommonRating, type IRatingProps };
|
||||
4
src/partials/common/index.ts
Normal file
4
src/partials/common/index.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export * from './CommonAvatar';
|
||||
export * from './CommonAvatars';
|
||||
export * from './CommonRating';
|
||||
export * from './CommonHexagonBadge';
|
||||
40
src/partials/crud/CrudCardFooter.tsx
Normal file
40
src/partials/crud/CrudCardFooter.tsx
Normal file
@ -0,0 +1,40 @@
|
||||
import { KeenIcon } from '@/components';
|
||||
|
||||
const CrudCardFooter = () => {
|
||||
return (
|
||||
<div className="card-footer justify-center md:justify-between flex-col md:flex-row gap-5 text-gray-600 text-2sm font-medium">
|
||||
<div className="flex items-center gap-2 order-2 md:order-1">
|
||||
Show
|
||||
<select className="select select-sm w-16" name="perpage">
|
||||
<option value="5">5</option>
|
||||
<option value="10">10</option>
|
||||
<option value="25">25</option>
|
||||
<option value="50">50</option>
|
||||
</select>
|
||||
per page
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 order-1 md:order-2">
|
||||
<span>1-10 of 52</span>
|
||||
|
||||
<div className="pagination">
|
||||
<button className="btn" disabled>
|
||||
<KeenIcon icon="black-left" />
|
||||
</button>
|
||||
|
||||
<button className="btn">1</button>
|
||||
<button className="btn active">2</button>
|
||||
<button className="btn">3</button>
|
||||
<button className="btn">4</button>
|
||||
<button className="btn">5</button>
|
||||
|
||||
<button className="btn">
|
||||
<KeenIcon icon="black-right" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { CrudCardFooter };
|
||||
23
src/partials/crud/CrudDatatableToolbar.tsx
Normal file
23
src/partials/crud/CrudDatatableToolbar.tsx
Normal file
@ -0,0 +1,23 @@
|
||||
const CrudDatatableToolbar = () => {
|
||||
return (
|
||||
<div className="card-footer justify-center md:justify-between flex-col md:flex-row gap-5 text-gray-600 text-2sm font-medium">
|
||||
<div className="flex items-center gap-2 order-2 md:order-1">
|
||||
Show
|
||||
<select
|
||||
className="select select-sm w-16"
|
||||
name="perpage"
|
||||
data-datatable-size="true"
|
||||
></select>
|
||||
per page
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 order-1 md:order-2">
|
||||
<span data-datatable-info="true"></span>
|
||||
|
||||
<div className="pagination" data-datatable-pagination="true"></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { CrudDatatableToolbar };
|
||||
3
src/partials/crud/index.ts
Normal file
3
src/partials/crud/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
// export * from './CrudAvatarUpload';
|
||||
export * from './CrudCardFooter';
|
||||
export * from './CrudDatatableToolbar';
|
||||
120
src/partials/dropdowns/apps/DropdownApps.tsx
Normal file
120
src/partials/dropdowns/apps/DropdownApps.tsx
Normal file
@ -0,0 +1,120 @@
|
||||
import { toAbsoluteUrl } from '@/utils';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { MenuSub } from '@/components';
|
||||
import { useResponsive } from '@/hooks';
|
||||
|
||||
interface IDropdownAppsItem {
|
||||
logo: string;
|
||||
title: string;
|
||||
description: string;
|
||||
checkbox: boolean;
|
||||
}
|
||||
|
||||
const DropdownApps = () => {
|
||||
const desktopMode = useResponsive('up', 'lg');
|
||||
|
||||
const items: IDropdownAppsItem[] = [
|
||||
{
|
||||
logo: 'jira.svg',
|
||||
title: 'Jira',
|
||||
description: 'Project management',
|
||||
checkbox: false
|
||||
},
|
||||
{
|
||||
logo: 'inferno.svg',
|
||||
title: 'Inferno',
|
||||
description: 'Ensures healthcare app',
|
||||
checkbox: true
|
||||
},
|
||||
{
|
||||
logo: 'evernote.svg',
|
||||
title: 'Evernote',
|
||||
description: 'Notes management app',
|
||||
checkbox: true
|
||||
},
|
||||
{
|
||||
logo: 'gitlab.svg',
|
||||
title: 'Gitlab',
|
||||
description: 'DevOps platform',
|
||||
checkbox: false
|
||||
},
|
||||
{
|
||||
logo: 'google-webdev.svg',
|
||||
title: 'Google webdev',
|
||||
description: 'Building web experiences',
|
||||
checkbox: true
|
||||
}
|
||||
];
|
||||
|
||||
const buildHeader = () => {
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-2.5 text-2xs text-gray-600 font-medium px-5 py-3 border-b border-b-gray-200">
|
||||
<span>Apps</span>
|
||||
<span>Enabled</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const buildFooter = () => {
|
||||
return (
|
||||
<div className="grid p-5 border-t border-t-gray-200">
|
||||
<Link to="/account/api-keys" className="btn btn-sm btn-light justify-center">
|
||||
Go to Apps
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const buildList = (items: IDropdownAppsItem[]) => {
|
||||
return (
|
||||
<div className="flex flex-col scrollable-y-auto max-h-[400px] divide-y divide-gray-200">
|
||||
{items.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center justify-between flex-wrap gap-2 px-5 py-3.5"
|
||||
>
|
||||
<div className="flex items-center flex-wrap gap-2">
|
||||
<div className="flex items-center justify-center shrink-0 rounded-full bg-gray-100 border border-gray-200 size-10">
|
||||
<img
|
||||
src={toAbsoluteUrl(`/media/brand-logos/${item.logo}`)}
|
||||
className="size-6"
|
||||
alt={item.title}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<a
|
||||
href="#"
|
||||
className="text-2sm font-semibold text-gray-900 hover:text-primary-active"
|
||||
>
|
||||
{item.title}
|
||||
</a>
|
||||
<span className="text-2xs font-medium text-gray-600">{item.description}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 lg:gap-5">
|
||||
<label className="switch switch-sm">
|
||||
<input type="checkbox" defaultChecked={item.checkbox} />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<MenuSub rootClassName="w-full max-w-[320px]" className="light:border-gray-300">
|
||||
{buildHeader()}
|
||||
|
||||
<div className="scrollable-y-auto" style={{ maxHeight: desktopMode ? '400px' : '75vh' }}>
|
||||
{buildList(items)}
|
||||
</div>
|
||||
|
||||
{buildFooter()}
|
||||
</MenuSub>
|
||||
);
|
||||
};
|
||||
|
||||
export { DropdownApps };
|
||||
1
src/partials/dropdowns/apps/index.ts
Normal file
1
src/partials/dropdowns/apps/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './DropdownApps';
|
||||
106
src/partials/dropdowns/general/DropdownCard1.tsx
Normal file
106
src/partials/dropdowns/general/DropdownCard1.tsx
Normal file
@ -0,0 +1,106 @@
|
||||
import {
|
||||
KeenIcon,
|
||||
MenuArrow,
|
||||
MenuIcon,
|
||||
MenuItem,
|
||||
MenuLink,
|
||||
MenuSeparator,
|
||||
MenuSub,
|
||||
MenuTitle
|
||||
} from '@/components';
|
||||
import { useLanguage } from '@/i18n';
|
||||
|
||||
const DropdownCard1 = () => {
|
||||
const { isRTL } = useLanguage();
|
||||
|
||||
return (
|
||||
<MenuSub className="menu-default" rootClassName="w-full max-w-[200px]">
|
||||
<MenuItem>
|
||||
<MenuLink path="/account/activity">
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="cloud-change" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>Activity</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
<MenuLink path="#">
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="share" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>Share</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
toggle="dropdown"
|
||||
trigger="hover"
|
||||
dropdownProps={{
|
||||
placement: isRTL() ? 'left-start' : 'right-start',
|
||||
modifiers: [
|
||||
{
|
||||
name: 'offset',
|
||||
options: {
|
||||
offset: isRTL() ? [15, 0] : [-15, 0] // [skid, distance]
|
||||
}
|
||||
}
|
||||
]
|
||||
}}
|
||||
>
|
||||
<MenuLink>
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="notification-status" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>Notifications</MenuTitle>
|
||||
<MenuArrow>
|
||||
<KeenIcon icon="right" className="text-3xs rtl:transform rtl:rotate-180" />
|
||||
</MenuArrow>
|
||||
</MenuLink>
|
||||
<MenuSub className="menu-default" rootClassName="w-full max-w-[175px]">
|
||||
<MenuItem>
|
||||
<MenuLink path="/account/home/settings-sidebar">
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="sms" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>Email</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
<MenuLink path="/account/home/settings-sidebar">
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="message-notify" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>SMS</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
<MenuLink path="/account/home/settings-sidebar">
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="pencil" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>Push</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
</MenuSub>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
<MenuLink path="#">
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="dislike" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>Report</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
<MenuSeparator />
|
||||
<MenuItem>
|
||||
<MenuLink path="/account/home/settings-enterprise">
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="setting-3" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>Settings</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
</MenuSub>
|
||||
);
|
||||
};
|
||||
|
||||
export { DropdownCard1 };
|
||||
42
src/partials/dropdowns/general/DropdownCard2.tsx
Normal file
42
src/partials/dropdowns/general/DropdownCard2.tsx
Normal file
@ -0,0 +1,42 @@
|
||||
import { KeenIcon, MenuIcon, MenuItem, MenuLink, MenuSub, MenuTitle } from '@/components';
|
||||
|
||||
const DropdownCard2 = () => {
|
||||
return (
|
||||
<MenuSub className="menu-default" rootClassName="w-full max-w-[200px]">
|
||||
<MenuItem path="/account/home/settings-enterprise">
|
||||
<MenuLink>
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="setting-3" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>Settings</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
<MenuItem path="/account/members/import-members">
|
||||
<MenuLink>
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="some-files" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>Import</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
<MenuItem path="/account/activity">
|
||||
<MenuLink>
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="cloud-change" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>Activity</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
<MenuItem path="#">
|
||||
<MenuLink>
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="dislike" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>Report</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
</MenuSub>
|
||||
);
|
||||
};
|
||||
|
||||
export { DropdownCard2 };
|
||||
34
src/partials/dropdowns/general/DropdownCardItem1.tsx
Normal file
34
src/partials/dropdowns/general/DropdownCardItem1.tsx
Normal file
@ -0,0 +1,34 @@
|
||||
import { KeenIcon, MenuIcon, MenuItem, MenuLink, MenuSub, MenuTitle } from '@/components';
|
||||
|
||||
const DropdownCardItem1 = () => {
|
||||
return (
|
||||
<MenuSub className="menu-default" rootClassName="w-full max-w-[175px]">
|
||||
<MenuItem path="#">
|
||||
<MenuLink>
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="document" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>Details</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
<MenuItem path="#">
|
||||
<MenuLink>
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="share" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>Share</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
<MenuItem path="#">
|
||||
<MenuLink>
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="file-up" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>Export</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
</MenuSub>
|
||||
);
|
||||
};
|
||||
|
||||
export { DropdownCardItem1 };
|
||||
51
src/partials/dropdowns/general/DropdownCardItem2.tsx
Normal file
51
src/partials/dropdowns/general/DropdownCardItem2.tsx
Normal file
@ -0,0 +1,51 @@
|
||||
import {
|
||||
KeenIcon,
|
||||
MenuIcon,
|
||||
MenuItem,
|
||||
MenuLink,
|
||||
MenuSeparator,
|
||||
MenuSub,
|
||||
MenuTitle
|
||||
} from '@/components';
|
||||
|
||||
const DropdownCardItem2 = () => {
|
||||
return (
|
||||
<MenuSub className="menu-default" rootClassName="w-full max-w-[175px]">
|
||||
<MenuItem path="#">
|
||||
<MenuLink>
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="search-list" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>View</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
<MenuItem path="#">
|
||||
<MenuLink>
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="pencil" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>Edit</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
<MenuItem path="#">
|
||||
<MenuLink>
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="file-up" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>Export</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
<MenuSeparator />
|
||||
<MenuItem path="#">
|
||||
<MenuLink>
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="trash" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>Share</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
</MenuSub>
|
||||
);
|
||||
};
|
||||
|
||||
export { DropdownCardItem2 };
|
||||
87
src/partials/dropdowns/general/DropdownCrud1.tsx
Normal file
87
src/partials/dropdowns/general/DropdownCrud1.tsx
Normal file
@ -0,0 +1,87 @@
|
||||
import {
|
||||
KeenIcon,
|
||||
MenuArrow,
|
||||
MenuIcon,
|
||||
MenuItem,
|
||||
MenuLink,
|
||||
MenuSub,
|
||||
MenuTitle
|
||||
} from '@/components';
|
||||
import { useLanguage } from '@/i18n';
|
||||
|
||||
const DropdownCrud1 = () => {
|
||||
const { isRTL } = useLanguage();
|
||||
|
||||
return (
|
||||
<MenuSub className="menu-default" rootClassName="w-full max-w-[175px]">
|
||||
<MenuItem path="/account/home/settings-plain">
|
||||
<MenuLink>
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="add-files" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>Add</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
<MenuItem path="/account/members/import-members">
|
||||
<MenuLink>
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="file-down" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>Import</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
toggle="dropdown"
|
||||
trigger="hover"
|
||||
dropdownProps={{
|
||||
placement: isRTL() ? 'left-start' : 'right-start',
|
||||
modifiers: [
|
||||
{
|
||||
name: 'offset',
|
||||
options: {
|
||||
offset: isRTL() ? [15, 0] : [-15, 0] // [skid, distance]
|
||||
}
|
||||
}
|
||||
]
|
||||
}}
|
||||
>
|
||||
<MenuLink>
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="file-up" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>Export</MenuTitle>
|
||||
<MenuArrow>
|
||||
<KeenIcon icon="right" className="text-3xs rtl:transform rtl:rotate-180" />
|
||||
</MenuArrow>
|
||||
</MenuLink>
|
||||
<MenuSub className="menu-default" rootClassName="w-full max-w-[125px]">
|
||||
<MenuItem path="/account/home/settings-sidebar">
|
||||
<MenuLink>
|
||||
<MenuTitle>PDF</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
<MenuItem path="/account/home/settings-sidebar">
|
||||
<MenuLink>
|
||||
<MenuTitle>CVS</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
<MenuItem path="/account/home/settings-sidebar">
|
||||
<MenuLink>
|
||||
<MenuTitle>Excel</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
</MenuSub>
|
||||
</MenuItem>
|
||||
<MenuItem path="/account/security/privacy-settings">
|
||||
<MenuLink>
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="setting-3" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>Settings</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
</MenuSub>
|
||||
);
|
||||
};
|
||||
|
||||
export { DropdownCrud1 };
|
||||
96
src/partials/dropdowns/general/DropdownCrud2.tsx
Normal file
96
src/partials/dropdowns/general/DropdownCrud2.tsx
Normal file
@ -0,0 +1,96 @@
|
||||
import {
|
||||
KeenIcon,
|
||||
MenuArrow,
|
||||
MenuIcon,
|
||||
MenuItem,
|
||||
MenuLink,
|
||||
MenuSub,
|
||||
MenuTitle
|
||||
} from '@/components';
|
||||
import { useLanguage } from '@/i18n';
|
||||
|
||||
const DropdownCrud2 = () => {
|
||||
const { isRTL } = useLanguage();
|
||||
|
||||
return (
|
||||
<MenuSub className="menu-default" rootClassName="w-full max-w-[175px]">
|
||||
<MenuItem path="#">
|
||||
<MenuLink>
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="document" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>View</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
toggle="dropdown"
|
||||
trigger="hover"
|
||||
dropdownProps={{
|
||||
placement: isRTL() ? 'left-start' : 'right-start',
|
||||
modifiers: [
|
||||
{
|
||||
name: 'offset',
|
||||
options: {
|
||||
offset: isRTL() ? [15, 0] : [-15, 0] // [skid, distance]
|
||||
}
|
||||
}
|
||||
]
|
||||
}}
|
||||
>
|
||||
<MenuLink>
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="notification-status" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>Export</MenuTitle>
|
||||
<MenuArrow>
|
||||
<KeenIcon icon="right" className="text-3xs rtl:transform rtl:rotate-180" />
|
||||
</MenuArrow>
|
||||
</MenuLink>
|
||||
<MenuSub className="menu-default" rootClassName="w-full max-w-[175px]">
|
||||
<MenuItem path="/account/home/settings-sidebar">
|
||||
<MenuLink>
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="sms" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>Email</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
<MenuItem path="/account/home/settings-sidebar">
|
||||
<MenuLink>
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="message-notify" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>SMS</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
<MenuItem path="/account/home/settings-sidebar">
|
||||
<MenuLink>
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="notification-status" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>Push</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
</MenuSub>
|
||||
</MenuItem>
|
||||
<MenuItem path="#">
|
||||
<MenuLink>
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="pencil" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>Edit</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
<MenuItem path="#">
|
||||
<MenuLink>
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="trash" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>Delete</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
</MenuSub>
|
||||
);
|
||||
};
|
||||
|
||||
export { DropdownCrud2 };
|
||||
60
src/partials/dropdowns/general/DropdownCrudItem1.tsx
Normal file
60
src/partials/dropdowns/general/DropdownCrudItem1.tsx
Normal file
@ -0,0 +1,60 @@
|
||||
import {
|
||||
KeenIcon,
|
||||
MenuIcon,
|
||||
MenuItem,
|
||||
MenuLink,
|
||||
MenuSeparator,
|
||||
MenuSub,
|
||||
MenuTitle
|
||||
} from '@/components';
|
||||
|
||||
const DropdownCrudItem1 = () => {
|
||||
return (
|
||||
<MenuSub className="menu-default" rootClassName="w-full max-w-[175px]">
|
||||
<MenuItem path="#">
|
||||
<MenuLink>
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="search-list" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>View</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
<MenuItem path="#">
|
||||
<MenuLink>
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="file-up" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>Export</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
<MenuSeparator />
|
||||
<MenuItem path="#">
|
||||
<MenuLink>
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="pencil" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>Edit</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
<MenuItem path="#">
|
||||
<MenuLink>
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="copy" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>Make a copy</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
<MenuSeparator />
|
||||
<MenuItem path="#">
|
||||
<MenuLink>
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="trash" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>Remove</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
</MenuSub>
|
||||
);
|
||||
};
|
||||
|
||||
export { DropdownCrudItem1 };
|
||||
51
src/partials/dropdowns/general/DropdownCrudItem2.tsx
Normal file
51
src/partials/dropdowns/general/DropdownCrudItem2.tsx
Normal file
@ -0,0 +1,51 @@
|
||||
import {
|
||||
KeenIcon,
|
||||
MenuIcon,
|
||||
MenuItem,
|
||||
MenuLink,
|
||||
MenuSeparator,
|
||||
MenuSub,
|
||||
MenuTitle
|
||||
} from '@/components';
|
||||
|
||||
const DropdownCrudItem2 = () => {
|
||||
return (
|
||||
<MenuSub className="menu-default" rootClassName="w-full max-w-[175px]">
|
||||
<MenuItem path="#">
|
||||
<MenuLink>
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="document" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>View</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
<MenuItem path="#">
|
||||
<MenuLink>
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="pencil" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>Edit</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
<MenuItem path="#">
|
||||
<MenuLink>
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="copy" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>Make a copy</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
<MenuSeparator />
|
||||
<MenuItem path="#">
|
||||
<MenuLink>
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="trash" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>Delete</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
</MenuSub>
|
||||
);
|
||||
};
|
||||
|
||||
export { DropdownCrudItem2 };
|
||||
8
src/partials/dropdowns/general/index.ts
Normal file
8
src/partials/dropdowns/general/index.ts
Normal file
@ -0,0 +1,8 @@
|
||||
export * from './DropdownCard1';
|
||||
export * from './DropdownCard2';
|
||||
export * from './DropdownCardItem1';
|
||||
export * from './DropdownCardItem2';
|
||||
export * from './DropdownCrud1';
|
||||
export * from './DropdownCrud2';
|
||||
export * from './DropdownCrudItem1';
|
||||
export * from './DropdownCrudItem2';
|
||||
96
src/partials/dropdowns/user/DropdownUser.tsx
Normal file
96
src/partials/dropdowns/user/DropdownUser.tsx
Normal file
@ -0,0 +1,96 @@
|
||||
import { Fragment } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { getAuth, useAuthContext } from '@/auth';
|
||||
|
||||
import { toAbsoluteUrl } from '@/utils';
|
||||
// import { DropdownUserLanguages } from './DropdownUserLanguages';
|
||||
import { KeenIcon } from '@/components';
|
||||
import {
|
||||
MenuItem,
|
||||
MenuLink,
|
||||
MenuSub,
|
||||
MenuTitle,
|
||||
MenuSeparator,
|
||||
MenuArrow,
|
||||
MenuIcon
|
||||
} from '@/components/menu';
|
||||
|
||||
interface IDropdownUserProps {
|
||||
menuItemRef: any;
|
||||
}
|
||||
|
||||
// const cachedUser = getAuth()?.user;
|
||||
// console.log('cachedUser :', cachedUser);
|
||||
// const parsedUser = cachedUser ? cachedUser : null;
|
||||
|
||||
const DropdownUser = ({ menuItemRef }: IDropdownUserProps) => {
|
||||
const { logout, auth } = useAuthContext();
|
||||
|
||||
const buildHeader = () => {
|
||||
return (
|
||||
<div className="flex items-center justify-between px-5 py-1.5 gap-1.5">
|
||||
<div className="flex items-center gap-2">
|
||||
{/* <img
|
||||
className="size-9 rounded-full border-2 border-success"
|
||||
src={toAbsoluteUrl('/media/avatars/300-2.png')}
|
||||
alt=""
|
||||
/> */}
|
||||
<div className="flex flex-col">
|
||||
<p className="text-[14px] text-gray-800 font-semibold">{auth?.user.name}</p>
|
||||
<p className="text-xs text-gray-600 hover:text-primary font-medium leading-none">
|
||||
{auth?.user.email}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const buildMenu = () => {
|
||||
return (
|
||||
<Fragment>
|
||||
<MenuSeparator />
|
||||
<div className="flex flex-col">
|
||||
<MenuItem>
|
||||
<MenuLink path="/account/home/user-profile">
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="profile-circle" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>
|
||||
<FormattedMessage id="USER.MENU.MY_PROFILE" />
|
||||
</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
{/* <DropdownUserLanguages menuItemRef={menuItemRef} /> */}
|
||||
<MenuSeparator />
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
const buildFooter = () => {
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<div className="menu-item px-4 py-1.5">
|
||||
<a onClick={logout} className="btn btn-sm btn-light justify-center">
|
||||
<FormattedMessage id="USER.MENU.LOGOUT" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<MenuSub
|
||||
className="menu-default light:border-gray-300 w-[200px] md:w-[250px]"
|
||||
rootClassName="p-0"
|
||||
>
|
||||
{buildHeader()}
|
||||
{buildMenu()}
|
||||
{buildFooter()}
|
||||
</MenuSub>
|
||||
);
|
||||
};
|
||||
|
||||
export { DropdownUser };
|
||||
84
src/partials/dropdowns/user/DropdownUserLanguages.tsx
Normal file
84
src/partials/dropdowns/user/DropdownUserLanguages.tsx
Normal file
@ -0,0 +1,84 @@
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { KeenIcon } from '@/components';
|
||||
import { MenuItem, MenuLink, MenuTitle, MenuIcon, MenuBadge, MenuSub } from '@/components/menu';
|
||||
import clsx from 'clsx';
|
||||
import { I18N_LANGUAGES, TLanguage, useLanguage } from '@/i18n';
|
||||
|
||||
interface IDropdownUserLanguagesProps {
|
||||
menuItemRef: any;
|
||||
}
|
||||
|
||||
const DropdownUserLanguages = ({ menuItemRef }: IDropdownUserLanguagesProps) => {
|
||||
const { currentLanguage, changeLanguage } = useLanguage();
|
||||
const { isRTL } = useLanguage();
|
||||
|
||||
const handleLanguage = (lang: TLanguage) => {
|
||||
changeLanguage(lang);
|
||||
|
||||
if (menuItemRef.current) {
|
||||
menuItemRef.current.hide(); // Call the closeMenu method to hide the submenu
|
||||
}
|
||||
};
|
||||
|
||||
const buildItems = () => {
|
||||
return I18N_LANGUAGES.map((item, index) => (
|
||||
<MenuItem
|
||||
key={index}
|
||||
className={clsx(item.code === currentLanguage.code && 'active')}
|
||||
onClick={() => {
|
||||
handleLanguage(item);
|
||||
}}
|
||||
>
|
||||
<MenuLink className="h-10">
|
||||
<MenuIcon>
|
||||
<img src={item.flag} className="inline-block size-4 rounded-full" alt={item.label} />
|
||||
</MenuIcon>
|
||||
<MenuTitle>{item.label}</MenuTitle>
|
||||
{item.code === currentLanguage.code && (
|
||||
<MenuBadge>
|
||||
<KeenIcon icon="check-circle" style="solid" className="text-success text-base" />
|
||||
</MenuBadge>
|
||||
)}
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
));
|
||||
};
|
||||
|
||||
return (
|
||||
<MenuItem
|
||||
toggle="dropdown"
|
||||
trigger="hover"
|
||||
dropdownProps={{
|
||||
placement: isRTL() ? 'left-start' : 'right-start',
|
||||
modifiers: [
|
||||
{
|
||||
name: 'offset',
|
||||
options: {
|
||||
offset: isRTL() ? [-10, 0] : [10, 0] // [skid, distance]
|
||||
}
|
||||
}
|
||||
]
|
||||
}}
|
||||
>
|
||||
<MenuLink>
|
||||
<MenuIcon>
|
||||
<KeenIcon icon="icon" />
|
||||
</MenuIcon>
|
||||
<MenuTitle>
|
||||
<FormattedMessage id="USER.MENU.LANGUAGE" />
|
||||
</MenuTitle>
|
||||
<div className="flex items-center gap-1.5 rounded-md border border-gray-300 text-gray-600 p-1.5 text-2xs font-medium shrink-0">
|
||||
{currentLanguage.label}
|
||||
<img
|
||||
src={currentLanguage.flag}
|
||||
className="inline-block size-3.5 rounded-full"
|
||||
alt="{currentLanguage.label}"
|
||||
/>
|
||||
</div>
|
||||
</MenuLink>
|
||||
<MenuSub className="menu-default light:border-gray-300 w-[190px]">{buildItems()}</MenuSub>
|
||||
</MenuItem>
|
||||
);
|
||||
};
|
||||
|
||||
export { DropdownUserLanguages };
|
||||
2
src/partials/dropdowns/user/index.ts
Normal file
2
src/partials/dropdowns/user/index.ts
Normal file
@ -0,0 +1,2 @@
|
||||
export * from './DropdownUser';
|
||||
export * from './DropdownUserLanguages';
|
||||
79
src/partials/heros/UserProfileHero.tsx
Normal file
79
src/partials/heros/UserProfileHero.tsx
Normal file
@ -0,0 +1,79 @@
|
||||
import { KeenIcon } from '@/components';
|
||||
import { Container } from '@/components/container';
|
||||
|
||||
import { IUserProfileHeroInfo, IUserProfileHeroProps } from './types';
|
||||
import { toAbsoluteUrl } from '@/utils';
|
||||
import { useSettings } from '@/providers';
|
||||
|
||||
const UserProfileHero = ({ image, name, info }: IUserProfileHeroProps) => {
|
||||
const { getThemeMode } = useSettings();
|
||||
|
||||
const buildInfo = (info: IUserProfileHeroInfo[]) => {
|
||||
return info.map((item, index) => {
|
||||
return (
|
||||
<div className="flex gap-1.25 items-center" key={`info-${index}`}>
|
||||
{item.icon && <KeenIcon icon={item.icon} className="text-gray-500 text-sm" />}
|
||||
|
||||
{item.email ? (
|
||||
<a
|
||||
href="mailto: {{ item.email }}"
|
||||
target="_blank"
|
||||
className="text-gray-600 font-medium hover:text-primary"
|
||||
rel="noreferrer"
|
||||
>
|
||||
{item.email}
|
||||
</a>
|
||||
) : (
|
||||
<span className="text-gray-600 font-medium">{item.label}</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
const render = () => {
|
||||
return (
|
||||
<div
|
||||
className="bg-center bg-cover bg-no-repeat hero-bg"
|
||||
style={{
|
||||
backgroundImage:
|
||||
getThemeMode() === 'dark'
|
||||
? `url('${toAbsoluteUrl('/media/images/2600x1200/bg-1-dark.png')}')`
|
||||
: `url('${toAbsoluteUrl('/media/images/2600x1200/bg-1.png')}')`
|
||||
}}
|
||||
>
|
||||
<Container>
|
||||
<div className="flex flex-col items-center gap-2 lg:gap-3.5 py-4 lg:pt-5 lg:pb-10">
|
||||
{image}
|
||||
|
||||
<div className="flex items-center gap-1.5">
|
||||
<div className="text-lg leading-5 font-semibold text-gray-900">{name}</div>
|
||||
|
||||
<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 gap-1 lg:gap-4.5 text-sm">
|
||||
{buildInfo(info)}
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return render();
|
||||
};
|
||||
|
||||
export { UserProfileHero };
|
||||
1
src/partials/heros/index.ts
Normal file
1
src/partials/heros/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './UserProfileHero';
|
||||
13
src/partials/heros/types.ts
Normal file
13
src/partials/heros/types.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
export interface IUserProfileHeroInfo {
|
||||
email?: string;
|
||||
label?: string;
|
||||
icon?: string;
|
||||
}
|
||||
|
||||
export interface IUserProfileHeroProps {
|
||||
image?: ReactNode;
|
||||
name?: string;
|
||||
info: IUserProfileHeroInfo[];
|
||||
}
|
||||
131
src/partials/menu/NavbarMenu.tsx
Normal file
131
src/partials/menu/NavbarMenu.tsx
Normal file
@ -0,0 +1,131 @@
|
||||
import { KeenIcon } from '@/components';
|
||||
import {
|
||||
Menu,
|
||||
TMenuConfig,
|
||||
MenuItem,
|
||||
MenuLink,
|
||||
MenuSub,
|
||||
MenuTitle,
|
||||
MenuArrow
|
||||
} from '@/components/menu';
|
||||
import { useLanguage } from '@/i18n';
|
||||
|
||||
const NavbarMenu = ({ items }: { items: TMenuConfig }) => {
|
||||
const { isRTL } = useLanguage();
|
||||
|
||||
const buildMenu = (items: TMenuConfig) => {
|
||||
return items.map((item, index) => {
|
||||
if (item.children) {
|
||||
return (
|
||||
<MenuItem
|
||||
key={index}
|
||||
className="border-b-2 border-b-transparent menu-item-active:border-b-primary menu-item-here:border-b-primary"
|
||||
toggle="dropdown"
|
||||
trigger="hover"
|
||||
dropdownProps={{
|
||||
placement: isRTL() ? 'bottom-end' : 'bottom-start',
|
||||
modifiers: [
|
||||
{
|
||||
name: 'offset',
|
||||
options: {
|
||||
offset: [0, 0] // [skid, distance]
|
||||
}
|
||||
}
|
||||
]
|
||||
}}
|
||||
>
|
||||
<MenuLink className="gap-1.5 pb-2 lg:pb-4 px-2">
|
||||
<MenuTitle className="text-nowrap text-sm text-gray-700 menu-item-active:text-primary menu-item-active:font-medium menu-item-here:text-primary menu-item-here:font-medium menu-item-show:text-primary menu-link-hover:text-primary">
|
||||
{item.title}
|
||||
</MenuTitle>
|
||||
|
||||
<MenuArrow>
|
||||
<KeenIcon
|
||||
icon="down"
|
||||
className="text-2xs text-gray-500 menu-item-active:text-primary menu-item-here:text-primary menu-item-show:text-primary menu-link-hover:text-primary"
|
||||
/>
|
||||
</MenuArrow>
|
||||
</MenuLink>
|
||||
<MenuSub className="menu-default" rootClassName="py-2 min-w-[200px]">
|
||||
{buildMenuSub(item.children)}
|
||||
</MenuSub>
|
||||
</MenuItem>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<MenuItem
|
||||
key={index}
|
||||
className="border-b-2 border-b-transparent menu-item-active:border-b-primary menu-item-here:border-b-primary"
|
||||
>
|
||||
<MenuLink path={item.path} className="gap-1.5 pb-2 lg:pb-4 px-2">
|
||||
<MenuTitle className="text-nowrap font-medium text-sm text-gray-700 menu-item-active:text-primary menu-item-active:font-semibold menu-item-here:text-primary menu-item-here:font-semibold menu-item-show:text-primary menu-link-hover:text-primary">
|
||||
{item.title}
|
||||
</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const buildMenuSub = (items: TMenuConfig) => {
|
||||
return items.map((item, index) => {
|
||||
if (item.children) {
|
||||
return (
|
||||
<MenuItem
|
||||
key={index}
|
||||
toggle="dropdown"
|
||||
trigger="hover"
|
||||
dropdownProps={{
|
||||
placement: isRTL() ? 'left-start' : 'right-start',
|
||||
modifiers: [
|
||||
{
|
||||
name: 'offset',
|
||||
options: {
|
||||
offset: isRTL() ? [10, 0] : [-10, 0] // [skid, distance]
|
||||
}
|
||||
}
|
||||
]
|
||||
}}
|
||||
>
|
||||
<MenuLink>
|
||||
<MenuTitle>{item.title}</MenuTitle>
|
||||
{buildMenuToggle()}
|
||||
</MenuLink>
|
||||
<MenuSub className="menu-default" rootClassName="py min-w-[200px]">
|
||||
{buildMenuSub(item.children)}
|
||||
</MenuSub>
|
||||
</MenuItem>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<MenuItem key={index}>
|
||||
<MenuLink path={item.path}>
|
||||
<MenuTitle>{item.title}</MenuTitle>
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const buildMenuToggle = () => {
|
||||
return (
|
||||
<MenuArrow>
|
||||
<KeenIcon icon="down" className="text-2xs [.menu-dropdown_&]:-rotate-90" />
|
||||
</MenuArrow>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="scrollable-x-auto">
|
||||
<Menu highlight={true} className="gap-3">
|
||||
{buildMenu(items)}
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { NavbarMenu };
|
||||
59
src/partials/menu/ScrollspyMenu.tsx
Normal file
59
src/partials/menu/ScrollspyMenu.tsx
Normal file
@ -0,0 +1,59 @@
|
||||
export interface IScrollspyMenuItem {
|
||||
title: string;
|
||||
target?: string;
|
||||
active?: boolean;
|
||||
children?: IScrollspyMenuItem[];
|
||||
}
|
||||
export interface IScrollspyMenuItems extends Array<IScrollspyMenuItem> {}
|
||||
|
||||
export interface IScrollspyMenuProps {
|
||||
items: IScrollspyMenuItem[];
|
||||
}
|
||||
|
||||
const ScrollspyMenu = ({ items }: IScrollspyMenuProps) => {
|
||||
const buildAnchor = (item: IScrollspyMenuItem, index: number, indent: boolean = false) => {
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
data-scrollspy-anchor={item.target}
|
||||
className={`cursor-pointer flex items-center rounded-lg pl-2.5 pr-2.5 py-2.5 border border-transparent text-gray-800 scrollspy-active:bg-secondary-active scrollspy-active:text-primary scrollspy-active:font-medium dark:hover:bg-coal-300 dark:hover:border-gray-100 hover:rounded-lg dark:scrollspy-active:bg-coal-300 dark:scrollspy-active:border-gray-100 ${
|
||||
indent ? 'gap-3.5' : 'gap-1.5'
|
||||
} ${item.active ? 'active' : ''} text-2sm hover:text-primary`}
|
||||
>
|
||||
<span className="flex w-1.5 relative before:absolute start-px rtl:-start-[5px] before:top-0 before:size-1.5 before:rounded-full before:-translate-x-2/4 before:-translate-y-2/4 scrollspy-active:before:bg-primary"></span>
|
||||
{item.title}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const buildSubAnchors = (items: IScrollspyMenuItems) => {
|
||||
return items.map((item, index) => {
|
||||
return buildAnchor(item, index, true);
|
||||
});
|
||||
};
|
||||
|
||||
const renderChildren = (items: IScrollspyMenuItems) => {
|
||||
return items.map((item, index) => {
|
||||
if (item.children) {
|
||||
return (
|
||||
<div key={index} className="flex flex-col">
|
||||
<div className="ps-6 pe-2.5 py-2.5 text-2sm font-semibold text-gray-900">
|
||||
{item.title}
|
||||
</div>
|
||||
<div className="flex flex-col">{buildSubAnchors(item.children)}</div>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return buildAnchor(item, index);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col grow relative before:absolute before:start-[11px] before:top-0 before:bottom-0 before:border-s before:border-gray-200">
|
||||
{renderChildren(items)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { ScrollspyMenu };
|
||||
2
src/partials/menu/index.ts
Normal file
2
src/partials/menu/index.ts
Normal file
@ -0,0 +1,2 @@
|
||||
export * from './NavbarMenu';
|
||||
export * from './ScrollspyMenu';
|
||||
39
src/partials/menu/mega-menu/MegaMenuSubAccount.tsx
Normal file
39
src/partials/menu/mega-menu/MegaMenuSubAccount.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
import { TMenuConfig, IMenuItemConfig, MenuSub } from '@/components/menu';
|
||||
import { MegaMenuSubHighlighted, MegaMenuSubDefault } from './components';
|
||||
|
||||
const MegaMenuSubAccount = (items: TMenuConfig) => {
|
||||
const myAccountItem = items[2];
|
||||
const myAccountItemGeneral = myAccountItem.children ? myAccountItem.children[0] : {};
|
||||
const myAccountItemOthers = myAccountItem.children ? myAccountItem.children[1] : {};
|
||||
|
||||
return (
|
||||
<MenuSub className="flex-col lg:flex-row gap-0 w-full lg:max-w-[1240px]">
|
||||
<div className="lg:w-[250px] mt-2 lg:mt-0 lg:border-r lg:border-e-gray-200 rounded-xl lg:rounded-s-xl lg:rounded-e-none shrink-0 px-3 py-4 lg:p-7.5 bg-light-active dark:bg-coal-500 dark:lg:border-e-coal-100">
|
||||
<h3 className="text-sm text-gray-800 font-semibold leading-none ps-2.5 mb-2 lg:mb-5">
|
||||
{myAccountItemGeneral.title}
|
||||
</h3>
|
||||
<div className="menu menu-default menu-fit flex-col">
|
||||
{myAccountItemGeneral.children && MegaMenuSubHighlighted(myAccountItemGeneral.children)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-4 pb-2 lg:p-7.5 lg:pb-5 grow">
|
||||
<div className="grid lg:grid-cols-5 gap-5">
|
||||
{myAccountItemOthers.children?.map((item: IMenuItemConfig, index) => {
|
||||
return (
|
||||
<div key={`item-${index}`} className="flex flex-col">
|
||||
<h3 className="text-sm text-gray-800 font-semibold leading-none ps-2.5 mb-2 lg:mb-5">
|
||||
{item.title}
|
||||
</h3>
|
||||
<div className="menu menu-default menu-fit flex-col">
|
||||
{item.children && MegaMenuSubDefault(item.children)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</MenuSub>
|
||||
);
|
||||
};
|
||||
|
||||
export { MegaMenuSubAccount };
|
||||
47
src/partials/menu/mega-menu/MegaMenuSubAuth.tsx
Normal file
47
src/partials/menu/mega-menu/MegaMenuSubAuth.tsx
Normal file
@ -0,0 +1,47 @@
|
||||
import { IMenuItemConfig, TMenuConfig, MenuSub } from '@/components/menu';
|
||||
import { MegaMenuFooter, MegaMenuSubDefault, MegaMenuSubHighlighted } from './components';
|
||||
|
||||
const MegaMenuSubAuth = (items: TMenuConfig) => {
|
||||
const authItem = items[4];
|
||||
const authItemGeneral = authItem.children ? authItem.children[0] : {};
|
||||
const authItemOthers = authItem.children ? authItem.children[1] : {};
|
||||
|
||||
return (
|
||||
<MenuSub className="flex-col gap-0 w-full lg:max-w-[670px]">
|
||||
<div className="flex flex-col lg:flex-row">
|
||||
<div className="pt-4 pb-2 lg:p-7.5 lg:pb-5 grow">
|
||||
<div className="grid lg:grid-cols-2 gap-5">
|
||||
{authItemGeneral.children?.map((item: IMenuItemConfig, index) => {
|
||||
return (
|
||||
<div key={`item-${index}`} className="flex flex-col">
|
||||
<h3 className="text-sm text-gray-800 font-semibold leading-none ps-2.5 mb-2 lg:mb-5">
|
||||
{item.title}
|
||||
{item.badge && (
|
||||
<span className="start-auto badge badge-xs badge-primary badge-outline">
|
||||
{item.badge}
|
||||
</span>
|
||||
)}
|
||||
</h3>
|
||||
<div className="menu menu-default menu-fit flex-col">
|
||||
{item.children && MegaMenuSubDefault(item.children)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="lg:w-[250px] mb-4 lg:mb-0 lg:border-l lg:border-s-gray-200 rounded-xl lg:rounded-e-xl lg:rounded-s-none shrink-0 px-3 py-4 lg:p-7.5 bg-light-active dark:bg-coal-500 dark:lg:border-l-coal-100">
|
||||
<h3 className="text-sm text-gray-800 font-semibold leading-none ps-2.5 mb-5">
|
||||
{authItemOthers.title}
|
||||
</h3>
|
||||
<div className="menu menu-default menu-fit flex-col">
|
||||
{authItemOthers.children && MegaMenuSubHighlighted(authItemOthers.children)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<MegaMenuFooter />
|
||||
</MenuSub>
|
||||
);
|
||||
};
|
||||
|
||||
export { MegaMenuSubAuth };
|
||||
14
src/partials/menu/mega-menu/MegaMenuSubHelp.tsx
Normal file
14
src/partials/menu/mega-menu/MegaMenuSubHelp.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import { TMenuConfig, MenuSub } from '@/components/menu';
|
||||
import { MegaMenuSubDropdown } from './components';
|
||||
|
||||
const MegaMenuSubHelp = (items: TMenuConfig) => {
|
||||
const helpItem = items[5];
|
||||
|
||||
return (
|
||||
<MenuSub className="menu-default py-2.5 lg:w-[225px]">
|
||||
{helpItem.children && MegaMenuSubDropdown(helpItem.children)}
|
||||
</MenuSub>
|
||||
);
|
||||
};
|
||||
|
||||
export { MegaMenuSubHelp };
|
||||
47
src/partials/menu/mega-menu/MegaMenuSubNetwork.tsx
Normal file
47
src/partials/menu/mega-menu/MegaMenuSubNetwork.tsx
Normal file
@ -0,0 +1,47 @@
|
||||
import { TMenuConfig, IMenuItemConfig, MenuSub } from '@/components/menu';
|
||||
import { MegaMenuSubDefault, MegaMenuSubHighlighted, MegaMenuFooter } from './components';
|
||||
|
||||
const MegaMenuSubNetwork = (items: TMenuConfig) => {
|
||||
const networkItem = items[3];
|
||||
const networkItemGeneral = networkItem.children ? networkItem.children[0] : {};
|
||||
const networkItemOthers = networkItem.children ? networkItem.children[1] : {};
|
||||
|
||||
return (
|
||||
<MenuSub className="flex-col gap-0 w-full lg:max-w-[670px]">
|
||||
<div className="flex flex-col lg:flex-row">
|
||||
<div className="flex flex-col gap-5 lg:w-[250px] mt-2 lg:mt-0 lg:border-r lg:border-r-gray-200 rounded-xl lg:rounded-none lg:rounded-tl-xl shrink-0 px-3 py-4 lg:p-7.5 bg-light-active dark:bg-coal-500 dark:lg:border-e-coal-100">
|
||||
<h3 className="text-sm text-gray-800 font-semibold leading-none ps-2.5 h-3.5">
|
||||
{networkItemGeneral.title}
|
||||
</h3>
|
||||
<div className="menu menu-default menu-fit flex-col">
|
||||
{networkItemGeneral.children && MegaMenuSubHighlighted(networkItemGeneral.children)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-4 pb-2 lg:p-7.5 lg:pb-5 grow">
|
||||
<div className="grid lg:grid-cols-2 gap-5">
|
||||
{networkItemOthers.children?.map((item: IMenuItemConfig, index) => {
|
||||
return (
|
||||
<div key={`item-${index}`} className="flex flex-col gap-5">
|
||||
<h3 className="flex items-center gap-1.5 text-sm text-gray-800 font-semibold leading-none ps-2.5 h-3.5">
|
||||
{item.title}
|
||||
{item.badge && (
|
||||
<span className="start-auto badge badge-xs badge-primary badge-outline">
|
||||
{item.badge}
|
||||
</span>
|
||||
)}
|
||||
</h3>
|
||||
<div className="menu menu-default menu-fit flex-col">
|
||||
{item.children && MegaMenuSubDefault(item.children)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<MegaMenuFooter />
|
||||
</MenuSub>
|
||||
);
|
||||
};
|
||||
|
||||
export { MegaMenuSubNetwork };
|
||||
36
src/partials/menu/mega-menu/MegaMenuSubProfiles.tsx
Normal file
36
src/partials/menu/mega-menu/MegaMenuSubProfiles.tsx
Normal file
@ -0,0 +1,36 @@
|
||||
import { TMenuConfig, IMenuItemConfig, MenuSub } from '@/components/menu';
|
||||
import { MegaMenuSubDefault, MegaMenuFooter } from './components';
|
||||
|
||||
const MegaMenuSubProfiles = (items: TMenuConfig) => {
|
||||
const publicProfilesItem = items[1];
|
||||
|
||||
return (
|
||||
<MenuSub className="w-full gap-0 lg:max-w-[875px]">
|
||||
<div className="pt-4 pb-2 lg:p-7.5">
|
||||
<div className="grid lg:grid-cols-2 gap-5 lg:gap-10">
|
||||
{publicProfilesItem.children?.map((item: IMenuItemConfig, index) => {
|
||||
return (
|
||||
<div key={`item-${index}`} className="menu menu-default menu-fit flex-col">
|
||||
<h3 className="text-sm text-gray-800 font-semibold leading-none ps-2.5 mb-2 lg:mb-5">
|
||||
{item.title}
|
||||
</h3>
|
||||
<div className="grid lg:grid-cols-2 lg:gap-5">
|
||||
{item.children?.map((item: IMenuItemConfig, index) => {
|
||||
return (
|
||||
<div key={`item-${index}`} className="flex flex-col">
|
||||
{item.children && MegaMenuSubDefault(item.children)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<MegaMenuFooter />
|
||||
</MenuSub>
|
||||
);
|
||||
};
|
||||
|
||||
export { MegaMenuSubProfiles };
|
||||
19
src/partials/menu/mega-menu/components/MegaMenuFooter.tsx
Normal file
19
src/partials/menu/mega-menu/components/MegaMenuFooter.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
const MegaMenuFooter = () => {
|
||||
return (
|
||||
<div className="flex flex-wrap items-center lg:justify-between rounded-xl lg:rounded-t-none bg-light-active dark:bg-coal-500 border border-gray-300 lg:border-0 lg:border-t lg:border-t-gray-300 dark:lg:border-t-gray-100 px-4 py-4 lg:px-7.5 lg:py-5 gap-2.5">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="text-md font-semibold text-gray-900 leading-none">
|
||||
Read to Get Started ?
|
||||
</div>
|
||||
<div className="text-2sm fomt-medium text-gray-600">
|
||||
Take your docs to the next level of Metronic
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" className="btn btn-sm btn-dark">
|
||||
Read Documentation
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { MegaMenuFooter };
|
||||
@ -0,0 +1,51 @@
|
||||
import { KeenIcon } from '@/components';
|
||||
import { TMenuConfig, MenuItem, MenuLink, MenuTitle, MenuIcon, MenuBadge } from '@/components/menu';
|
||||
import clsx from 'clsx';
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
const MegaMenuSubDefault = (items: TMenuConfig) => {
|
||||
const buildItems = (items: TMenuConfig): ReactNode => {
|
||||
return items.map((item, index) => {
|
||||
if (item.children) {
|
||||
return (
|
||||
<div key={index}>
|
||||
<MenuItem className="pt-1">
|
||||
<span className="text-gray-600 font-medium text-2sm p-2.5">{item.title}</span>
|
||||
</MenuItem>
|
||||
{buildItems(item.children)}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<MenuItem key={index}>
|
||||
<MenuLink path={item.path}>
|
||||
{item.icon && (
|
||||
<MenuIcon>
|
||||
<KeenIcon icon={item.icon} />
|
||||
</MenuIcon>
|
||||
)}
|
||||
|
||||
<MenuTitle className={clsx('grow-0')}>{item.title}</MenuTitle>
|
||||
|
||||
{item.disabled && (
|
||||
<MenuBadge>
|
||||
<span className="badge badge-xs">Soon</span>
|
||||
</MenuBadge>
|
||||
)}
|
||||
|
||||
{item.badge && (
|
||||
<MenuBadge>
|
||||
<span className="badge badge-primary badge-outline badge-xs">{item.badge}</span>
|
||||
</MenuBadge>
|
||||
)}
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return buildItems(items);
|
||||
};
|
||||
|
||||
export { MegaMenuSubDefault };
|
||||
@ -0,0 +1,90 @@
|
||||
import { DefaultTooltip, KeenIcon } from '@/components';
|
||||
import {
|
||||
TMenuConfig,
|
||||
MenuItem,
|
||||
MenuLink,
|
||||
MenuSub,
|
||||
MenuTitle,
|
||||
MenuArrow,
|
||||
MenuIcon,
|
||||
MenuBadge,
|
||||
MenuSeparator
|
||||
} from '@/components/menu';
|
||||
import { useResponsive } from '@/hooks';
|
||||
import { useLanguage } from '@/i18n';
|
||||
import clsx from 'clsx';
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
const MegaMenuSubDropdown = (items: TMenuConfig) => {
|
||||
const desktopMode = useResponsive('up', 'lg');
|
||||
const { isRTL } = useLanguage();
|
||||
|
||||
const buildItems = (items: TMenuConfig): ReactNode => {
|
||||
return items.map((item, index) => {
|
||||
if (item.separator) {
|
||||
return <MenuSeparator key={index} />;
|
||||
} else if (item.children) {
|
||||
return (
|
||||
<MenuItem
|
||||
key={index}
|
||||
toggle={desktopMode ? 'dropdown' : 'accordion'}
|
||||
trigger={desktopMode ? 'hover' : 'click'}
|
||||
dropdownProps={{
|
||||
placement: isRTL() ? 'left-start' : 'right-start'
|
||||
}}
|
||||
>
|
||||
<MenuLink className="grow-0">
|
||||
{item.icon && (
|
||||
<MenuIcon>
|
||||
<KeenIcon icon={item.icon} />
|
||||
</MenuIcon>
|
||||
)}
|
||||
<MenuTitle className={clsx('')}>{item.title}</MenuTitle>
|
||||
<MenuArrow>
|
||||
<KeenIcon icon="right" className="text-3xs rtl:transform rtl:rotate-180" />
|
||||
</MenuArrow>
|
||||
</MenuLink>
|
||||
<MenuSub className="menu-default" rootClassName="max-w-[175px] lg:max-w-[220px]">
|
||||
{buildItems(item.children)}
|
||||
</MenuSub>
|
||||
</MenuItem>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<MenuItem key={index}>
|
||||
<MenuLink path={item.path}>
|
||||
{item.icon && (
|
||||
<MenuIcon>
|
||||
<KeenIcon icon={item.icon} />
|
||||
</MenuIcon>
|
||||
)}
|
||||
<MenuTitle>{item.title}</MenuTitle>
|
||||
|
||||
{item.disabled && (
|
||||
<MenuBadge>
|
||||
<span className="badge badge-xs">Soon</span>
|
||||
</MenuBadge>
|
||||
)}
|
||||
|
||||
{item.badge && (
|
||||
<MenuBadge>
|
||||
<span className="badge badge-primary badge-outline badge-xs">{item.badge}</span>
|
||||
</MenuBadge>
|
||||
)}
|
||||
|
||||
{item.tooltip && (
|
||||
<DefaultTooltip title={item.tooltip.title} placement={item.tooltip.placement}>
|
||||
<KeenIcon icon="information-2" className="text-gray-500 text-md" />
|
||||
</DefaultTooltip>
|
||||
)}
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return buildItems(items);
|
||||
};
|
||||
|
||||
export { MegaMenuSubDropdown };
|
||||
@ -0,0 +1,49 @@
|
||||
import { KeenIcon } from '@/components';
|
||||
import { TMenuConfig, MenuItem, MenuLink, MenuTitle, MenuIcon, MenuBadge } from '@/components/menu';
|
||||
import clsx from 'clsx';
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
const MegaMenuSubHighlighted = (items: TMenuConfig) => {
|
||||
const buildItems = (items: TMenuConfig): ReactNode => {
|
||||
return items.map((item, index) => {
|
||||
return (
|
||||
<MenuItem key={index}>
|
||||
<MenuLink
|
||||
path={item.path}
|
||||
className="
|
||||
menu-link border border-transparent
|
||||
menu-link-hover:!bg-light menu-link-hover:border-gray-200
|
||||
menu-item-active:!bg-light menu-item-active:border-gray-200
|
||||
dark:menu-link-hover:!bg-coal-600 dark:menu-link-hover:border-gray-100
|
||||
dark:menu-item-active:!bg-coal-600 dark:menu-item-active:border-gray-100
|
||||
"
|
||||
>
|
||||
{item.icon && (
|
||||
<MenuIcon>
|
||||
<KeenIcon icon={item.icon} />
|
||||
</MenuIcon>
|
||||
)}
|
||||
|
||||
<MenuTitle className={clsx('grow-0')}>{item.title}</MenuTitle>
|
||||
|
||||
{item.disabled && (
|
||||
<MenuBadge>
|
||||
<span className="badge badge-xs">Soon</span>
|
||||
</MenuBadge>
|
||||
)}
|
||||
|
||||
{item.badge && (
|
||||
<MenuBadge>
|
||||
<span className="badge badge-primary badge-outline badge-xs">{item.badge}</span>
|
||||
</MenuBadge>
|
||||
)}
|
||||
</MenuLink>
|
||||
</MenuItem>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
return buildItems(items);
|
||||
};
|
||||
|
||||
export { MegaMenuSubHighlighted };
|
||||
4
src/partials/menu/mega-menu/components/index.ts
Normal file
4
src/partials/menu/mega-menu/components/index.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export * from './MegaMenuFooter';
|
||||
export * from './MegaMenuSubDefault';
|
||||
export * from './MegaMenuSubDropdown';
|
||||
export * from './MegaMenuSubHighlighted';
|
||||
6
src/partials/menu/mega-menu/index.ts
Normal file
6
src/partials/menu/mega-menu/index.ts
Normal file
@ -0,0 +1,6 @@
|
||||
export * from './components';
|
||||
export * from './MegaMenuSubProfiles';
|
||||
export * from './MegaMenuSubAccount';
|
||||
export * from './MegaMenuSubNetwork';
|
||||
export * from './MegaMenuSubAuth';
|
||||
export * from './MegaMenuSubHelp';
|
||||
40
src/partials/misc/MiscCreateTeam.tsx
Normal file
40
src/partials/misc/MiscCreateTeam.tsx
Normal file
@ -0,0 +1,40 @@
|
||||
import clsx from 'clsx';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
interface ICreateTeamProps {
|
||||
className?: string;
|
||||
image: ReactNode;
|
||||
title: string;
|
||||
subTitle: ReactNode;
|
||||
engage: {
|
||||
path: string;
|
||||
btnColor: string;
|
||||
label: string;
|
||||
};
|
||||
}
|
||||
|
||||
const MiscCreateTeam = ({ className, image, title, subTitle, engage }: ICreateTeamProps) => {
|
||||
return (
|
||||
<div className={clsx('card', className && className)}>
|
||||
<div className="card-body flex flex-col place-content-center gap-5">
|
||||
<div className="flex justify-center">{image}</div>
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-3 text-center">
|
||||
<h2 className="text-1.5xl font-semibold text-gray-900">{title}</h2>
|
||||
<p className="text-sm font-medium text-gray-700">{subTitle}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center">
|
||||
<Link to={`${engage.path}`} className={`btn ${engage.btnColor}`}>
|
||||
{engage.label}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { MiscCreateTeam, type ICreateTeamProps };
|
||||
37
src/partials/misc/MiscEngage.tsx
Normal file
37
src/partials/misc/MiscEngage.tsx
Normal file
@ -0,0 +1,37 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
interface IEngageProps {
|
||||
title: string;
|
||||
description: string;
|
||||
image: any;
|
||||
more: {
|
||||
url: string;
|
||||
title: string;
|
||||
};
|
||||
}
|
||||
|
||||
const MiscEngage = ({ title, description, image, more }: IEngageProps) => {
|
||||
return (
|
||||
<div className="card">
|
||||
<div className="card-body px-10 py-7.5 lg:pr-12.5">
|
||||
<div className="flex flex-wrap md:flex-nowrap items-center gap-6 md:gap-10">
|
||||
<div className="flex flex-col items-start gap-3">
|
||||
<h2 className="text-1.5xl font-medium text-gray-900">{title}</h2>
|
||||
|
||||
<p className="text-sm text-gray-800 leading-5.5 mb-2.5">{description}</p>
|
||||
</div>
|
||||
|
||||
{image}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card-footer justify-center">
|
||||
<Link to={`${more.url}`} className="btn btn-link">
|
||||
{more.title}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { MiscEngage, type IEngageProps };
|
||||
59
src/partials/misc/MiscFaq.tsx
Normal file
59
src/partials/misc/MiscFaq.tsx
Normal file
@ -0,0 +1,59 @@
|
||||
import { Accordion, AccordionItem } from '@/components/accordion';
|
||||
|
||||
interface IFaqItem {
|
||||
title: string;
|
||||
text: string;
|
||||
}
|
||||
interface IFaqItems extends Array<IFaqItem> {}
|
||||
|
||||
const MiscFaq = () => {
|
||||
const items: IFaqItems = [
|
||||
{
|
||||
title: 'How is pricing determined for each plan ?',
|
||||
text: "Metronic embraces flexible licensing options that empower you to choose the perfect fit for your project's needs and budget. Understanding the factors influencing each plan's pricing helps you make an informed decision. Metronic embraces flexible licensing options that empower you to choose the perfect fit for your project's needs and budget. Understanding the factors influencing each plan's pricing helps you make an informed decision. Metronic embraces flexible licensing options that empower you to choose the perfect fit for your project's needs and budget. Understanding the factors influencing each plan's pricing helps you make an informed decision"
|
||||
},
|
||||
{
|
||||
title: 'What payment methods are accepted for subscriptions ?',
|
||||
text: "Metronic embraces flexible licensing options that empower you to choose the perfect fit for your project's needs and budget. Understanding the factors influencing each plan's pricing helps you make an informed decision"
|
||||
},
|
||||
{
|
||||
title: 'Are there any hidden fees in the pricing ?',
|
||||
text: "Metronic embraces flexible licensing options that empower you to choose the perfect fit for your project's needs and budget. Understanding the factors influencing each plan's pricing helps you make an informed decision"
|
||||
},
|
||||
{
|
||||
title: 'Is there a discount for annual subscriptions ?',
|
||||
text: "Metronic embraces flexible licensing options that empower you to choose the perfect fit for your project's needs and budget. Understanding the factors influencing each plan's pricing helps you make an informed decision"
|
||||
},
|
||||
{
|
||||
title: 'Do you offer refunds on subscription cancellations ?',
|
||||
text: "Metronic embraces flexible licensing options that empower you to choose the perfect fit for your project's needs and budget. Understanding the factors influencing each plan's pricing helps you make an informed decision"
|
||||
},
|
||||
{
|
||||
title: 'Can I add extra features to my current plan ?',
|
||||
text: "Metronic embraces flexible licensing options that empower you to choose the perfect fit for your project's needs and budget. Understanding the factors influencing each plan's pricing helps you make an informed decision"
|
||||
}
|
||||
];
|
||||
|
||||
const generateItems = () => {
|
||||
return (
|
||||
<Accordion allowMultiple={false}>
|
||||
{items.map((item, index) => (
|
||||
<AccordionItem key={index} title={item.title}>
|
||||
{item.text}
|
||||
</AccordionItem>
|
||||
))}
|
||||
</Accordion>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card">
|
||||
<div className="card-header">
|
||||
<h3 className="card-title">FAQ</h3>
|
||||
</div>
|
||||
<div className="card-body py-3">{generateItems()}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { MiscFaq, type IFaqItem, type IFaqItems };
|
||||
53
src/partials/misc/MiscHelp.tsx
Normal file
53
src/partials/misc/MiscHelp.tsx
Normal file
@ -0,0 +1,53 @@
|
||||
import { Fragment } from 'react';
|
||||
|
||||
import { toAbsoluteUrl } from '@/utils';
|
||||
|
||||
import { MiscEngage } from '.';
|
||||
|
||||
const MiscHelp = () => {
|
||||
return (
|
||||
<div className="grid lg:grid-cols-2 gap-5 lg:gap-7.5">
|
||||
<MiscEngage
|
||||
title="Questions ?"
|
||||
description="Visit our Help Center for detailed assistance on billing, payments, and subscriptions."
|
||||
image={
|
||||
<Fragment>
|
||||
<img
|
||||
src={toAbsoluteUrl('/media/illustrations/2.svg')}
|
||||
className="dark:hidden max-h-[150px]"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
src={toAbsoluteUrl('/media/illustrations/2-dark.svg')}
|
||||
className="light:hidden max-h-[150px]"
|
||||
alt=""
|
||||
/>
|
||||
</Fragment>
|
||||
}
|
||||
more={{ title: 'Go to Help Center', url: '#' }}
|
||||
/>
|
||||
|
||||
<MiscEngage
|
||||
title="Contact Support"
|
||||
description="Need assistance? Contact our support team for prompt, personalized help your queries & concerns."
|
||||
image={
|
||||
<Fragment>
|
||||
<img
|
||||
src={toAbsoluteUrl('/media/illustrations/4.svg')}
|
||||
className="dark:hidden max-h-[150px]"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
src={toAbsoluteUrl('/media/illustrations/4-dark.svg')}
|
||||
className="light:hidden max-h-[150px]"
|
||||
alt=""
|
||||
/>
|
||||
</Fragment>
|
||||
}
|
||||
more={{ title: 'Contact Support', url: 'https://devs.keenthemes.com/unresolved' }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { MiscHelp };
|
||||
53
src/partials/misc/MiscHelp2.tsx
Normal file
53
src/partials/misc/MiscHelp2.tsx
Normal file
@ -0,0 +1,53 @@
|
||||
import { Fragment } from 'react';
|
||||
|
||||
import { toAbsoluteUrl } from '@/utils';
|
||||
|
||||
import { MiscEngage } from '.';
|
||||
|
||||
const MiscHelp2 = () => {
|
||||
return (
|
||||
<div className="grid lg:grid-cols-2 gap-5 lg:gap-7.5">
|
||||
<MiscEngage
|
||||
title="Questions ?"
|
||||
description="Visit our Help Center for detailed assistance on billing, payments, and subscriptions."
|
||||
image={
|
||||
<Fragment>
|
||||
<img
|
||||
src={toAbsoluteUrl('/media/illustrations/29.svg')}
|
||||
className="dark:hidden max-h-[150px]"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
src={toAbsoluteUrl('/media/illustrations/29-dark.svg')}
|
||||
className="light:hidden max-h-[150px]"
|
||||
alt=""
|
||||
/>
|
||||
</Fragment>
|
||||
}
|
||||
more={{ title: 'Go to Help Center', url: '#' }}
|
||||
/>
|
||||
|
||||
<MiscEngage
|
||||
title="Contact Support"
|
||||
description="Need assistance? Contact our support team for prompt, personalized help your queries & concerns."
|
||||
image={
|
||||
<Fragment>
|
||||
<img
|
||||
src={toAbsoluteUrl('/media/illustrations/31.svg')}
|
||||
className="dark:hidden max-h-[150px]"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
src={toAbsoluteUrl('/media/illustrations/31-dark.svg')}
|
||||
className="light:hidden max-h-[150px]"
|
||||
alt=""
|
||||
/>
|
||||
</Fragment>
|
||||
}
|
||||
more={{ title: 'Contact Support', url: 'https://devs.keenthemes.com/unresolved' }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { MiscHelp2 };
|
||||
67
src/partials/misc/MiscHighlightedPosts.tsx
Normal file
67
src/partials/misc/MiscHighlightedPosts.tsx
Normal file
@ -0,0 +1,67 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { KeenIcon } from '@/components';
|
||||
import { CommonHexagonBadge } from '../common';
|
||||
|
||||
interface IHighlightedPostsItem {
|
||||
icon: string;
|
||||
title: string;
|
||||
summary: string;
|
||||
path: string;
|
||||
}
|
||||
interface IHighlightedPostsItems extends Array<IHighlightedPostsItem> {}
|
||||
|
||||
interface IHighlightedPostsProps {
|
||||
posts: IHighlightedPostsItem[];
|
||||
}
|
||||
|
||||
const MiscHighlightedPosts = ({ posts }: IHighlightedPostsProps) => {
|
||||
const renderItem = (post: IHighlightedPostsItem, index: number) => {
|
||||
return (
|
||||
<React.Fragment key={index}>
|
||||
<div className="flex flex-col items-start gap-2.5">
|
||||
<div className="mb-2.5">
|
||||
<CommonHexagonBadge
|
||||
stroke="stroke-brand-clarity"
|
||||
fill="fill-brand-light"
|
||||
size="size-[50px]"
|
||||
badge={<KeenIcon icon={post.icon} className="text-1.5xl ps-px text-brand" />}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
to={`${post.path}`}
|
||||
className="text-base font-semibold text-gray-900 hover:text-primary"
|
||||
>
|
||||
{post.title}
|
||||
</Link>
|
||||
|
||||
<p className="text-sm text-gray-700">{post.summary}</p>
|
||||
|
||||
<Link to={`${post.path}`} className="btn btn-link flex-none">
|
||||
Learn more
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<span className="hidden [&:not(:last-child)]:block [&:not(:last-child)]:border-b border-b-gray-200"></span>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card">
|
||||
<div className="card-body py-10 flex flex-col gap-5 lg:gap-7.5">
|
||||
{posts.map((post, index) => {
|
||||
return renderItem(post, index);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export {
|
||||
MiscHighlightedPosts,
|
||||
type IHighlightedPostsItem,
|
||||
type IHighlightedPostsItems,
|
||||
type IHighlightedPostsProps
|
||||
};
|
||||
38
src/partials/misc/MiscStarter.tsx
Normal file
38
src/partials/misc/MiscStarter.tsx
Normal file
@ -0,0 +1,38 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
interface IStarterProps {
|
||||
image: ReactNode;
|
||||
title: string;
|
||||
subTitle: ReactNode;
|
||||
engage: {
|
||||
path: string;
|
||||
btnColor: string;
|
||||
label: string;
|
||||
};
|
||||
}
|
||||
|
||||
const MiscStarter = ({ image, title, subTitle, engage }: IStarterProps) => {
|
||||
return (
|
||||
<div className="card">
|
||||
<div className="card-body flex flex-col items-center gap-2.5 py-7.5">
|
||||
<div className="flex justify-center p-7.5 py-9">{image}</div>
|
||||
|
||||
<div className="flex flex-col gap-5 lg:gap-7.5">
|
||||
<div className="flex flex-col gap-3 text-center">
|
||||
<h2 className="text-1.5xl font-semibold text-gray-900">{title}</h2>
|
||||
<p className="text-sm text-gray-800">{subTitle}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center mb-5">
|
||||
<Link to={engage.path} className={`btn ${engage.btnColor}`}>
|
||||
{engage.label}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { MiscStarter, type IStarterProps };
|
||||
7
src/partials/misc/index.ts
Normal file
7
src/partials/misc/index.ts
Normal file
@ -0,0 +1,7 @@
|
||||
export * from './MiscCreateTeam';
|
||||
export * from './MiscEngage';
|
||||
export * from './MiscFaq';
|
||||
export * from './MiscHelp';
|
||||
export * from './MiscHelp2';
|
||||
export * from './MiscHighlightedPosts';
|
||||
export * from './MiscStarter';
|
||||
@ -0,0 +1,55 @@
|
||||
import { toAbsoluteUrl } from '@/utils';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
Dialog,
|
||||
DialogBody,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle
|
||||
} from '@/components/ui/dialog';
|
||||
|
||||
interface IModalAccountDeactivatedProps {
|
||||
open: boolean;
|
||||
onOpenChange: () => void;
|
||||
}
|
||||
|
||||
const ModalAccountDeactivated = ({ open, onOpenChange }: IModalAccountDeactivatedProps) => {
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="w-full max-w-[500px] max-h-[95%] scrollable-y-auto">
|
||||
<DialogHeader className="justify-end border-0 pt-5">
|
||||
<DialogTitle></DialogTitle>
|
||||
<DialogDescription></DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogBody className="flex flex-col items-center pt-0 pb-10">
|
||||
<div className="mb-9">
|
||||
<img
|
||||
src={toAbsoluteUrl('/media/illustrations/23.svg')}
|
||||
className="dark:hidden max-h-[150px]"
|
||||
/>
|
||||
<img
|
||||
src={toAbsoluteUrl('/media/illustrations/23-dark.svg')}
|
||||
className="light:hidden max-h-[150px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h3 className="text-lg font-medium text-gray-900 text-center mb-3">
|
||||
Account Deactivated
|
||||
</h3>
|
||||
|
||||
<div className="text-2sm text-center text-gray-700 mb-7">
|
||||
Your account has been deactivated. Please contact <br />
|
||||
support if this is an error or for reactivation.
|
||||
</div>
|
||||
|
||||
<Link to="/" className="btn btn-primary flex justify-center">
|
||||
Go to Home
|
||||
</Link>
|
||||
</DialogBody>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export { ModalAccountDeactivated };
|
||||
1
src/partials/modals/account-deactivated/index.ts
Normal file
1
src/partials/modals/account-deactivated/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './ModalAccountDeactivated';
|
||||
49
src/partials/modals/give-award/ModalGiveAward.tsx
Normal file
49
src/partials/modals/give-award/ModalGiveAward.tsx
Normal file
@ -0,0 +1,49 @@
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle
|
||||
} from '@/components/ui/dialog';
|
||||
import {
|
||||
ModalShareProfileViaLink,
|
||||
ModalShareProfileViaEmail,
|
||||
ModalShareProfileUsers,
|
||||
ModalShareProfileSettings
|
||||
} from '@/partials/modals/share-profile';
|
||||
|
||||
interface ModalGiveAwardProps {
|
||||
open: boolean;
|
||||
onOpenChange: () => void;
|
||||
}
|
||||
|
||||
const ModalGiveAward = ({ open, onOpenChange }: ModalGiveAwardProps) => {
|
||||
const scrollableHeight = 300;
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-[600px]">
|
||||
<DialogHeader className="py-4 px-5">
|
||||
<DialogTitle>Give Award</DialogTitle>
|
||||
<DialogDescription></DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="grid gap-5 px-0 py-5">
|
||||
<ModalShareProfileViaLink />
|
||||
<div className="border-b border-b-gray-200"></div>
|
||||
|
||||
<ModalShareProfileViaEmail />
|
||||
<div className="border-b border-b-gray-200"></div>
|
||||
|
||||
<div className="scrollable-y-auto" style={{ maxHeight: `${scrollableHeight}px` }}>
|
||||
<ModalShareProfileUsers />
|
||||
</div>
|
||||
|
||||
<div className="border-b border-b-gray-200"></div>
|
||||
<ModalShareProfileSettings />
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export { ModalGiveAward };
|
||||
6
src/partials/modals/give-award/index.ts
Normal file
6
src/partials/modals/give-award/index.ts
Normal file
@ -0,0 +1,6 @@
|
||||
export * from './ModalGiveAward';
|
||||
export * from '@/partials/modals/share-profile/ModalShareProfileViaLink';
|
||||
export * from '@/partials/modals/share-profile/ModalShareProfileViaEmail';
|
||||
export * from '@/partials/modals/share-profile/ModalShareProfileUsers';
|
||||
export * from '@/partials/modals/share-profile/ModalShareProfileSettings';
|
||||
export * from './types';
|
||||
5
src/partials/modals/give-award/types.ts
Normal file
5
src/partials/modals/give-award/types.ts
Normal file
@ -0,0 +1,5 @@
|
||||
export interface IModalGiveAwardDocsItem {
|
||||
image: string;
|
||||
desc: string;
|
||||
date: string;
|
||||
}
|
||||
136
src/partials/modals/report-user/ModalReportUser.tsx
Normal file
136
src/partials/modals/report-user/ModalReportUser.tsx
Normal file
@ -0,0 +1,136 @@
|
||||
import React, { forwardRef } from 'react';
|
||||
import { toAbsoluteUrl } from '@/utils';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle
|
||||
} from '@/components/ui/dialog';
|
||||
|
||||
interface IModalReportUserProps {
|
||||
open: boolean;
|
||||
onOpenChange: () => void;
|
||||
}
|
||||
|
||||
const ModalReportUser = forwardRef<HTMLDivElement, IModalReportUserProps>(
|
||||
({ open, onOpenChange }, ref) => {
|
||||
const buildNotice = () => {
|
||||
return (
|
||||
<div className="grid place-items-center gap-1 px-5">
|
||||
<div className="flex justify-center items-center rounded-full">
|
||||
<img
|
||||
src={toAbsoluteUrl('/media/avatars/300-1.png')}
|
||||
className="rounded-full max-h-[55px] max-w-full"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<Link
|
||||
to="#"
|
||||
className="hover:text-primary-active text-2sm leading-5 font-semibold text-gray-900"
|
||||
>
|
||||
Jenny Klabber
|
||||
</Link>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="13"
|
||||
height="13"
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
const buildOptions = () => {
|
||||
const items = [
|
||||
{
|
||||
name: 'Impersonation',
|
||||
description: 'It looks like this profile might be impersonating someone else'
|
||||
},
|
||||
{
|
||||
name: 'Off bumble behavior',
|
||||
description: 'This person has engaged in behavior that is abusive, bullying'
|
||||
},
|
||||
{
|
||||
name: 'Something else',
|
||||
description: 'None of the reasons listed above are suitable'
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-5 px-5">
|
||||
<div className="text-2sm text-gray-900 font-semibold">
|
||||
Let us know why you’re reporing this person
|
||||
</div>
|
||||
<div className="flex flex-col gap-3.5">
|
||||
{items.map((item, index) => (
|
||||
<label key={index} className="form-label flex items-center gap-2.5">
|
||||
<input
|
||||
className="radio radio-sm"
|
||||
name="report-option"
|
||||
type="radio"
|
||||
value="{{ loop.index }}"
|
||||
/>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<div className="text-sm font-semibold text-gray-900">{item.name}</div>
|
||||
<div className="text-2sm font-medium text-gray-600">{item.description}</div>
|
||||
</div>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const buildFooter = () => {
|
||||
return (
|
||||
<div className="text-2sm font-medium text-center text-gray-800 p-x">
|
||||
Don't worry, your report is completely anonymous; the person you're <br />
|
||||
reporting will not be informed that you've submitted it
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const buildButton = () => {
|
||||
return (
|
||||
<div className="flex items-center gap-2.5 justify-end px-5">
|
||||
<button className="btn btn-sm btn-primary">Report this person</button>
|
||||
<button className="btn btn-sm btn-light">Cancel</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-[600px]" ref={ref}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Report User</DialogTitle>
|
||||
<DialogDescription></DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="grid gap-5 px-0 py-5">
|
||||
{buildNotice()}
|
||||
<div className="border-b border-b-gray-200"></div>
|
||||
{buildOptions()}
|
||||
<div className="border-b border-b-gray-200"></div>
|
||||
{buildFooter()}
|
||||
<div className="border-b border-b-gray-200"></div>
|
||||
{buildButton()}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export { ModalReportUser };
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user