ocd-website/frontend/src/app/admin/videos/create/page.tsx
TheMaddax 338f81f7ad Phase 7: Fix theme selector positioning and implement dynamic theme-aware styling
- Fixed theme selector dropdown positioning issues with proper Tailwind classes
- Replaced custom CSS classes with standard Tailwind utilities for v4 compatibility
- Implemented dynamic theme-aware styling system for dropdown appearance
- Added theme-specific styling for Light, Dark, High Contrast Light, High Contrast Dark
- Enhanced UX with professional dropdown interface and visual consistency
- Maintained 100% theme compliance and accessibility standards
- Updated memory bank documentation with Phase 7 completion

Key improvements:
- Professional dropdown with proper shadows, borders, and backgrounds
- Dynamic styling that adapts to current website theme
- Enhanced accessibility with ARIA support and keyboard navigation
- Seamless visual integration across all theme modes
- Production-ready theme selector with polished UI
2025-06-03 17:42:14 -06:00

40 lines
1.4 KiB
TypeScript

'use client';
import React from 'react';
import { useRouter } from 'next/navigation';
import { useVideos } from '../../../../hooks/useVideos';
import VideoForm from '../../../../components/admin/VideoForm';
import Link from 'next/link';
export default function CreateVideoPage() {
const router = useRouter();
const { createVideo } = useVideos();
return (
<div>
<div className="sm:flex sm:items-center sm:justify-between mb-6">
<div>
<h1 className="admin-page-header-title">Add New Video</h1>
<p className="mt-1 text-sm admin-text-light">
Upload a video file along with optional thumbnail, subtitles, and transcript files.
The video duration will be automatically detected, and a thumbnail will be generated
at the 10-second mark if you don't provide one.
</p>
</div>
<div className="mt-4 sm:mt-0">
<Link
href="/admin/videos"
className="admin-btn-secondary inline-flex items-center"
>
<svg className="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
</svg>
Back to Videos
</Link>
</div>
</div>
<VideoForm onSubmit={createVideo} isEdit={false} />
</div>
);
}