feat: Update card icon components for responsive design (#102)

* refactor: restructure Hero component layout to follow figma design

* feat: update card icon components to use responsive sizes and improve layout for mobile

* feat: add responsive size classes and utility functions for CardIcon component

Author: BIA3IA

src/components/card-icon/basic-card-media.tsx

@@ -1,7 +1,7 @@
 import { GradientIcon, type GradientIconType } from "../gradient-icon"
-import type { CardSize } from "./types"
+import type { ResponsiveCardSize } from "./types"
 import { getIconSizeClasses } from "./utils"
 
-export function BasicCardMedia({ icon: Icon, size }: { icon: GradientIconType; size: CardSize }) {
+export function BasicCardMedia({ icon: Icon, size }: { icon: GradientIconType; size: ResponsiveCardSize }) {
   return <GradientIcon icon={Icon} className={getIconSizeClasses(size)} />
 }

src/components/card-icon/classes.ts

@@ -0,0 +1,36 @@
+import type { SizeClassMap } from "./types"
+
+export const ICON_SIZE_CLASSES: SizeClassMap = {
+  xs: "h-10 w-10",
+  sm: "h-14 w-14",
+  md: "h-32 w-32",
+  lg: "h-44 w-44",
+}
+
+export const CARD_PADDING_WITHOUT_DESCRIPTION: SizeClassMap = {
+  xs: "p-3",
+  sm: "px-8 py-4",
+  md: "p-8",
+  lg: "p-8",
+}
+
+export const CARD_PADDING_WITH_DESCRIPTION: SizeClassMap = {
+  xs: "p-8",
+  sm: "p-8",
+  md: "p-8",
+  lg: "p-8",
+}
+
+export const CONTENT_GAP_CLASSES: SizeClassMap = {
+  xs: "gap-2",
+  sm: "gap-2",
+  md: "gap-6",
+  lg: "gap-6",
+}
+
+export const TITLE_SIZE_CLASSES: SizeClassMap = {
+  xs: "typo-label-large",
+  sm: "typo-headline-medium",
+  md: "typo-headline-medium",
+  lg: "typo-headline-medium",
+}

src/components/card-icon/description-card-media.tsx

@@ -1,9 +1,9 @@
 import { cn } from "@/lib/utils"
 import { GradientIcon, type GradientIconType } from "../gradient-icon"
-import type { CardSize } from "./types"
+import type { ResponsiveCardSize } from "./types"
 import { getIconSizeClasses } from "./utils"
 
-export function DescriptionCardMedia({ icon: Icon, size }: { icon: GradientIconType; size: CardSize }) {
+export function DescriptionCardMedia({ icon: Icon, size }: { icon: GradientIconType; size: ResponsiveCardSize }) {
   return (
     <div className={cn("relative", getIconSizeClasses(size))}>
       <GradientIcon icon={Icon} className="h-full w-full" />

src/components/card-icon/index.tsx

@@ -4,7 +4,7 @@ import { BasicCardMedia } from "./basic-card-media"
 import { DescriptionCardMedia } from "./description-card-media"
 import { CardHoverBackground } from "./hover-background"
 import type { CardIconProps } from "./types"
-import { getCardPaddingClasses, getContentGapClasses } from "./utils"
+import { getCardPaddingClasses, getContentGapClasses, getTitleSizeClasses } from "./utils"
 
 export function CardIcon(props: CardIconProps) {
   const { title, icon, size = "md", href, hoverEffect = false, className } = props
@@ -46,7 +46,8 @@ export function CardIcon(props: CardIconProps) {
           <div className={cn("flex flex-col", isDescriptionCard ? "gap-2 text-left" : "items-center text-center")}>
             <h3
               className={cn(
-                "typo-headline-medium bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text text-transparent",
+                getTitleSizeClasses(size),
+                "bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text text-transparent",
                 isDescriptionCard ? "text-left" : "text-center"
               )}
             >

src/components/card-icon/types.ts

@@ -1,18 +1,28 @@
 import type { GradientIconType } from "@/components/gradient-icon"
 
-export type CardSize = "sm" | "md" | "lg"
+export type CardSize = "xs" | "sm" | "md" | "lg"
+export type CardBreakpoint = "base" | "sm" | "md" | "lg"
+
+export type SizeClassMap = Record<CardSize, string>
+
+export type ResponsiveCardSizeConfig = {
+  base: CardSize
+  sm?: CardSize
+  md?: CardSize
+  lg?: CardSize
+}
+
+export type ResponsiveCardSize = CardSize | ResponsiveCardSizeConfig
 
 export type SharedCardProps = {
   title: string
   icon: GradientIconType
-  size?: CardSize
+  size?: ResponsiveCardSize
   href?: string
   hoverEffect?: boolean
   className?: string
 }
 
-export type CardWithDescriptionProps = SharedCardProps & {
-  description: string
+export type CardIconProps = SharedCardProps & {
+  description?: string
 }
-
-export type CardIconProps = SharedCardProps | CardWithDescriptionProps

src/components/card-icon/utils.ts

@@ -1,17 +1,63 @@
-import type { CardSize } from "./types"
+import {
+  CARD_PADDING_WITH_DESCRIPTION,
+  CARD_PADDING_WITHOUT_DESCRIPTION,
+  CONTENT_GAP_CLASSES,
+  ICON_SIZE_CLASSES,
+  TITLE_SIZE_CLASSES,
+} from "./classes"
 
-export function getIconSizeClasses(size: CardSize) {
-  if (size === "sm") return "h-14 w-14"
-  if (size === "lg") return "h-44 w-44"
-  return "h-32 w-32"
+import type { CardBreakpoint, ResponsiveCardSize, SizeClassMap } from "./types"
+
+const BREAKPOINTS: CardBreakpoint[] = ["base", "sm", "md", "lg"]
+
+const BREAKPOINT_PREFIX: Record<CardBreakpoint, string> = {
+  base: "",
+  sm: "sm:",
+  md: "md:",
+  lg: "lg:",
+}
+
+function prefixClasses(prefix: string, value: string): string {
+  return value
+    .split(" ")
+    .filter(Boolean)
+    .map((token) => `${prefix}${token}`)
+    .join(" ")
+}
+
+function resolveResponsiveClasses(size: ResponsiveCardSize, classesBySize: SizeClassMap): string {
+  if (typeof size === "string") {
+    return classesBySize[size]
+  }
+
+  return BREAKPOINTS.map((breakpoint) => {
+    const currentSize = size[breakpoint]
+
+    if (!currentSize) {
+      return ""
+    }
+
+    return prefixClasses(BREAKPOINT_PREFIX[breakpoint], classesBySize[currentSize])
+  })
+    .filter(Boolean)
+    .join(" ")
+}
+
+export function getIconSizeClasses(size: ResponsiveCardSize) {
+  return resolveResponsiveClasses(size, ICON_SIZE_CLASSES)
+}
+
+export function getCardPaddingClasses(size: ResponsiveCardSize, hasDescription: boolean) {
+  return resolveResponsiveClasses(
+    size,
+    hasDescription ? CARD_PADDING_WITH_DESCRIPTION : CARD_PADDING_WITHOUT_DESCRIPTION
+  )
 }
 
-export function getCardPaddingClasses(size: CardSize, hasDescription: boolean) {
-  if (!hasDescription && size === "sm") return "px-8 py-4"
-  return "p-8"
+export function getContentGapClasses(size: ResponsiveCardSize) {
+  return resolveResponsiveClasses(size, CONTENT_GAP_CLASSES)
 }
 
-export function getContentGapClasses(size: CardSize) {
-  if (size === "sm") return "gap-2"
-  return "gap-6"
+export function getTitleSizeClasses(size: ResponsiveCardSize) {
+  return resolveResponsiveClasses(size, TITLE_SIZE_CLASSES)
 }

src/components/home/materials.tsx

@@ -22,37 +22,42 @@ const featuredCards = [
 ] as const
 
 const quickLinks = [
-  { title: "Dispense", icon: FiBook, size: "sm", href: "#" },
-  { title: "Esami", icon: FiFileText, size: "sm", href: "#" },
-  { title: "Appunti", icon: FiClipboard, size: "sm", href: "#" },
+  { title: "Dispense", icon: FiBook, size: { base: "xs", sm: "sm" }, href: "#" },
+  { title: "Esami", icon: FiFileText, size: { base: "xs", sm: "sm" }, href: "#" },
+  { title: "Appunti", icon: FiClipboard, size: { base: "xs", sm: "sm" }, href: "#" },
 ] as const
 
 export function Materials() {
   return (
-    <section className="mx-auto flex max-w-500 flex-col-reverse gap-8 px-4 py-10 sm:px-8 sm:py-12 lg:gap-10 lg:px-12 xl:flex-row xl:items-start xl:gap-12 xl:px-16 2xl:gap-32 2xl:px-32">
-      <div className="flex grow flex-col gap-5 lg:gap-6 xl:gap-8 xl:pt-12 2xl:pt-44">
-        <div className="grid gap-12 md:grid-cols-2 2xl:gap-20">
+    <section className="mx-auto flex max-w-400 flex-col-reverse gap-24 p-11 sm:px-20 sm:py-28 2xl:flex-row 2xl:items-start 2xl:gap-32">
+      <div className="flex grow flex-col gap-5 sm:gap-6 2xl:gap-8 2xl:pt-44">
+        <div className="grid gap-4 sm:grid-cols-2 sm:gap-12 2xl:gap-20">
+          {/* TODO sotto sm usare le altre card fatte da Diubi */}
           {featuredCards.map((card) => (
             <CardIcon key={card.title} {...card} className="h-full" />
           ))}
         </div>
 
-        <div className="grid gap-4 sm:grid-cols-2 sm:gap-12 lg:grid-cols-3 2xl:gap-20">
+        <div className="grid grid-cols-3 gap-4 sm:gap-12 2xl:gap-20">
           {quickLinks.map((card) => (
             <CardIcon key={card.title} {...card} className="h-full" />
           ))}
         </div>
       </div>
 
-      <div className="flex flex-col items-start gap-8 xl:justify-self-end">
-        <h2 className="typo-display-large sm:typo-display-extralarge w-fit bg-linear-to-b from-text-primary to-text-secondary bg-clip-text py-4 text-transparent">
+      <div className="flex flex-col items-center gap-8 text-center sm:ml-auto sm:items-start sm:text-start">
+        <h2 className="typo-display-large sm:typo-display-extralarge bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent sm:py-4">
           Materials
         </h2>
-        <p className="typo-body-large max-w-lg">
+        <p className="typo-body-large hidden max-w-lg sm:block">
           Il piu grande archivio didattico creato dagli studenti per gli studenti del Politecnico di Milano. Cerca tra
           migliaia di appunti, dispense, temi d'esame e molto altro. Carica i tuoi file per far crescere la community e
           trova tutto cio che ti serve, organizzato per corso di studi.
         </p>
+        <p className="typo-body-large max-w-lg sm:hidden">
+          Il più grande archivio didattico degli studenti del Politecnico. Trova appunti, dispense ed esami, oppure
+          carica i tuoi file per far crescere la community.
+        </p>
         <Button variant="primary" size="lg" className="w-fit">
           Scopri di piu
           <FiArrowUpRight />