ABC Logo Package

A comprehensive logo component library for the ABC system, providing theme-aware and responsive logo components built with React, Next.js, and TypeScript.

📦 Installation

pnpm add abc-logo

🚀 Key Features

1. Theme-Aware Logos

• Automatic dark/light theme switching
• Support for multiple applications (ASVAB, EasyPrep)
• Seamless theme integration with abc-hx

2. Responsive Design

• Flexible sizing with customizable dimensions
• Mobile-optimized logo display
• CSS class customization support

3. Error Handling

• Automatic fallback to default logo on image load errors
• Custom error handling callbacks
• Graceful degradation

📚 API Reference

Components

ThemeAwareLogo

A logo component that automatically switches between light and dark themes based on the current theme context.

import { ThemeAwareLogo } from "abc-logo";

<ThemeAwareLogo
  app="asvab" // or "easyprep"
  alt="ASVAB Logo"
  imageWidth={160}
  imageHeight={40}
  className="custom-logo"
  imageClassName="logo-image"
/>

Props:

• app - Application type: "asvab" | "easyprep"
• alt - Alt text for the logo image
• imageWidth - Width of the logo (default: 160)
• imageHeight - Height of the logo (default: 40)
• className - Additional CSS classes for the container
• imageClassName - Additional CSS classes for the image
• imageStyle - Custom inline styles for the image
• onError - Custom error handler function

EasyPrepFooterLogo

A specialized logo component for EasyPrep footer usage, always displaying the light theme version.

import { EasyPrepFooterLogo } from "abc-logo";

<EasyPrepFooterLogo
  alt="EasyPrep Logo"
  imageWidth={120}
  imageHeight={30}
  className="footer-logo"
/>

Props:

• alt - Alt text for the logo image
• imageWidth - Width of the logo
• imageHeight - Height of the logo
• className - Additional CSS classes for the container
• imageClassName - Additional CSS classes for the image
• imageStyle - Custom inline styles for the image
• onError - Custom error handler function

Constants

listImages

Pre-configured logo URLs for different applications and themes.

import { listImages } from "abc-logo";

// Access logo URLs
const asvabLightLogo = listImages.asvab.light;
const asvabDarkLogo = listImages.asvab.dark;
const easyprepLightLogo = listImages.easyprep.light;
const easyprepDarkLogo = listImages.easyprep.dark;
const defaultLogo = listImages.default;

🎨 Styling

The logo components use Tailwind CSS classes and support custom styling:

<ThemeAwareLogo
  app="asvab"
  alt="ASVAB Logo"
  className="max-h-12 w-auto hover:opacity-80 transition-opacity"
  imageClassName="object-contain filter drop-shadow-sm"
  imageStyle={{ maxWidth: "200px" }}
/>

🧪 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

• abc-hx - Theme management and utilities

Development Dependencies

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

🎯 Use Cases

Application Logos

• ASVAB Application - Military test preparation platform
• EasyPrep Application - Educational test preparation platform

Theme Support

• Light Theme - Clean, bright logo variants
• Dark Theme - Optimized for dark backgrounds
• Automatic Switching - Seamless theme transitions

Responsive Design

• Desktop - Full-size logos with hover effects
• Mobile - Optimized sizing for small screens
• Tablet - Balanced sizing for medium screens

🔗 Integration

With Next.js

import { ThemeAwareLogo } from "abc-logo";

export default function Header() {
  return (
    <header className="flex items-center justify-between p-4">
      <ThemeAwareLogo
        app="asvab"
        alt="ASVAB Logo"
        imageWidth={160}
        imageHeight={40}
      />
    </header>
  );
}

With Custom Error Handling

import { ThemeAwareLogo } from "abc-logo";

<ThemeAwareLogo
  app="easyprep"
  alt="EasyPrep Logo"
  onError={() => {
    console.log("Logo failed to load, using fallback");
    // Custom error handling logic
  }}
/>;

📄 License

MIT