SupportedFormats

​

Overview

​

Key Features

• Categorized format display
• Four main categories: Documents, Presentations & Spreadsheets, Web & Data, Images & Media
• Technology attribution (Microsoft MarkItDown)
• No props required (static content)
• Responsive grid layout

​

Props

​

Usage Example

import { SupportedFormats } from './components/SupportedFormats/SupportedFormats';

function App() {
  return (
    <div className="app">
      <UploadArea {...uploadProps} />
      <SupportedFormats />
    </div>
  );
}

​

Supported File Formats

​

Documents

• PDF files (.pdf)
• Word documents (.docx)
• Text files (.txt)
• Rich Text (.rtf)

​

Presentations & Spreadsheets

• PowerPoint (.pptx)
• Excel files (.xlsx)
• CSV files (.csv)

​

Web & Data

• HTML files (.html)
• JSON files (.json)
• XML files (.xml)

​

Images & Media

• PNG, JPG images
• Audio files (.wav, .mp3)
• OCR text extraction

​

Component Structure

1. Header Section
   • Icon (📋)
   • Title: “Supported File Formats”
   • Subtitle: “Works out-of-the-box with the formats you use every day.”
2. Format Grid
   • Four category sections
   • Each category has a heading and bulleted list
   • Responsive grid layout
3. Technology Attribution
   • Credits Microsoft MarkItDown
   • Mentions AI-enhanced conversion

​

Styling & Customization

• .supported-card - Main container
• .supported-header - Header section with icon and titles
• .supported-icon - Icon wrapper
• .supported-title - Main heading
• .supported-subtitle - Descriptive subtitle
• .supported-grid - Grid container for categories
• .format-category - Individual category section
• .format-list - Bulleted list of formats
• .supported-tip - Technology attribution footer

​

Customization Options

1. Adding/Removing Formats: Edit the JSX to include additional file types
2. Reorganizing Categories: Change category names or groupings
3. Updating Styling: Modify SupportedFormats.css for different layouts
4. Making it Dynamic: Convert to accept props for dynamic format lists

​

Implementation Details

​

Source Code Location

​

Key Implementation Notes

• Simple functional component with no state or props
• Uses semantic HTML with proper heading hierarchy (h3, h4)
• Grid layout allows responsive reorganization
• HTML entities used for proper character encoding (& for ”&“)

​

Extending the Component

​

Making Formats Dynamic

interface Format {
  name: string;
  extensions: string[];
}

interface FormatCategory {
  title: string;
  formats: Format[];
}

interface SupportedFormatsProps {
  categories?: FormatCategory[];
}

export const SupportedFormats = ({ categories }: SupportedFormatsProps) => {
  const defaultCategories: FormatCategory[] = [
    {
      title: "Documents",
      formats: [
        { name: "PDF files", extensions: [".pdf"] },
        { name: "Word documents", extensions: [".docx"] },
        // ...
      ]
    },
    // ...
  ];

  const displayCategories = categories || defaultCategories;

  return (
    <div className="supported-card">
      {/* Header */}
      <div className="supported-grid">
        {displayCategories.map((category, idx) => (
          <div key={idx} className="format-category">
            <h4>{category.title}</h4>
            <ul className="format-list">
              {category.formats.map((format, fIdx) => (
                <li key={fIdx}>
                  {format.name} ({format.extensions.join(", ")})
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      {/* Footer */}
    </div>
  );
};

​

Integrating with API

function App() {
  const [formats, setFormats] = useState<FormatCategory[]>([]);

  useEffect(() => {
    fetch('/api/supported-formats')
      .then(res => res.json())
      .then(data => setFormats(data));
  }, []);

  return <SupportedFormats categories={formats} />;
}