Access Control Demo

A modern, responsive file management interface built with Next.js 15, TypeScript, and CSS Modules.

Features

• Header Component: Sticky header with 10 logout buttons and gradient background
• Folder Components: Three main folders (Folder 1, Folder 2, Folder 3) with 800px height
• Document Grid: Each folder contains 5 evenly spaced document boxes
• Responsive Design: Mobile-first approach with responsive grid layouts
• Modern UI: Beautiful gradients, shadows, and hover effects
• Reusable Components: Modular architecture following React best practices

Project Structure

src/
├── app/
│   ├── globals.css          # Global styles and CSS variables
│   ├── layout.tsx           # Root layout with metadata
│   └── page.tsx             # Main page component
├── components/
│   ├── Header/
│   │   ├── Header.tsx       # Header component with logout buttons
│   │   ├── Header.module.css # Header-specific styles
│   │   └── index.ts         # Component export
│   ├── Folder/
│   │   ├── Folder.tsx       # Folder component with documents
│   │   ├── Folder.module.css # Folder-specific styles
│   │   └── index.ts         # Component export
│   ├── MainContent/
│   │   ├── MainContent.tsx  # Main content area with folders
│   │   ├── MainContent.module.css # Layout styles
│   │   └── index.ts         # Component export
│   └── index.ts             # Main components export

Components

Header Component

• Sticky positioning with gradient background
• 10 logout buttons with hover effects
• Responsive design for mobile devices
• Customizable logout handler

Folder Component

• 800px height with full width
• 5 evenly spaced document boxes
• Hover animations and modern card design
• Responsive grid layout

MainContent Component

• Responsive grid layout (1 column on mobile, 2 on tablet, 3 on desktop)
• Contains three Folder components
• Gradient background

Getting Started

1. Install dependencies:

   npm install

2. Run development server:

   npm run dev

3. Open your browser and navigate to http://localhost:3000

Development

Adding New Components

1. Create a new folder in src/components/
2. Include the component file, CSS module, and index.ts
3. Export from the main components index

Styling

• Uses CSS Modules for component-scoped styles
• Tailwind CSS utilities available
• Responsive design with mobile-first approach
• Modern CSS features like CSS Grid and Flexbox

TypeScript

• Full TypeScript support
• Interface definitions for all component props
• Strict type checking enabled

Build and Deploy

# Build for production
npm run build

# Start production server
npm start

# Lint code
npm run lint

Technologies Used

• Next.js 15 - React framework with App Router
• TypeScript - Type-safe JavaScript
• CSS Modules - Component-scoped styling
• Tailwind CSS - Utility-first CSS framework
• React 19 - Latest React features

Browser Support

• Modern browsers (Chrome, Firefox, Safari, Edge)
• Mobile responsive design
• Progressive enhancement

Contributing

1. Follow the existing component structure
2. Use TypeScript interfaces for props
3. Include CSS modules for styling
4. Add responsive design considerations
5. Test on multiple screen sizes