github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: search

Browse Source
feat/discover
Arik Chakma 5 months ago
parent c2682e84ce
commit 4f6fa1d5c3
1 changed files with 120 additions and 115 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 235
      src/components/DiscoverRoadmaps/DiscoverRoadmaps.tsx

235
src/components/DiscoverRoadmaps/DiscoverRoadmaps.tsx
Unescape View File

@ -111,125 +111,130 @@ export function DiscoverRoadmaps(props: DiscoverRoadmapsProps) {
const loadingIndicator = isLoading && <LoadingRoadmaps />;
return (
<>
{isCreatingRoadmap && (
<CreateRoadmapModal
onClose={() => {
setIsCreatingRoadmap(false);
}}
/>
)}
<div className="border-b bg-white py-7">
<div className="container text-left">
<div className="flex flex-col items-start bg-white">
<h1 className="mb-1 text-2xl font-bold sm:text-3xl">
Community Roadmaps
</h1>
<p className="text-base text-gray-500">
Browse the roadmaps created by the community or{' '}
<button
onClick={() => {
setIsCreatingRoadmap(true);
}}
className="rounded text-blue-600 underline"
>
create your own roadmap
</button>
</p>
</div>
</div>
<>
{isCreatingRoadmap && (
<CreateRoadmapModal
onClose={() => {
setIsCreatingRoadmap(false);
}}
/>
)}
<div className="border-b bg-white py-7">
<div className="container text-left">
<div className="flex flex-col items-start bg-white">
<h1 className="mb-1 text-2xl font-bold sm:text-3xl">
Community Roadmaps
</h1>
<p className="text-base text-gray-500">
Browse the roadmaps created by the community or{' '}
<button
onClick={() => {
setIsCreatingRoadmap(true);
}}
className="rounded text-blue-600 underline"
>
create your own roadmap
</button>
</p>
</div>
</div>
</div>
<div className="bg-gray-50 py-3">
<section className="container mx-auto py-3">
<div className="mb-3.5 flex items-stretch justify-between gap-2.5">
<SearchRoadmap
total={roadmapsResponse?.totalCount || 0}
value={pageState.searchTerm}
isLoading={isLoading}
onValueChange={(value) => {
setPageState({
...pageState,
searchTerm: value,
currentPage: 1,
});
}}
/>
<DiscoverRoadmapSorting
sortBy={pageState.sortBy}
onSortChange={(sortBy) => {
setPageState({
...pageState,
sortBy,
});
}}
/>
</div>
<div className="py-3 bg-gray-50">
<section className="container mx-auto py-3">
<div className="mb-3.5 flex items-stretch justify-between gap-2.5">
<SearchRoadmap
total={roadmapsResponse?.totalCount || 0}
value={pageState.searchTerm}
isLoading={isLoading}
onValueChange={(value) => {
}}
/>
<DiscoverRoadmapSorting
sortBy={pageState.sortBy}
onSortChange={(sortBy) => {
setPageState({
...pageState,
sortBy,
});
}}
/>
</div>
{loadingIndicator}
{roadmaps.length === 0 && !isLoading && <EmptyDiscoverRoadmaps/>}
{roadmaps.length > 0 && !isLoading && (
<>
<ul className="mb-4 grid grid-cols-1 items-stretch gap-3 sm:grid-cols-2 lg:grid-cols-3">
{roadmaps.map((roadmap) => {
const roadmapLink = `/r/${roadmap.slug}`;
const totalRatings = Object.keys(
roadmap.ratings?.breakdown || [],
).reduce(
(acc: number, key: string) =>
acc + roadmap.ratings.breakdown[key as any],
0,
);
return (
<li key={roadmap._id} className="h-full min-h-[175px]">
<a
key={roadmap._id}
href={roadmapLink}
className="flex h-full flex-col rounded-lg border bg-white p-3.5 transition-colors hover:border-gray-300 hover:bg-gray-50"
target={'_blank'}
>
<div className="grow">
<h2 className="text-balance text-base font-bold leading-tight">
{roadmap.title}
</h2>
<p className="mt-2 text-sm text-gray-500">
{roadmap.description}
</p>
</div>
<div className="flex items-center justify-between gap-2">
{loadingIndicator}
{roadmaps.length === 0 && !isLoading && <EmptyDiscoverRoadmaps />}
{roadmaps.length > 0 && !isLoading && (
<>
<ul className="mb-4 grid grid-cols-1 items-stretch gap-3 sm:grid-cols-2 lg:grid-cols-3">
{roadmaps.map((roadmap) => {
const roadmapLink = `/r/${roadmap.slug}`;
const totalRatings = Object.keys(
roadmap.ratings?.breakdown || [],
).reduce(
(acc: number, key: string) =>
acc + roadmap.ratings.breakdown[key as any],
0,
);
return (
<li key={roadmap._id} className="h-full min-h-[175px]">
<a
key={roadmap._id}
href={roadmapLink}
className="flex h-full flex-col rounded-lg border bg-white p-3.5 transition-colors hover:border-gray-300 hover:bg-gray-50"
target={'_blank'}
>
<div className="grow">
<h2 className="text-balance text-base font-bold leading-tight">
{roadmap.title}
</h2>
<p className="mt-2 text-sm text-gray-500">
{roadmap.description}
</p>
</div>
<div className="flex items-center justify-between gap-2">
<span className="flex items-center gap-1 text-xs text-gray-400">
<Shapes size={15} className="inline-block"/>
{Intl.NumberFormat('en-US', {
notation: 'compact',
}).format(roadmap.topicCount)}{' '}
<Shapes size={15} className="inline-block" />
{Intl.NumberFormat('en-US', {
notation: 'compact',
}).format(roadmap.topicCount)}{' '}
</span>
<Rating
rating={roadmap?.ratings?.average || 0}
readOnly={true}
starSize={16}
total={totalRatings}
/>
</div>
</a>
</li>
);
})}
</ul>
<Pagination
currPage={roadmapsResponse?.currPage || 1}
totalPages={roadmapsResponse?.totalPages || 1}
perPage={roadmapsResponse?.perPage || 0}
totalCount={roadmapsResponse?.totalCount || 0}
onPageChange={(page) => {
setPageState({
...pageState,
currentPage: page,
});
}}
<Rating
rating={roadmap?.ratings?.average || 0}
readOnly={true}
starSize={16}
total={totalRatings}
/>
</>
)}
</section>
</div>
</>
</div>
</a>
</li>
);
})}
</ul>
<Pagination
currPage={roadmapsResponse?.currPage || 1}
totalPages={roadmapsResponse?.totalPages || 1}
perPage={roadmapsResponse?.perPage || 0}
totalCount={roadmapsResponse?.totalCount || 0}
onPageChange={(page) => {
setPageState({
...pageState,
currentPage: page,
});
}}
/>
</>
)}
</section>
</div>
</>
);
}

Write Preview
Loading…
Cancel
Save