refactor: projects stories directories naming

src/features/Projects/Components/ProjectCardMini/ProjectCardMini.Skeleton.tsx

@@ -0,0 +1,15 @@
+import Skeleton from 'react-loading-skeleton'
+
+
+export default function ProjectCardMiniSkeleton() {
+    return (
+        <div className="bg-gray-25 select-none px-16 py-16 flex min-w-[296px] gap-16 border border-gray-200 rounded-10 items-center" >
+            <Skeleton width={80} height={80} containerClassName='flex-shrink-0' />
+            <div className="justify-around items-start min-w-0">
+                <p className="text-body4 w-full font-bold overflow-ellipsis overflow-hidden whitespace-nowrap"><Skeleton width="15ch" /></p>
+                <p className="text-body5 text-gray-600 font-light my-[5px]"><Skeleton width="10ch" /></p>
+                <span className="font-light text-body5"> <Skeleton width="5ch"></Skeleton> </span>
+            </div>
+        </div>
+    );
+}

src/features/Projects/Components/ProjectCardMini/ProjectCardMini.stories.tsx

@@ -0,0 +1,30 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { MOCK_DATA } from 'src/mocks/data';
+
+import ProjectCardMini from './ProjectCardMini';
+import ProjectCardMiniSkeleton from './ProjectCardMini.Skeleton';
+
+
+export default {
+    title: 'Projects/Components/Project Card Mini',
+    component: ProjectCardMini,
+
+} as ComponentMeta<typeof ProjectCardMini>;
+
+const Template: ComponentStory<typeof ProjectCardMini> = (args) => <ProjectCardMini {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+    project: MOCK_DATA.projects[0]
+}
+
+
+
+const SkeletonTemplate: ComponentStory<typeof ProjectCardMiniSkeleton> = (args) => <ProjectCardMiniSkeleton />;
+
+export const LoadingState = SkeletonTemplate.bind({});
+LoadingState.args = {
+}
+
+
+

src/features/Projects/Components/ProjectCardMini/ProjectCardMini.tsx

@@ -0,0 +1,22 @@
+import { MdLocalFireDepartment } from "react-icons/md";
+import { ProjectCard } from "src/utils/interfaces";
+
+
+interface Props {
+    project: ProjectCard
+    onClick: (projectId: number) => void
+}
+
+export default function ProjectCardMini({ project, onClick }: Props) {
+
+    return (
+        <div className="bg-gray-25 select-none px-16 py-16 flex min-w-[296px] gap-16 border border-gray-200 rounded-10 hover:cursor-pointer hover:bg-gray-100" onClick={() => onClick(project.id)}>
+            <img src={project.thumbnail_image} alt={project.title} draggable="false" className="flex-shrink-0 w-80 h-80 bg-gray-200 border-0 rounded-8"></img>
+            <div className="justify-around items-start min-w-0">
+                <p className="text-body4 w-full font-bold overflow-ellipsis overflow-hidden whitespace-nowrap">{project.title}</p>
+                <p className="text-body5 text-gray-600 font-light my-[5px]">{project.category.title}</p>
+                <span className="chip-small bg-warning-50 text-yellow-700 font-light text-body5 py-[3px] px-10"> <MdLocalFireDepartment className='inline-block text-fire transform text-body4 align-middle' /> {project.votes_count} </span>
+            </div>
+        </div>
+    );
+}