Conversation
…te seed data structures
…ption, content, and footer
…em theme switching
…hydration handling
7 tasks
There was a problem hiding this comment.
Pull request overview
This PR implements a comprehensive theme management system with dark/light mode support and establishes a foundation of reusable UI components built on Radix UI and Tailwind CSS. The changes also enhance the database seeding script with strict TypeScript typing for improved maintainability and type safety during development.
Changes:
- Implemented theme system with
next-themesintegration, including a ThemeToggle component and global Providers wrapper - Added seven accessible UI components (Button, Card, Badge, Avatar, Separator, Input, Skeleton) using Radix UI primitives and class-variance-authority for variant management
- Enhanced database seeding with TypeScript interfaces for all seed data types, improving type safety and code maintainability
Reviewed changes
Copilot reviewed 15 out of 16 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/lib/utils.ts | Added cn utility function for conditional Tailwind class merging using clsx and tailwind-merge |
| src/components/ui/skeleton.tsx | Skeleton loading placeholder component with pulse animation |
| src/components/ui/separator.tsx | Accessible separator component using Radix UI primitive with horizontal/vertical orientation support |
| src/components/ui/input.tsx | Styled input component with consistent focus states and disabled styling |
| src/components/ui/card.tsx | Composable card component with Header, Title, Description, Content, and Footer subcomponents |
| src/components/ui/button.tsx | Button component with multiple variants (default, secondary, destructive, outline, ghost, link) and size options |
| src/components/ui/badge.tsx | Badge component for status indicators with variant support |
| src/components/ui/avatar.tsx | Avatar component using Radix UI with image and fallback support |
| src/components/layout/theme-toggle.tsx | Theme toggle button cycling through light, dark, and system preferences with proper hydration handling |
| src/app/providers.tsx | Global providers wrapper for next-themes configuration |
| src/app/page.tsx | Updated homepage to showcase new UI components and theme functionality |
| src/app/layout.tsx | Integrated Providers wrapper and added suppressHydrationWarning for theme support |
| prisma/seed.ts | Added TypeScript interfaces for all seed data types and improved type safety; minor logic cleanup in research area seeding |
| package.json | Added new Radix UI dependencies and updated next-themes version |
| package-lock.json | Lock file updates for new and updated dependencies |
| .env.example | Updated instructions for environment file setup |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…ssignment in seedResearchAreas function
TKanX
force-pushed
the
feature/5-implement-theme-system-and-base-ui-components
branch
from
fe9ab4b to
f26d56b
Compare
TKanX
deleted the
feature/5-implement-theme-system-and-base-ui-components
branch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary:
Implemented a comprehensive theme management system with dark/light mode support and a suite of reusable UI components based on Radix UI. Establishes the visual foundation of the application, integrating Tailwind CSS for styling and providing essential interactive elements. Additionally, the database seeding script has been significantly improved with strict typing to ensure data integrity during development.
Changes:
Implemented Theme System (
src/components/layout/theme-toggle.tsx,src/app/providers.tsx):next-themesfor robust dark/light mode switching.ThemeTogglecomponent that cycles through Light, Dark, and System preferences.Providerswrapper to manage theme context application-wide.layout.tsxto utilize the new provider system and suppress hydration warnings.Added Core UI Components (
src/components/ui/):Button: Supports multiple variants (default, secondary, destructive, outline, ghost, link).Card: Composable card structure (Header, Title, Description, Content, Footer).Badge: Status indicators with variant support.Avatar: Image with fallback support.Separator: Visual divider.Input: Standard form input.Skeleton: Loading state placeholder.src/lib/utils.tswith acnutility for conditional class merging.Refined Database Seeding (
prisma/seed.ts):MemberSeed,PublicationSeed, etc.) to strictly type seed data.Enhanced Home Page (
src/app/page.tsx):Dependency Updates:
@radix-uiprimitives andnext-themestopackage.json..env.exampleinstructions.