Refactor: Splide interfaces

src/components/Carousel/DynamicSlides/UnitSlide/CarouselDataCard/index.tsx

@@ -1,19 +1,10 @@
 import { CarouselData } from "@components/Carousel/carouselData";
-import { CarouselCardProps } from "@interfaces/CardProps";
+import { CarouselCardProps, CarouselDataCardProps } from "@interfaces/CardProps";
 import { Card, Typography, alpha, styled } from "@mui/material";
 import { navbar } from "@theme/constants";
 import React from "react";
 import ProgressBar from "./ProgressBar";
-import { SplideInstance } from "../..";
 
-interface CarouselDataCardProps extends CarouselCardProps {
-  link: CarouselData['link'];
-  tagline: CarouselData['tagline'];
-  title: CarouselData['title'];
-  description: CarouselData['description'];
-  pauseTime: CarouselData['pauseTime'];
-  splide?: SplideInstance | null;
-};
 
 const Tagline = styled(Typography)(({ theme }) => ({
   color: theme.palette.text.secondary,

src/components/Carousel/DynamicSlides/UnitSlide/index.tsx

@@ -4,7 +4,7 @@ import { CarouselData } from '../../carouselData';
 import { styled } from '@mui/material';
 import { SplideSlide } from '@splidejs/react-splide';
 import CarouselDataCard from './CarouselDataCard';
-import { SplideInstance } from '..';
+import { UnitSlideProps } from '@interfaces/SplideInterface';
 
 
 const StyledImage = styled(Image)(({ theme }) => ({
@@ -13,10 +13,6 @@ const StyledImage = styled(Image)(({ theme }) => ({
   objectFit: 'cover',
 }));
 
-interface UnitSlideProps extends CarouselData {
-  splide: SplideInstance | null;
-};
-
 const UnitSlide: React.FC<UnitSlideProps> = ({
   image,
   tagline,

src/components/Carousel/DynamicSlides/index.tsx

@@ -5,20 +5,7 @@ import { Splide, SplideProps, SplideTrack } from '@splidejs/react-splide';
 import '@splidejs/splide/dist/css/themes/splide-default.min.css';
 import ProgressBarPlaceholder from './ProgressBarPlaceholder';
 import theme from '@theme/index';
-
-export interface SplideInstance {
-  index: number;
-  length: number;
-  Components: {
-    Autoplay: {
-      pause: () => void;
-      play: () => void;
-      mount: () => void;
-      isPaused: () => boolean;
-      destroy: () => void;
-    }
-  }
-};
+import { SplideInstance } from '@interfaces/SplideInterface';
 
 const options: SplideProps["options"] = {
   type: 'loop',

src/interfaces/CardProps.ts

@@ -1,4 +1,6 @@
+import { CarouselData } from '@components/Carousel/carouselData';
 import { CardProps as MuiCardProps } from '@mui/material';
+import { SplideInstance } from './SplideInterface';
 
 export interface CardProps extends MuiCardProps {
   component?: React.ElementType;
@@ -24,4 +26,13 @@ export interface ThemeChangerWrapperProps extends CardProps {
 export interface CarouselCardProps extends CardProps {
   elevation?: number;
   active?: boolean;
+};
+
+export interface CarouselDataCardProps extends CarouselCardProps {
+  link: CarouselData['link'];
+  tagline: CarouselData['tagline'];
+  title: CarouselData['title'];
+  description: CarouselData['description'];
+  pauseTime: CarouselData['pauseTime'];
+  splide?: SplideInstance | null;
 };

src/interfaces/SplideInterface.ts

@@ -0,0 +1,19 @@
+import { CarouselData } from "@components/Carousel/carouselData";
+
+export interface SplideInstance {
+  index: number;
+  length: number;
+  Components: {
+    Autoplay: {
+      pause: () => void;
+      play: () => void;
+      mount: () => void;
+      isPaused: () => boolean;
+      destroy: () => void;
+    }
+  }
+};
+
+export interface UnitSlideProps extends CarouselData {
+  splide: SplideInstance | null;
+};