Frontend Components

Frontend Components

This directory contains reusable UI components that can be used across different pages and layouts in the AniNotion application.

1. ClickableCorner

An animated corner CTA component with a diagonal fold and hover effects.

Props:

• onClick (function): Click handler.
• text (string): Text to display (default: "READ").
• color (string): Color theme: "emerald", "blue", "purple", "red" (default: "emerald").
• layout (string): "grid" or "list" (default: "grid").

Usage:

import ClickableCorner from './components/ClickableCorner';
<ClickableCorner onClick={handleClick} text="VIEW" color="blue" />

2. CategoryBadge

A reusable category badge component.

Props:

• category (object|string): The category object or name.
• showIcon (boolean): Whether to show the tag icon (default: true).
• size (string): "sm", "md", or "lg" (default: "sm").

Usage:

import CategoryBadge from './components/CategoryBadge';
<CategoryBadge category={post.category} size="md" />

3. ImageGallery

A reusable image gallery with navigation controls.

Props:

• images (array): An array of image URLs.
• alt (string): Alt text for the images.
• layout (string): "grid" or "list" (default: "grid").
• showCounter (boolean): Whether to show the image counter (default: true).

Usage:

import ImageGallery from './components/ImageGallery';
<ImageGallery images={post.images} alt={post.title} />

4. DateDisplay

A reusable component for consistently formatted dates.

Props:

• date (string): The date string to format.
• showIcon (boolean): Whether to show a calendar icon (default: true).
• format (string): "short", "medium", or "long" (default: "short").

Usage:

import DateDisplay from './components/DateDisplay';
<DateDisplay date={post.createdAt} format="medium" />