Add top stories to cms and update client (#58)

client/src/containers/home/top-stories/index.tsx

@@ -1,11 +1,18 @@
+import { useGetTopStories } from '@/types/generated/top-story';
+
 import TopStoriesItem from './item';
-import topStories from './mockup.json';
 
 const TopStories = () => {
+  const { data: topStories } = useGetTopStories({
+    'pagination[limit]': 5,
+    populate: 'story,cover_image',
+    sort: 'index:asc',
+  });
+
   return (
     <div className="max-h-[35vh] space-y-4 overflow-y-auto">
-      {topStories.map((story) => (
-        <TopStoriesItem key={story.id} story={story} />
+      {topStories?.data?.map((topStory) => (
+        <TopStoriesItem key={topStory.id} topStory={topStory.attributes} />
       ))}
     </div>
   );

client/src/containers/home/top-stories/item.tsx

@@ -2,42 +2,45 @@ import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 
 import { cn } from '@/lib/classnames';
+import { getImageSrc } from '@/lib/image-src';
+
+import { TopStory } from '@/types/generated/strapi.schemas';
 
 type TopStoriesItemProps = {
-  story: {
-    title: string;
-    region: string;
-    id: string;
-    image: string;
-    active: boolean;
-  };
+  topStory?: TopStory;
 };
 
-const TopStoriesItem = ({ story }: TopStoriesItemProps) => {
+const TopStoriesItem = ({ topStory }: TopStoriesItemProps) => {
   const { push } = useRouter();
+  const storyData = topStory?.story?.data;
 
   const handleClickStory = () => {
-    if (story.active) {
-      push(`/stories/${story.id}`);
+    if (storyData?.id) {
+      push(`/stories/${storyData?.id}`);
     }
   };
 
-  const src = story?.image;
+  const src = getImageSrc(topStory?.cover_image?.data?.attributes?.url);
 
   return (
-    <div onClick={handleClickStory} className={cn('flex gap-2', story.active && 'cursor-pointer')}>
+    <div
+      onClick={handleClickStory}
+      className={cn('flex gap-2', storyData?.attributes?.active && 'cursor-pointer')}
+    >
       <div className="h-[72px] w-[72px] shrink-0 overflow-hidden rounded-full">
         <Image
-          alt={story.title}
+          alt={storyData?.attributes?.title || 'story cover image'}
           src={src}
           width={72}
           height={72}
           className="h-full w-full object-cover object-center"
         />
       </div>
       <div className="space-y-1 text-gray-300">
-        <h3 className="text-sm font-bold leading-4 text-gray-300">{story.title}</h3>
-        <p className="font-open-sans text-xs font-light italic">{story.region}</p>
+        <h3 className="text-sm font-bold leading-4 text-gray-300">
+          {storyData?.attributes?.title}
+        </h3>
+        <p className="font-open-sans text-xs font-light italic">{topStory?.location}</p>
       </div>
     </div>
   );