ABC Footer Package

A comprehensive footer component library for the ABC system, providing responsive and theme-aware footer layouts with integrated forms, social links, and application-specific content.

📦 Installation

pnpm add abc-footer

🚀 Key Features

1. Application-Specific Footers

• Dynamic footer content based on application type (ASVAB, CDL, EasyPrep)
• Theme-aware logo integration with automatic dark/light switching
• Responsive design optimized for mobile, tablet, and desktop

2. Integrated Forms

• Contact form with validation using React Hook Form and Yup
• Email support integration with application-specific contact information
• Form submission handling with proper error management

3. Social Media Integration

• Social platform contact logos and links
• Platform-specific contact information
• Responsive social media layout

4. Legal and Compliance

• DMCA protection status display
• Copyright information
• Privacy policy and terms of service links

📚 API Reference

Components

FooterApp

Main footer component that renders application-specific footer content.

import { FooterApp } from "abc-footer";

<FooterApp
  appInfo={appInfo}
  isParent={false}
>
  {/* Additional footer content */}
</FooterApp>

Props:

• appInfo - Application information object (IAppInfoCore)
• children - Additional React nodes to render in footer
• isParent - Whether this is a parent application footer (optional, default: false)

SubmitFooter

Contact form component with validation and submission handling.

import { SubmitFooter } from "abc-footer/submitFooter";

<SubmitFooter
  emailSupport="[email protected]"
  appShortName="asvab"
/>

Props:

• emailSupport - Support email address
• appShortName - Short name of the application

Constants

listInfoFooter

Pre-configured footer information for different applications.

import { listInfoFooter } from "abc-footer/constants";

// Access application-specific footer text
const asvabInfo = listInfoFooter.asvab;
const cdlInfo = listInfoFooter.cdl;

🎨 Styling

The footer components use Tailwind CSS classes and support responsive design:

<FooterApp appInfo={appInfo} className="custom-footer-class">
  <div className="additional-content">{/* Custom footer content */}</div>
</FooterApp>

🧪 Testing

# Run tests
pnpm test

# Run tests with coverage
pnpm test:coverage

# Run tests once
pnpm test:run

🔧 Development

# Build package
pnpm build

# Development mode
pnpm dev

# Clean dist
pnpm clean

📦 Dependencies

Production Dependencies

• @hookform/resolvers - Form validation resolvers
• react-hook-form - Form state management
• yup - Schema validation
• abc-service - Service layer utilities
• abc-logo - Logo components
• abc-model - Data models and types

Development Dependencies

• @types/node - Node.js type definitions
• vitest - Testing framework
• @vitest/coverage-v8 - Coverage reporting
• jsdom - DOM environment for tests

🎯 Use Cases

Application Footers

• ASVAB Application - Military test preparation platform footer
• CDL Application - Commercial driver's license test footer
• EasyPrep Application - Educational test preparation footer

Footer Features

• Logo Integration - Theme-aware application logos
• Contact Forms - Integrated support contact forms
• Social Links - Platform-specific social media links
• Legal Information - DMCA protection and copyright notices

Responsive Design

• Mobile - Stacked layout with optimized spacing
• Tablet - Grid layout with proper column distribution
• Desktop - Full-width layout with multiple columns

🔗 Integration

With Next.js

import { FooterApp } from "abc-footer";
import { IAppInfoCore } from "abc-model/app";

export default function Layout({ children }: { children: React.ReactNode }) {
  const appInfo: IAppInfoCore = {
    appShortName: "asvab",
    // ... other app info
  };

  return (
    <div className="min-h-screen flex flex-col">
      <main className="flex-1">{children}</main>
      <FooterApp appInfo={appInfo} />
    </div>
  );
}

With Custom Styling

import { FooterApp } from "abc-footer";

<FooterApp
  appInfo={appInfo}
  className="bg-custom-footer border-t-2 border-primary"
>
  <div className="custom-footer-section">{/* Additional custom content */}</div>
</FooterApp>;

📱 Responsive Behavior

Mobile (< 768px)

• Single column layout
• Stacked content sections
• Optimized touch targets
• Hidden desktop-only elements

Tablet (768px - 1024px)

• Two-column grid layout
• Balanced content distribution
• Medium-sized spacing

Desktop (> 1024px)

• Multi-column grid layout
• Full-width content
• Maximum spacing and padding

📄 License

MIT