mirror of
https://github.com/harivansh-afk/Austens-Wedding-Guide.git
synced 2026-04-15 08:03:41 +00:00
navbar improvements
This commit is contained in:
parent
8e8d41eab4
commit
e06beffcac
2 changed files with 255 additions and 771 deletions
|
|
@ -1,8 +1,8 @@
|
|||
# Technical Documentation - Austen's Wedding Guide
|
||||
# Technical Documentation - ENGL 2502: Jane Austen
|
||||
|
||||
## Project Overview
|
||||
|
||||
A React-based web application that serves as a modern wedding guide themed around Jane Austen's works. The project combines literary analysis with interactive features, presenting Austen's insights in a contemporary context.
|
||||
A React-based academic web application focused on analyzing Jane Austen's works, themes, and their modern relevance. The project combines literary analysis with interactive features to provide deep insights into Austen's novels and their contemporary interpretations.
|
||||
|
||||
## Tech Stack
|
||||
|
||||
|
|
@ -20,789 +20,248 @@ src/
|
|||
├── components/
|
||||
│ ├── ui/ # Shadcn UI components
|
||||
│ ├── layout/ # Layout components
|
||||
│ ├── vendor/ # Vendor-specific components
|
||||
│ ├── analysis/ # Analysis components
|
||||
│ │ ├── NovelAnalysis.tsx
|
||||
│ │ ├── CharacterAnalysis.tsx
|
||||
│ │ └── ThemeAnalysis.tsx
|
||||
│ ├── timeline/ # Timeline components
|
||||
│ │ ├── InteractiveTimeline.tsx
|
||||
│ │ └── SocialClassView.tsx
|
||||
│ ├── BlogPost.tsx # Blog post component
|
||||
│ ├── CommentSection.tsx
|
||||
│ ├── network/ # Character network components
|
||||
│ │ ├── NetworkGraph.tsx
|
||||
│ │ └── RelationshipView.tsx
|
||||
│ ├── ErrorBoundary.tsx
|
||||
│ ├── Footer.tsx
|
||||
│ ├── Layout.tsx
|
||||
│ ├── LoadingSpinner.tsx
|
||||
│ ├── Navbar.tsx
|
||||
│ ├── Pagination.tsx
|
||||
│ ├── QuoteDisplay.tsx
|
||||
│ ├── ShareButtons.tsx
|
||||
│ └── theme-provider.tsx
|
||||
│
|
||||
├── data/
|
||||
│ ├── blog-posts.ts # Character blog content
|
||||
│ ├── quotes.ts # Austen quotes
|
||||
│ ├── quiz.ts # Character quiz data
|
||||
│ ├── success-stories.ts
|
||||
│ ├── literary-analysis.ts # Literary analysis data
|
||||
│ ├── comparative-analysis.ts # Comparative analysis data
|
||||
│ └── vendors.ts
|
||||
│ ├── novels/ # Novel-specific content
|
||||
│ │ ├── northanger-abbey.ts
|
||||
│ │ ├── sense-and-sensibility.ts
|
||||
│ │ ├── pride-and-prejudice.ts
|
||||
│ │ └── mansfield-park.ts
|
||||
│ ├── analysis/ # Analysis data
|
||||
│ │ ├── themes.ts
|
||||
│ │ ├── characters.ts
|
||||
│ │ └── social-class.ts
|
||||
│ ├── contemporary/ # Modern retellings data
|
||||
│ │ ├── pride.ts # Pride by Ibi Zoboi
|
||||
│ │ └── longbourn.ts # Longbourn by Jo Baker
|
||||
│ └── timeline.ts # Chronological data
|
||||
│
|
||||
├── pages/
|
||||
│ ├── BlogPost/
|
||||
│ ├── Analysis.tsx # Literary analysis page
|
||||
│ ├── Blogs.tsx
|
||||
│ ├── Home.tsx
|
||||
│ ├── MarketCalculator.tsx
|
||||
│ ├── Quiz.tsx
|
||||
│ ├── Stories.tsx
|
||||
│ ├── SuccessStories.tsx
|
||||
│ ├── ComparativeAnalysis.tsx # Comparative analysis page
|
||||
│ └── Vendors.tsx
|
||||
│ ├── novels/ # Individual novel pages
|
||||
│ │ ├── NorthangerAbbey.tsx
|
||||
│ │ ├── SenseAndSensibility.tsx
|
||||
│ │ ├── PrideAndPrejudice.tsx
|
||||
│ │ └── MansfieldPark.tsx
|
||||
│ ├── Analysis.tsx # Literary analysis page
|
||||
│ ├── Characters.tsx # Character studies
|
||||
│ ├── Contemporary.tsx # Modern retellings
|
||||
│ ├── Network.tsx # Character network
|
||||
│ ├── Timeline.tsx # Interactive timeline
|
||||
│ └── SocialClass.tsx # Social class analysis
|
||||
```
|
||||
|
||||
## Routing Structure
|
||||
## Navigation Structure
|
||||
|
||||
The application uses React Router for navigation with the following route structure:
|
||||
The application uses a new academically-focused navigation structure:
|
||||
|
||||
```typescript
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/blogs" element={<Blogs />} />
|
||||
<Route path="/blogs/:id" element={<BlogPost />} />
|
||||
<Route path="/quiz" element={<Quiz />} />
|
||||
<Route path="/vendors" element={<Vendors />} />
|
||||
<Route path="/success-stories" element={<SuccessStories />} />
|
||||
<Route path="/market-calculator" element={<MarketCalculator />} />
|
||||
<Route path="/analysis" element={<Analysis />} />
|
||||
<Route path="/comparative" element={<ComparativeAnalysis />} />
|
||||
<Route path="/network" element={<NetworkVisualization />} />
|
||||
</Routes>
|
||||
```
|
||||
### Primary Navigation
|
||||
|
||||
### Navigation Updates
|
||||
- Literary Analysis
|
||||
- Novel Studies
|
||||
- Character Studies
|
||||
|
||||
- Main navigation in `Navbar.tsx` includes:
|
||||
- Primary navigation group with consistent button styling
|
||||
- Secondary navigation group for analysis features
|
||||
- Visual separation between groups using border
|
||||
- All buttons styled with sage color scheme
|
||||
- Home page features:
|
||||
- Literary Analysis card in featured sections
|
||||
- Direct link to analysis content
|
||||
- Layout structure:
|
||||
- MainLayout component wraps all pages
|
||||
- Consistent header with navigation
|
||||
- Footer with copyright and quote
|
||||
### Course Novels (Norton Critical Editions)
|
||||
|
||||
### Route Integration
|
||||
- Northanger Abbey (ed. Fraiman)
|
||||
- Sense and Sensibility (ed. Hershinow)
|
||||
- Pride and Prejudice (ed. Davidson)
|
||||
- Mansfield Park (ed. Johnson)
|
||||
|
||||
- Analysis page is directly accessible via `/analysis`
|
||||
- Comparative analysis accessible via `/comparative`
|
||||
- Character network visualization via `/network`
|
||||
- Integrated into main navigation flow
|
||||
- Maintains consistent layout and styling
|
||||
- Proper error handling and loading states
|
||||
### Modern Analysis
|
||||
|
||||
- Contemporary Retellings
|
||||
- Social Class Analysis
|
||||
- Character Network
|
||||
- Timeline
|
||||
|
||||
## Key Features
|
||||
|
||||
### 1. Content Management
|
||||
### 1. Novel Analysis
|
||||
|
||||
- Data is stored in TypeScript files with strong typing
|
||||
- Content is organized by characters and themes
|
||||
- Modular content structure for easy updates
|
||||
- **New: Comprehensive literary analysis data structure with detailed novel analysis**
|
||||
- Detailed analysis of each course novel
|
||||
- Integration with Norton Critical Edition content
|
||||
- Theme exploration and character development
|
||||
- Social commentary analysis
|
||||
|
||||
### 2. UI Components
|
||||
### 2. Interactive Features
|
||||
|
||||
- Custom components built on Shadcn/UI
|
||||
- Responsive design using Tailwind CSS
|
||||
- Consistent theme using custom color palette:
|
||||
- Sage
|
||||
- Cream
|
||||
- Rose
|
||||
- **New: Interactive novel selector and tabbed analysis interface**
|
||||
- Character relationship network visualization
|
||||
- Chronological timeline of works and adaptations
|
||||
- Social class analysis tools
|
||||
- Comparative analysis features
|
||||
|
||||
### 3. Interactive Features
|
||||
### 3. Modern Interpretations
|
||||
|
||||
- Character quiz with result mapping
|
||||
- Blog comment system
|
||||
- Share functionality
|
||||
- Pagination for content lists
|
||||
- Market calculator
|
||||
- **New: Interactive timeline with multiple views**
|
||||
- **New: Literary analysis with themed tabs and novel selection**
|
||||
- **New: Comparative analysis for cross-novel exploration**
|
||||
- **New: Character network visualization**
|
||||
- Analysis of contemporary retellings
|
||||
- Comparative studies with original works
|
||||
- Social class dynamics in modern context
|
||||
- Character archetype analysis
|
||||
|
||||
### 4. Performance Considerations
|
||||
### 4. Academic Tools
|
||||
|
||||
- Component-based architecture for better code splitting
|
||||
- Error boundaries for graceful error handling
|
||||
- Loading states for better UX
|
||||
- Client-side routing for smooth navigation
|
||||
- Citation integration
|
||||
- Critical essay references
|
||||
- Thematic analysis frameworks
|
||||
- Character development tracking
|
||||
|
||||
## UI Components
|
||||
|
||||
### Navigation Components
|
||||
|
||||
```typescript
|
||||
interface NavItem {
|
||||
name: string;
|
||||
path: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
interface NovelItem extends NavItem {
|
||||
edition: string;
|
||||
}
|
||||
|
||||
interface ModernItem extends NavItem {
|
||||
description: string;
|
||||
}
|
||||
```
|
||||
|
||||
### Analysis Components
|
||||
|
||||
- Novel selector with edition information
|
||||
- Theme exploration interface
|
||||
- Character relationship visualization
|
||||
- Social class analysis tools
|
||||
|
||||
## Styling
|
||||
|
||||
The project uses a combination of:
|
||||
The project maintains its elegant aesthetic while emphasizing academic content:
|
||||
|
||||
- Tailwind CSS for utility-first styling
|
||||
- Custom components from Shadcn/UI
|
||||
- Custom theme variables for consistent branding
|
||||
- Responsive design patterns
|
||||
- **New: Scrollable content areas with consistent styling**
|
||||
- **New: Themed cards and tabs for analysis content**
|
||||
- Clean, scholarly design
|
||||
- Consistent typography using Cormorant and Lato
|
||||
- Sage and cream color scheme
|
||||
- Responsive layout with mobile-first approach
|
||||
|
||||
## Typography
|
||||
|
||||
- Headings: Cormorant font family
|
||||
- Body: Lato font family
|
||||
- Consistent text sizing using Tailwind's scale
|
||||
|
||||
## Component Architecture
|
||||
|
||||
### Layout Components
|
||||
|
||||
- `Layout.tsx`: Main layout wrapper
|
||||
- `Navbar.tsx`: Navigation header
|
||||
- `Footer.tsx`: Site footer
|
||||
- `ErrorBoundary.tsx`: Error handling wrapper
|
||||
|
||||
### Content Components
|
||||
|
||||
- `BlogPost.tsx`: Blog post display
|
||||
- `QuoteDisplay.tsx`: Quote formatting
|
||||
- `CommentSection.tsx`: User comments
|
||||
- `ShareButtons.tsx`: Social sharing
|
||||
- **New: Analysis.tsx**: Literary analysis with novel selection and tabbed content
|
||||
|
||||
### UI Components
|
||||
|
||||
Extensive UI component library including:
|
||||
|
||||
- Buttons
|
||||
- Cards
|
||||
- Forms
|
||||
- Modals
|
||||
- Navigation menus
|
||||
- Tables
|
||||
- Toast notifications
|
||||
- **New: Select dropdown for novel selection**
|
||||
- **New: Tabs for content organization**
|
||||
- **New: ScrollArea for content sections**
|
||||
|
||||
## Data Structure
|
||||
|
||||
### Blog Posts
|
||||
|
||||
```typescript
|
||||
interface BlogPost {
|
||||
id: string;
|
||||
title: string;
|
||||
author: string;
|
||||
authorImage: string;
|
||||
date: string;
|
||||
content: string[];
|
||||
}
|
||||
```
|
||||
|
||||
### Quiz System
|
||||
|
||||
```typescript
|
||||
interface QuizQuestion {
|
||||
id: string;
|
||||
question: string;
|
||||
options: QuizOption[];
|
||||
}
|
||||
|
||||
interface QuizResult {
|
||||
character: string;
|
||||
quote: string;
|
||||
description: string;
|
||||
book: string;
|
||||
matchAdvice: string;
|
||||
}
|
||||
```
|
||||
|
||||
### Literary Analysis
|
||||
|
||||
```typescript
|
||||
// Novel Analysis Structure
|
||||
interface NovelAnalysis {
|
||||
title: string;
|
||||
publicationYear: number;
|
||||
mainThemes: ThematicElement[];
|
||||
characterAnalysis: CharacterAnalysis[];
|
||||
socialCommentary: SocialCommentary[];
|
||||
literaryDevices: LiteraryDevice[];
|
||||
}
|
||||
|
||||
// Theme Analysis
|
||||
interface ThematicElement {
|
||||
theme: string;
|
||||
description: string;
|
||||
examples: {
|
||||
quote: string;
|
||||
source: string;
|
||||
analysis: string;
|
||||
}[];
|
||||
significance: string;
|
||||
}
|
||||
|
||||
// Available Novels
|
||||
const novelAnalyses = {
|
||||
prideAndPrejudice: NovelAnalysis;
|
||||
northangerAbbey: NovelAnalysis;
|
||||
senseAndSensibility: NovelAnalysis;
|
||||
mansfieldPark: NovelAnalysis;
|
||||
}
|
||||
```
|
||||
|
||||
## Pages and Components
|
||||
|
||||
### Analysis Page
|
||||
|
||||
- Path: `/analysis`
|
||||
- Features:
|
||||
- Novel selector dropdown
|
||||
- Tabbed interface for different analysis aspects
|
||||
- Scrollable content areas
|
||||
- Themed styling
|
||||
- Content Sections:
|
||||
- Themes
|
||||
- Characters
|
||||
- Social Commentary
|
||||
- Literary Devices
|
||||
|
||||
### Data Organization
|
||||
|
||||
- `src/data/literary-analysis.ts`: Contains structured analysis data for all novels
|
||||
- Pride and Prejudice
|
||||
- Northanger Abbey
|
||||
- Sense and Sensibility
|
||||
- Mansfield Park
|
||||
- Each novel includes:
|
||||
- Main themes with examples and significance
|
||||
- Character analysis with development and key quotes
|
||||
- Social commentary with modern relevance
|
||||
- Literary devices with examples and effects
|
||||
- Academic emphasis with proper hierarchical structure
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. TypeScript for type safety
|
||||
2. Component-based architecture
|
||||
3. Consistent file naming
|
||||
4. Modular CSS with Tailwind
|
||||
5. Error handling with boundaries
|
||||
6. Loading state management
|
||||
7. Responsive design patterns
|
||||
8. **New: Structured content organization**
|
||||
9. **New: Interactive content navigation**
|
||||
1. Academic Focus
|
||||
|
||||
- Content-first approach
|
||||
- Integration of course materials
|
||||
- Proper citation and sourcing
|
||||
- Critical analysis emphasis
|
||||
|
||||
2. Technical Implementation
|
||||
|
||||
- TypeScript for type safety
|
||||
- Component-based architecture
|
||||
- Responsive design
|
||||
- Performance optimization
|
||||
|
||||
3. User Experience
|
||||
- Clear navigation structure
|
||||
- Academic resource organization
|
||||
- Interactive learning tools
|
||||
- Mobile-friendly layout
|
||||
|
||||
## Future Considerations
|
||||
|
||||
1. Content expansion opportunities
|
||||
2. Performance optimization
|
||||
3. Accessibility improvements
|
||||
4. SEO optimization
|
||||
5. Content management system integration
|
||||
6. **New: Additional novel analysis features**
|
||||
7. **New: Comparative analysis tools**
|
||||
1. Enhanced Academic Features
|
||||
|
||||
- Integration with additional critical editions
|
||||
- Expanded analysis tools
|
||||
- Citation management system
|
||||
- Academic resource linking
|
||||
|
||||
2. Content Expansion
|
||||
|
||||
- Additional novel analysis
|
||||
- More contemporary retellings
|
||||
- Extended character studies
|
||||
- Thematic deep dives
|
||||
|
||||
3. Technical Improvements
|
||||
|
||||
- Performance optimization
|
||||
- Accessibility enhancements
|
||||
- Mobile experience refinement
|
||||
- Search functionality
|
||||
|
||||
4. Academic Integration
|
||||
- Course material alignment
|
||||
- Research tool integration
|
||||
- Citation format options
|
||||
- Study guide features
|
||||
|
||||
## Character Network Feature
|
||||
|
||||
### Interactive Graph Component
|
||||
|
||||
The character network visualization is implemented using a force-directed graph with the following features:
|
||||
The character network visualization maintains its technical implementation while focusing on academic analysis:
|
||||
|
||||
```typescript
|
||||
interface CharacterNode {
|
||||
id: string;
|
||||
name: string;
|
||||
novel: string;
|
||||
class: string;
|
||||
type: "protagonist" | "antagonist" | "supporting";
|
||||
socialClass: string;
|
||||
relationships: Relationship[];
|
||||
criticalAnalysis: string;
|
||||
}
|
||||
|
||||
interface GraphConfig {
|
||||
nodeRelSize: number;
|
||||
nodeVal: number;
|
||||
width: number;
|
||||
height: number;
|
||||
staticGraph: boolean;
|
||||
enableNodeDrag: boolean;
|
||||
enableZoom: boolean;
|
||||
interface Relationship {
|
||||
type: string;
|
||||
target: string;
|
||||
description: string;
|
||||
textualEvidence: string;
|
||||
}
|
||||
```
|
||||
|
||||
#### Key Features
|
||||
|
||||
1. **Static Node Positioning**
|
||||
|
||||
- Nodes are arranged in a circular layout
|
||||
- Fixed positions prevent unwanted movement
|
||||
- Calculated using mathematical formulas for even distribution
|
||||
|
||||
2. **Interaction Handling**
|
||||
|
||||
- Single-click node selection
|
||||
- Debounced click handling (300ms)
|
||||
- Click processing state management
|
||||
- Cleanup of timeouts on unmount
|
||||
|
||||
3. **Visual Configuration**
|
||||
|
||||
- Node colors based on character type:
|
||||
- Protagonist: Green (#4CAF50)
|
||||
- Antagonist: Red (#f44336)
|
||||
- Supporting: Blue (#2196F3)
|
||||
- Node size: 8 units (nodeRelSize)
|
||||
- Link width: 2 units
|
||||
- Link opacity: 0.6
|
||||
|
||||
4. **Performance Optimizations**
|
||||
|
||||
- Disabled force simulation cooldown
|
||||
- Zero warmup ticks
|
||||
- Removed hover effects and tooltips
|
||||
- Static graph configuration
|
||||
|
||||
5. **UI Components**
|
||||
- Main graph container (600x600px)
|
||||
- Right-side information panel (300px width)
|
||||
- Smooth transitions for panel visibility
|
||||
- Responsive layout with flex container
|
||||
|
||||
### Implementation Details
|
||||
|
||||
```javascript
|
||||
// Node Click Handler
|
||||
const handleNodeClick = useCallback(
|
||||
(node) => {
|
||||
if (!node || isProcessingClick) return;
|
||||
setIsProcessingClick(true);
|
||||
setSelectedNode(node);
|
||||
onNodeSelect(node);
|
||||
// Reset after 300ms
|
||||
clickTimeoutRef.current = setTimeout(() => {
|
||||
setIsProcessingClick(false);
|
||||
}, 300);
|
||||
},
|
||||
[onNodeSelect, isProcessingClick]
|
||||
);
|
||||
|
||||
// Graph Configuration
|
||||
const graphConfig = {
|
||||
staticGraph: true,
|
||||
enableNodeDrag: false,
|
||||
enableZoom: true,
|
||||
minZoom: 0.5,
|
||||
maxZoom: 2.5,
|
||||
cooldownTime: 0,
|
||||
warmupTicks: 0,
|
||||
nodeLabel: null,
|
||||
enableNodeHover: false,
|
||||
};
|
||||
```
|
||||
|
||||
### Styling
|
||||
|
||||
The component uses a flex layout with the following structure:
|
||||
|
||||
```css
|
||||
// Container
|
||||
{
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
maxwidth: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
// Graph Container
|
||||
{
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border: 1px solid #eee;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Information Panel
|
||||
{
|
||||
width: 300px;
|
||||
padding: 20px;
|
||||
backgroundcolor: #fff;
|
||||
border: 1px solid #eee;
|
||||
borderradius: 4px;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
```
|
||||
|
||||
### Best Practices
|
||||
|
||||
1. **State Management**
|
||||
|
||||
- Use of React hooks for state
|
||||
- Proper cleanup of timeouts
|
||||
- Controlled component updates
|
||||
|
||||
2. **Performance**
|
||||
|
||||
- Debounced click handling
|
||||
- Static node positioning
|
||||
- Minimal re-renders
|
||||
|
||||
3. **User Experience**
|
||||
|
||||
- Smooth transitions
|
||||
- Clear visual feedback
|
||||
- Responsive layout
|
||||
|
||||
4. **Code Organization**
|
||||
- Modular component structure
|
||||
- Clear configuration objects
|
||||
- Type-safe interfaces
|
||||
|
||||
## Timeline Feature
|
||||
|
||||
### Interactive Timeline Component
|
||||
|
||||
The timeline visualization is implemented with a modern, flowing layout that displays events chronologically with the following features:
|
||||
The timeline now emphasizes literary chronology and analysis:
|
||||
|
||||
```typescript
|
||||
interface TimelineEvent {
|
||||
year: number;
|
||||
type: "works" | "context" | "legacy" | "adaptations";
|
||||
type: "publication" | "writing" | "context" | "adaptation";
|
||||
title: string;
|
||||
description: string;
|
||||
novel?: string;
|
||||
significance?: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
events: TimelineEvent[];
|
||||
criticalContext: string;
|
||||
literarySignificance: string;
|
||||
}
|
||||
```
|
||||
|
||||
#### Key Features
|
||||
## Social Class Analysis
|
||||
|
||||
1. **Event Display**
|
||||
|
||||
- Vertical flowing layout with connected events
|
||||
- Events positioned horizontally based on year
|
||||
- Clean card design with type-based color coding
|
||||
- Connected events with vertical lines
|
||||
|
||||
2. **Time Scale**
|
||||
|
||||
- Sticky year markers at the top
|
||||
- Automatic year range calculation
|
||||
- Visual period indicators
|
||||
- Smooth scrolling behavior
|
||||
|
||||
3. **Event Types**
|
||||
|
||||
- Works: Publications and writings
|
||||
- Context: Historical events
|
||||
- Legacy: Impact and influence
|
||||
- Adaptations: Modern interpretations
|
||||
|
||||
4. **Visual Design**
|
||||
|
||||
- Clean, modern card layout
|
||||
- Type-based color coding:
|
||||
- Works: Blue (#2196F3)
|
||||
- Context: Purple (#9C27B0)
|
||||
- Legacy: Green (#4CAF50)
|
||||
- Subtle shadows and transitions
|
||||
- Responsive container sizing
|
||||
|
||||
5. **Interaction**
|
||||
- Smooth horizontal scrolling
|
||||
- Event selection with visual feedback
|
||||
- Automatic scrolling to selected events
|
||||
- Hover effects on cards and dots
|
||||
|
||||
### Implementation Details
|
||||
Enhanced focus on academic analysis of class dynamics:
|
||||
|
||||
```typescript
|
||||
// Color Scheme
|
||||
const getEventColor = (type: string) => {
|
||||
switch (type) {
|
||||
case "works":
|
||||
return { background: "#E3F2FD", border: "#2196F3" };
|
||||
case "context":
|
||||
return { background: "#F3E5F5", border: "#9C27B0" };
|
||||
case "legacy":
|
||||
return { background: "#E8F5E9", border: "#4CAF50" };
|
||||
default:
|
||||
return { background: "#FAFAFA", border: "#9E9E9E" };
|
||||
}
|
||||
};
|
||||
|
||||
// Event Click Handler
|
||||
const handleEventClick = (event: TimelineEvent) => {
|
||||
setSelectedEvent(event);
|
||||
// Scroll event into view with smooth animation
|
||||
if (timelineRef.current) {
|
||||
const position = ((event.year - actualMinYear) / timeSpan) * 100;
|
||||
const timelineWidth = timelineRef.current.clientWidth;
|
||||
const totalWidth = timelineRef.current.scrollWidth;
|
||||
const scrollPosition = (position / 100) * totalWidth - timelineWidth / 2;
|
||||
|
||||
timelineRef.current.scrollTo({
|
||||
left: scrollPosition,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### Styling
|
||||
|
||||
The timeline uses a combination of Material-UI and custom styling:
|
||||
|
||||
```typescript
|
||||
// Container Styling
|
||||
{
|
||||
position: 'relative',
|
||||
height: 600,
|
||||
bgcolor: '#FFFFFF',
|
||||
borderRadius: 2,
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
|
||||
overflow: 'hidden'
|
||||
}
|
||||
|
||||
// Event Card Styling
|
||||
{
|
||||
p: 2,
|
||||
minWidth: 240,
|
||||
maxWidth: 320,
|
||||
borderLeft: `3px solid ${colors.border}`,
|
||||
borderRadius: '4px',
|
||||
transition: 'all 0.2s ease',
|
||||
bgcolor: isSelected ? colors.background : '#FFFFFF',
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.05)'
|
||||
}
|
||||
```
|
||||
|
||||
### Best Practices
|
||||
|
||||
1. **Performance**
|
||||
|
||||
- Efficient event positioning
|
||||
- Smooth scrolling behavior
|
||||
- Optimized re-renders
|
||||
- Proper cleanup of event listeners
|
||||
|
||||
2. **User Experience**
|
||||
|
||||
- Clear visual hierarchy
|
||||
- Smooth transitions
|
||||
- Intuitive navigation
|
||||
- Responsive design
|
||||
|
||||
3. **Code Organization**
|
||||
|
||||
- Modular component structure
|
||||
- Clear type definitions
|
||||
- Reusable styling
|
||||
- Consistent naming conventions
|
||||
|
||||
4. **Accessibility**
|
||||
- Keyboard navigation support
|
||||
- ARIA labels for interactive elements
|
||||
- Color contrast compliance
|
||||
- Focus management
|
||||
|
||||
## Social Class Feature
|
||||
|
||||
### Social Class Analysis Component
|
||||
|
||||
The social class analysis feature provides an in-depth examination of class dynamics in Austen's works with the following structure:
|
||||
|
||||
```typescript
|
||||
interface SocialClass {
|
||||
name: string;
|
||||
description: string;
|
||||
incomeRange: string;
|
||||
modernEquivalent: string;
|
||||
characteristics: string[];
|
||||
examples: {
|
||||
character: string;
|
||||
novel: string;
|
||||
context: string;
|
||||
}[];
|
||||
}
|
||||
|
||||
interface Character {
|
||||
id: string;
|
||||
name: string;
|
||||
interface SocialClassAnalysis {
|
||||
novel: string;
|
||||
socialClass: "upper" | "middle" | "working";
|
||||
occupation?: string;
|
||||
annualIncome?: string;
|
||||
modernEquivalent?: string;
|
||||
description: string;
|
||||
relationships: string[];
|
||||
class: string;
|
||||
characteristics: string[];
|
||||
textualEvidence: string[];
|
||||
modernParallels: string[];
|
||||
criticalPerspectives: string[];
|
||||
}
|
||||
```
|
||||
|
||||
#### Key Features
|
||||
|
||||
1. **Interactive Social Pyramid**
|
||||
|
||||
- Visual representation of class hierarchy
|
||||
- Hover tooltips with class information
|
||||
- Smooth transitions and animations
|
||||
- Income ranges and modern equivalents
|
||||
|
||||
2. **Character Examples**
|
||||
|
||||
- Grid layout of character cards
|
||||
- Class-based categorization
|
||||
- Income and occupation details
|
||||
- Modern equivalent values
|
||||
- Character relationships
|
||||
|
||||
3. **Comparative Analysis**
|
||||
|
||||
- Character comparison dialog
|
||||
- Side-by-side analysis
|
||||
- Social mobility examination
|
||||
- Economic context
|
||||
|
||||
4. **Content Organization**
|
||||
|
||||
- Expandable sections by novel
|
||||
- Detailed character studies
|
||||
- Modern retellings analysis
|
||||
- Critical insights
|
||||
|
||||
5. **Visual Design**
|
||||
- Clean, academic layout
|
||||
- Consistent typography
|
||||
- Color-coded class indicators
|
||||
- Responsive grid system
|
||||
|
||||
### Implementation Details
|
||||
|
||||
```typescript
|
||||
// Social Class View Structure
|
||||
const SocialClassView = () => {
|
||||
const [selectedCharacter, setSelectedCharacter] = useState<Character | null>(
|
||||
null
|
||||
);
|
||||
const [comparisonCharacter, setComparisonCharacter] =
|
||||
useState<Character | null>(null);
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
|
||||
// Character comparison handling
|
||||
const handleCharacterClick = (character: Character) => {
|
||||
if (!selectedCharacter) {
|
||||
setSelectedCharacter(character);
|
||||
} else if (selectedCharacter.id !== character.id) {
|
||||
setComparisonCharacter(character);
|
||||
setDialogOpen(true);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// Social Pyramid Styling
|
||||
const pyramidStyles = {
|
||||
position: "relative",
|
||||
height: 300,
|
||||
"& .pyramid-level": {
|
||||
position: "absolute",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
transition: "all 0.2s",
|
||||
"&:hover": {
|
||||
transform: "translateX(-50%) scale(1.02)",
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Content Structure
|
||||
|
||||
1. **Pride and Prejudice Analysis**
|
||||
|
||||
- Upper Class Examples
|
||||
- Mr. Darcy (£10,000 per year)
|
||||
- Lady Catherine de Bourgh
|
||||
- Middle & Lower Classes
|
||||
- The Bennet Family
|
||||
- Servants (via Longbourn)
|
||||
|
||||
2. **Mansfield Park Analysis**
|
||||
|
||||
- The Privileged Circle
|
||||
- The Bertram Family
|
||||
- Mary and Henry Crawford
|
||||
- The Dependent Relations
|
||||
- Fanny Price
|
||||
- The Price Family
|
||||
|
||||
3. **Modern Retellings**
|
||||
- Pride by Ibi Zoboi
|
||||
- Zuri Benitez
|
||||
- Darius Darcy
|
||||
- Longbourn's Legacy
|
||||
- Servant Perspectives
|
||||
- Class Intersections
|
||||
|
||||
### Integration
|
||||
|
||||
1. **Routing**
|
||||
|
||||
- Dedicated `/social-class` route
|
||||
- Integration with main navigation
|
||||
- Error boundary protection
|
||||
- Loading state handling
|
||||
|
||||
2. **Navigation**
|
||||
|
||||
- Added to academic section
|
||||
- Consistent button styling
|
||||
- Clear visual grouping
|
||||
- Smooth transitions
|
||||
|
||||
3. **Data Management**
|
||||
|
||||
- TypeScript interfaces
|
||||
- Structured content
|
||||
- Modern equivalents
|
||||
- Character relationships
|
||||
|
||||
4. **UI Components**
|
||||
- Accordion sections
|
||||
- Material-UI integration
|
||||
- Responsive grid layout
|
||||
- Interactive elements
|
||||
|
||||
### Best Practices
|
||||
|
||||
1. **Content Organization**
|
||||
|
||||
- Clear hierarchical structure
|
||||
- Detailed character analysis
|
||||
- Historical context
|
||||
- Modern relevance
|
||||
|
||||
2. **User Experience**
|
||||
|
||||
- Intuitive navigation
|
||||
- Interactive comparisons
|
||||
- Visual hierarchy
|
||||
- Responsive design
|
||||
|
||||
3. **Performance**
|
||||
|
||||
- Efficient state management
|
||||
- Optimized rendering
|
||||
- Smooth transitions
|
||||
- Proper cleanup
|
||||
|
||||
4. **Accessibility**
|
||||
- ARIA labels
|
||||
- Keyboard navigation
|
||||
- Color contrast
|
||||
- Focus management
|
||||
|
|
|
|||
|
|
@ -1,81 +1,106 @@
|
|||
import { Link } from 'react-router-dom';
|
||||
import { Feather } from 'lucide-react';
|
||||
import { Feather, Menu, X } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const navItems = [
|
||||
{ name: 'Character Blogs', path: '/blogs' },
|
||||
{ name: 'Bride Quiz', path: '/quiz' },
|
||||
{ name: 'Vendors', path: '/vendors' },
|
||||
{ name: 'Success Stories', path: '/success-stories' },
|
||||
{ name: 'Market Value', path: '/market-calculator' },
|
||||
];
|
||||
|
||||
const analysisItems = [
|
||||
{ name: 'Literary Analysis', path: '/analysis' },
|
||||
{ name: 'Character Network', path: '/network' },
|
||||
{ name: 'Timeline', path: '/timeline' },
|
||||
{ name: 'Social Class', path: '/social-class' },
|
||||
];
|
||||
|
||||
const Navbar = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<header className="border-b bg-cream-50">
|
||||
<header className="sticky top-0 z-50 w-full border-b bg-cream-50/80 backdrop-blur-sm">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex h-16 items-center justify-between">
|
||||
{/* Logo */}
|
||||
<Link to="/" className="flex items-center space-x-2">
|
||||
<Feather className="h-6 w-6 text-sage-700" />
|
||||
<span className="font-cormorant text-xl text-sage-900">Austen's Wedding Guide</span>
|
||||
</Link>
|
||||
|
||||
<nav className="flex items-center">
|
||||
<div className="flex items-center space-x-2 mr-6">
|
||||
<Link
|
||||
to="/blogs"
|
||||
className="bg-sage-100 text-sage-700 hover:bg-sage-200 px-4 py-2 rounded-md transition-colors"
|
||||
>
|
||||
Character Blogs
|
||||
</Link>
|
||||
<Link
|
||||
to="/quiz"
|
||||
className="bg-sage-100 text-sage-700 hover:bg-sage-200 px-4 py-2 rounded-md transition-colors"
|
||||
>
|
||||
Bride Quiz
|
||||
</Link>
|
||||
<Link
|
||||
to="/vendors"
|
||||
className="bg-sage-100 text-sage-700 hover:bg-sage-200 px-4 py-2 rounded-md transition-colors"
|
||||
>
|
||||
Vendors
|
||||
</Link>
|
||||
<Link
|
||||
to="/success-stories"
|
||||
className="bg-sage-100 text-sage-700 hover:bg-sage-200 px-4 py-2 rounded-md transition-colors"
|
||||
>
|
||||
Success Stories
|
||||
</Link>
|
||||
<Link
|
||||
to="/market-calculator"
|
||||
className="bg-sage-100 text-sage-700 hover:bg-sage-200 px-4 py-2 rounded-md transition-colors"
|
||||
>
|
||||
Market Value
|
||||
</Link>
|
||||
</div>
|
||||
{/* Mobile menu button */}
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="lg:hidden rounded-md p-2 text-sage-700 hover:bg-sage-100"
|
||||
>
|
||||
{isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
|
||||
</button>
|
||||
|
||||
<div className="flex items-center space-x-2 border-l border-sage-200 pl-6">
|
||||
<Link
|
||||
to="/analysis"
|
||||
className="bg-sage-100 text-sage-700 hover:bg-sage-200 px-4 py-2 rounded-md transition-colors"
|
||||
>
|
||||
Literary Analysis
|
||||
</Link>
|
||||
<Link
|
||||
to="/network"
|
||||
className="bg-sage-100 text-sage-700 hover:bg-sage-200 px-4 py-2 rounded-md transition-colors"
|
||||
>
|
||||
Character Network
|
||||
</Link>
|
||||
<Link
|
||||
to="/timeline"
|
||||
className="bg-sage-100 text-sage-700 hover:bg-sage-200 px-4 py-2 rounded-md transition-colors"
|
||||
>
|
||||
Timeline
|
||||
</Link>
|
||||
<Link
|
||||
to="/social-class"
|
||||
className="bg-sage-100 text-sage-700 hover:bg-sage-200 px-4 py-2 rounded-md transition-colors"
|
||||
>
|
||||
Social Class
|
||||
</Link>
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden lg:flex lg:items-center lg:space-x-1">
|
||||
<div className="flex items-center space-x-1">
|
||||
{navItems.map((item) => (
|
||||
<Link
|
||||
key={item.path}
|
||||
to={item.path}
|
||||
className="px-3 py-2 text-sm font-medium text-sage-700 hover:bg-sage-100 rounded-md transition-colors"
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<div className="h-6 mx-4 w-px bg-sage-200" />
|
||||
<div className="flex items-center space-x-1">
|
||||
{analysisItems.map((item) => (
|
||||
<Link
|
||||
key={item.path}
|
||||
to={item.path}
|
||||
className="px-3 py-2 text-sm font-medium text-sage-700 hover:bg-sage-100 rounded-md transition-colors"
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Mobile Navigation */}
|
||||
<div
|
||||
className={cn(
|
||||
'lg:hidden',
|
||||
isOpen ? 'block border-t border-sage-200' : 'hidden'
|
||||
)}
|
||||
>
|
||||
<div className="space-y-1 px-2 pb-3 pt-2">
|
||||
{navItems.map((item) => (
|
||||
<Link
|
||||
key={item.path}
|
||||
to={item.path}
|
||||
className="block px-3 py-2 text-base font-medium text-sage-700 hover:bg-sage-100 rounded-md transition-colors"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
<div className="my-2 h-px bg-sage-200" />
|
||||
{analysisItems.map((item) => (
|
||||
<Link
|
||||
key={item.path}
|
||||
to={item.path}
|
||||
className="block px-3 py-2 text-base font-medium text-sage-700 hover:bg-sage-100 rounded-md transition-colors"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue