fix(src/components/Heading/index.tsx) criamos um componente Heading c…

…om variantes h1 e h2 para substituir a necessidade de mais de um componente, tambem modificamos os temas adicionando h3 e modificando o h2 @Lip29bm @mylenaverspeelt
aceleradora-TW · Oct 25, 2024 · 36fcbdf · 36fcbdf
1 parent fdae159
commit 36fcbdf
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 13 deletions.
diff --git a/src/app/config/theme.tsx b/src/app/config/theme.tsx
@@ -614,6 +614,26 @@ const theme = createTheme({
       }
     },
     h2: {
+      lineHeight: 1.6,
+      fontWeight: 500,
+      letterSpacing: 0.15,
+      [`@media (min-width:0px)`]: {
+        fontSize: "1.5rem",
+      },
+      [`@media (min-width:600px)`]: {
+        fontSize: "1.8rem",
+      },
+      [`@media (min-width:900px)`]: {
+        fontSize: "2.2rem",
+      },
+      [`@media (min-width:1200px)`]: {
+        fontSize: "2.4rem",
+      },
+      [`@media (min-width:1536px)`]: {
+        fontSize: "2.4rem",
+      }
+    },
+    h3: {
       lineHeight: 1.6,
       fontWeight: 500,
       letterSpacing: 0.15,
@@ -623,6 +643,9 @@ const theme = createTheme({
       [`@media (min-width:600px)`]: {
         fontSize: "1.4rem",
       },
+      [`@media (min-width:900px)`]: {
+        fontSize: "1.5rem",
+      },
       [`@media (min-width:1200px)`]: {
         fontSize: "1.6rem",
       },

diff --git a/src/components/ButtonCard/index.tsx b/src/components/ButtonCard/index.tsx
@@ -31,7 +31,7 @@ export const ButtonCard: React.FC<ButtonCardProps> = ({ title, description, rout
             <Card sx={theme.customStyles.cardButtonContainer}>
                 <CardActionArea onClick={() => handleClick(route)} sx={{height: "100%"}}>
                     <CardContent sx={theme.customStyles.cardButtonContent}>
-                        <Typography gutterBottom variant="h2" sx={theme.customStyles.cardTitle}>
+                        <Typography gutterBottom variant="h3" sx={theme.customStyles.cardTitle}>
                             {title}
                         </Typography>
                         <Typography variant="body1" sx={cardStyles}>

diff --git a/src/components/title/index.tsx → src/components/Heading/index.tsx b/src/components/title/index.tsx → src/components/Heading/index.tsx
@@ -4,16 +4,17 @@ import Typography from "@mui/material/Typography"
 import { theme, ThemeConfig } from "../../app/config/theme"
 import { Grid } from "@mui/material"
 
-interface TitleProps {
+interface HeadingProps {
     text: string
+      variant: "h1" | "h2" 
 }
 
-export const Title: React.FC<TitleProps> = ({ text }) => {
+export const Heading: React.FC<HeadingProps> = ({ text, variant }) => {
     return (
         <ThemeConfig>
             <Grid container>  
                 <Typography
-                    variant="h1"
+                    variant={variant}
                     sx={theme.customStyles.title}>
                     {text}
                 </Typography>

diff --git a/src/components/PageElements/Container/ContainerCardsTopics/index.tsx b/src/components/PageElements/Container/ContainerCardsTopics/index.tsx
@@ -35,8 +35,7 @@ export const ContainerCardTopics: React.FC<ContainerCardTopicsProps> = ({ topics
           <BaseCard
             title={topic}
             description={descriptionsArray[index]}
-            route={`${currentPath}/${infoArray[index]}-${topic}`}
-          />
+            route={`${currentPath}/${infoArray[index]}-${topic}`} textImage={""}          />
         </Grid>
       ))}
     </Grid>

diff --git a/src/components/PageElements/Content/DetailingThemeContent/index.tsx b/src/components/PageElements/Content/DetailingThemeContent/index.tsx
@@ -1,10 +1,10 @@
 import React from "react";
 import { Grid } from "@mui/material";
 import { BreadCrumb } from "@/components/BreadCrumb";
-import { Title } from "@/components/title";
 import { ContainerCardTopics } from "../../Container/ContainerCardsTopics";
 import { ApiResponse, DataItem, ThemeField } from "@/types/type";
 import { DescriptionDivider } from "../../../Description/DescriptionDivider";
+import { Heading } from "@/components/Heading";
 
 interface DetailingContentProps {
   data: ApiResponse;
@@ -14,11 +14,11 @@ const ThemeContent: React.FC<{ field: ThemeField }> = ({ field }) => (
   <>
     <Grid item xl={12} lg={9} md={6} sm={3}>
       <BreadCrumb />
-      <Title text={field.title} />
+      <Heading variant="h1" text={field.title} />
     </Grid>
     <DescriptionDivider text={field.description} />
     <Grid item xl={12} lg={9} md={6} sm={3}>
-      <Title text={"Tópicos"} />
+      <Heading variant="h2" text={"Tópicos"} />
     </Grid>
     <ContainerCardTopics
       topics={field.topics}

diff --git a/src/components/PageElements/Content/DetailingTopicContent/index.tsx b/src/components/PageElements/Content/DetailingTopicContent/index.tsx
@@ -1,11 +1,11 @@
 import React from "react"
 import { Grid } from "@mui/material"
 import { BreadCrumb } from "@/components/BreadCrumb"
-import { Title } from "@/components/title"
 import { ApiResponse, DataItem, TopicField } from "@/types/type"
 import { DescriptionReference } from "@/components/Description/DescriptionReference"
 import { ContainerCardsExercises } from "../../Container/ContainerCardsExercises"
 import { DescriptionWithVideo } from "@/components/Description/DescriptionWithVideo"
+import { Heading } from "@/components/Heading"
 
 interface DetailingContentProps {
   data: ApiResponse
@@ -16,7 +16,7 @@ const TopicContent: React.FC<{ field: TopicField }> = ({ field }) => (
   <>
     <Grid item xl={12} lg={9} md={6} sm={3}>
       <BreadCrumb />
-      <Title text={field.title} />
+      <Heading variant="h1"text={field.title} />
     </Grid>
     <DescriptionWithVideo
       textDescription={field.description}
@@ -26,7 +26,7 @@ const TopicContent: React.FC<{ field: TopicField }> = ({ field }) => (
       references={field.videoReference}
     />
     <Grid item xl={12} lg={9} md={6} sm={3}>
-      <Title text={"Exercícios"} />
+      <Heading variant="h2" text={"Exercícios"} />
     </Grid>
     <ContainerCardsExercises
       exercises={field.exercises}
@@ -37,7 +37,7 @@ const TopicContent: React.FC<{ field: TopicField }> = ({ field }) => (
     {field.references && field.references.trim() != "" && (
       <>
         <Grid item xl={12} lg={9} md={6} sm={3}>
-          <Title text={"Referências"} />
+          <Heading variant="h2" text={"Referências"} />
         </Grid>
         <DescriptionReference text={field.references} />
       </>