diff --git a/src/components/DiscoverRoadmaps/DiscoverRoadmaps.tsx b/src/components/DiscoverRoadmaps/DiscoverRoadmaps.tsx index 71faaa403..9bc520c2c 100644 --- a/src/components/DiscoverRoadmaps/DiscoverRoadmaps.tsx +++ b/src/components/DiscoverRoadmaps/DiscoverRoadmaps.tsx @@ -10,6 +10,7 @@ import { LoadingRoadmaps } from '../ExploreAIRoadmap/LoadingRoadmaps'; import { httpGet } from '../../lib/http'; import { useToast } from '../../hooks/use-toast'; import { DiscoverRoadmapSorting } from './DiscoverRoadmapSorting'; +import { CreateRoadmapModal } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal.tsx'; type DiscoverRoadmapsProps = {}; @@ -103,90 +104,132 @@ export function DiscoverRoadmaps(props: DiscoverRoadmapsProps) { setRoadmapsResponse(response); }; + const [isCreatingRoadmap, setIsCreatingRoadmap] = useState(false); + const roadmaps = roadmapsResponse?.data || []; const loadingIndicator = isLoading && ; return ( -
-
- {}} - /> - - { - setPageState({ - ...pageState, - sortBy, - }); - }} - /> -
- - {loadingIndicator} - {roadmaps.length === 0 && !isLoading && } - {roadmaps.length > 0 && !isLoading && ( - <> - - - { - setPageState({ - ...pageState, - currentPage: page, - }); - }} - /> - - )} -
+ + + {loadingIndicator} + {roadmaps.length === 0 && !isLoading && } + {roadmaps.length > 0 && !isLoading && ( + <> + + + { + setPageState({ + ...pageState, + currentPage: page, + }); + }} + /> + + )} + + + ); } diff --git a/src/components/ExploreAIRoadmap/LoadingRoadmaps.tsx b/src/components/ExploreAIRoadmap/LoadingRoadmaps.tsx index b39d5b79c..94640f16c 100644 --- a/src/components/ExploreAIRoadmap/LoadingRoadmaps.tsx +++ b/src/components/ExploreAIRoadmap/LoadingRoadmaps.tsx @@ -4,7 +4,7 @@ export function LoadingRoadmaps() { {new Array(21).fill(0).map((_, index) => (
  • ))} diff --git a/src/components/Rating/Rating.tsx b/src/components/Rating/Rating.tsx index 308c88f2c..02f3e0eb9 100644 --- a/src/components/Rating/Rating.tsx +++ b/src/components/Rating/Rating.tsx @@ -7,6 +7,7 @@ type RatingProps = { starSize?: number; readOnly?: boolean; className?: string; + total?: number; }; export function Rating(props: RatingProps) { @@ -22,6 +23,10 @@ export function Rating(props: RatingProps) { const starCount = Math.floor(stars); const decimalWidthPercentage = Math.min((stars - starCount) * 100, 100); + if (readOnly && starCount === 0) { + return No ratings yet; + } + return (
    {[1, 2, 3, 4, 5].map((counter) => { @@ -43,6 +48,11 @@ export function Rating(props: RatingProps) { /> ); })} + {props.total && ( + + ({Intl.NumberFormat('en-US').format(props.total)}) + + )}
    ); }