seperate types and interfaces

Author: hunxjunedo

src/components/Home/FeaturesAndBenefitsSection.tsx

@@ -1,13 +1,10 @@
+import { SecondaryFeature } from "@/interfaces/HomePage";
 import { Box, Card, CardContent, Container, Grid, Typography } from "@mui/material";
 import { Blocks, BookOpen, Clock7, Link, LockKeyholeOpen, PencilRuler, Star, UsersRound } from "lucide-react";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
-type Feature = {
-  Icon: React.ElementType;
-  title: string;
-  description: string;
-}
+
 
 export const HeadingAndDescription = ({ heading, description }: { heading: string; description: string }) => (
   <Box>
@@ -28,7 +25,7 @@ export const HeadingAndDescription = ({ heading, description }: { heading: strin
   </Box>
 );
 
-const FeatureCard = ({ item }: { item: Feature }) => (
+const FeatureCard = ({ item }: { item: SecondaryFeature }) => (
   <Grid item xs={12} sm={6} md={3}>
     <Card sx={cardStyles}>
       <Box sx={iconWrapperStyles}>
@@ -51,7 +48,7 @@ export default function FeaturesAndBenefitsSection() {
 
   const items = useMemo(() => {
     const icons = [BookOpen, LockKeyholeOpen, UsersRound, Star, Link, PencilRuler, Blocks, Clock7];
-    const itemsTexts = t("features_section.features", { returnObjects: true }) as Feature[];
+    const itemsTexts = t("features_section.features", { returnObjects: true }) as SecondaryFeature[];
     return icons.map((Icon, index) => ({ Icon, ...itemsTexts[index] }));
   }, [t]);
 

src/components/Home/FeaturesAtGlance.tsx

@@ -1,19 +1,13 @@
 import useIsDesktop from "@/hooks/useIsDesktop";
+import { FeatureItemProps, PrimaryFeature } from "@/interfaces/HomePage";
 import { Box, Button, IconButton, Typography } from "@mui/material";
 import { ArrowRight, Blocks, PaletteIcon, SparkleIcon, Sun } from "lucide-react";
 import { FC, useState } from "react";
 import { HeadingAndDescription } from "./FeaturesAndBenefitsSection";
 
-// Feature structure
-type Feature = {
-  icon: JSX.Element;
-  heading: string;
-  description: string;
-  actionText: string;
-}
 
 // Feature list
-const features: Feature[] = [
+const features: PrimaryFeature[] = [
   { icon: <Sun />, heading: "Dark/light mode toggle", description: "Easily fit your chatbot to common dark or light color themes", actionText: "Try it" },
   { icon: <PaletteIcon />, heading: "Premade themes", description: "A growing selection of premade, free-to-use themes", actionText: "Swap theme" },
   { icon: <Blocks />, heading: "Added functionality with plugins", description: "Easily implement additional features with plugins", actionText: "See example" },
@@ -45,11 +39,7 @@ const actionButtonStyles = {
   gap: 1
 };
 
-// Props for FeatureItem components
-type FeatureItemProps = {
-  onClick: () => void;
-  selected: boolean;
-} & Feature
+
 
 // Desktop Feature Item
 const FeatureItem: FC<FeatureItemProps> = ({ icon, heading, description, actionText, onClick, selected }) => (

src/components/Home/TestimonialSection.tsx

@@ -1,22 +1,10 @@
 import useIsDesktop from "@/hooks/useIsDesktop";
+import { Testimonial, TestimonialCardProps } from "@/interfaces/HomePage";
 import { Avatar, Box, Typography } from "@mui/material";
 import Carousel from "react-multi-carousel";
 import "react-multi-carousel/lib/styles.css";
 import { HeadingAndDescription } from "./FeaturesAndBenefitsSection";
 
-type Testimonial = {
-  avatar: string;
-  name: string;
-  username: string;
-  text: string;
-}
-
-type TestimonialCardProps = {
-  avatar: string;
-  name: string;
-  username: string;
-  text: string;
-}
 
 const responsive = {
   superLargeDesktop: {

src/interfaces/HomePage.ts

@@ -0,0 +1,31 @@
+export type Testimonial = {
+  avatar: string;
+  name: string;
+  username: string;
+  text: string;
+}
+
+export type TestimonialCardProps = {
+  avatar: string;
+  name: string;
+  username: string;
+  text: string;
+}
+
+export interface PrimaryFeature  {
+  icon: JSX.Element;
+  heading: string;
+  description: string;
+  actionText: string;
+}
+
+export type FeatureItemProps = {
+  onClick: () => void;
+  selected: boolean;
+} & PrimaryFeature
+
+export interface SecondaryFeature  {
+  Icon: React.ElementType;
+  title: string;
+  description: string;
+}