@pfsn/shared-components

Shared React components for PFSN (Pro Football Sports Network) applications.

Installation

npm install @pfsn/shared-components

Components

PFSNHeader

A responsive header component with navigation for PFSN websites.

import { PFSNHeader } from '@pfsn/shared-components';

function App() {
  return (
    <PFSNHeader 
      currentPage="NFL"
      logoUrl="/custom-logo.png"
      logoAlt="My Logo"
    >
      {/* Optional children for game bar */}
      <div>Custom game bar content</div>
    </PFSNHeader>
  );
}

Props

• currentPage (optional): Current active page - 'CBB' | 'CFB' | 'Fantasy' | 'MLB' | 'NASCAR' | 'NBA' | 'NFL' | 'NHL' | 'Tennis' | 'WNBA' | 'WWE'
• logoUrl (optional): Custom logo URL (default: PFSN logo)
• logoAlt (optional): Logo alt text (default: "PFSN Logo")
• children (optional): Content to display in the game bar section

PFSNFooter

A comprehensive footer component with links to PFSN resources, tools, and games.

import { PFSNFooter } from '@pfsn/shared-components';

function App() {
  return (
    <PFSNFooter 
      currentPage="NFL"
      currentToolName="Mock Draft Simulator"
      currentToolHref="/mockdraft"
    />
  );
}

Props

• currentPage (optional): Current active page - 'CBB' | 'CFB' | 'Fantasy' | 'MLB' | 'NASCAR' | 'NBA' | 'NFL' | 'NHL' | 'Tennis' | 'WNBA' | 'WWE'
• currentToolName (optional): Name of the current tool (displayed in Tools & Games section)
• currentToolHref (optional): URL of the current tool (default: "/")

Styling

The components come with built-in CSS styling. The styles are automatically imported when you use the components.

FeedbackButton

A customizable feedback button that slides out a form for collecting user feedback.

import { FeedbackButton } from '@pfsn/shared-components';

function App() {
  const handleFeedback = async (data) => {
    // Send feedback to your backend
    await fetch('/api/feedback', {
      method: 'POST',
      body: JSON.stringify(data),
    });
  };

  return (
    <FeedbackButton 
      onSubmit={handleFeedback}
      supportEmail="[email protected]"
      buttonText="Feedback"
      position="right"
    />
  );
}

Props

• onSubmit (optional): Async function to handle feedback submission
• supportEmail (optional): Support email address (default: "[email protected]")
• buttonText (optional): Text on the feedback button (default: "Submit Feedback")
• position (optional): Button position - 'left' | 'right' (default: "right")
• title (optional): Sidebar title (default: "Submit Feedback")
• subtitle (optional): Sidebar subtitle
• helpfulDetails (optional): Array of helpful detail items to show
• className (optional): Additional CSS classes for the button

Features

• Responsive design with mobile menu support
• Sticky header with shadow on scroll
• Social media links in footer
• Comprehensive navigation structure
• Feedback button with slide-out form
• TypeScript support with exported types

License

ISC