Skip to content

Commit 6c43914

Browse files
Dheerajjha451Dheerajjha451
committed
dark mode
1 parent 857bbd5 commit 6c43914

File tree

12 files changed

+209
-108
lines changed

12 files changed

+209
-108
lines changed

‎components/Footer.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,20 @@ const Footer = () => {
77
};
88

99
return (
10-
<footer className="border-t border-gray-200 bg-white p-6">
10+
<footer className="border-t border-gray-200 bg-white dark:bg-gradient-to-r from-black via-gray-800 to-black dark:border-zinc-700 p-6">
1111
<div className="container mx-auto max-w-6xl flex flex-col md:flex-row justify-between items-center">
12-
<p className="text-center md:text-left mb-4 md:mb-0">&copy; {new Date().getFullYear()} All rights reserved.</p>
12+
<p className="text-center md:text-left mb-4 md:mb-0 text-gray-900 dark:text-gray-100">&copy; {new Date().getFullYear()} All rights reserved.</p>
1313
<div className="flex items-center space-x-4">
1414
<a
1515
href="https://github.com/Dheerajjha451/Design2Code"
1616
target="_blank"
1717
rel="noopener noreferrer"
18-
className="text-black hover:text-bold"
18+
className="text-black dark:text-white hover:text-bold"
1919
>
2020
<Github size={30} />
2121
</a>
2222
<p
23-
className="text-blue-400 hover:text-blue-500 cursor-pointer"
23+
className="text-blue-400 dark:text-blue-300 hover:text-blue-500 cursor-pointer"
2424
onClick={handleFeedbackClick}
2525
>
2626
Feedback

‎components/Header.jsx‎

Lines changed: 32 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,43 @@
11
import Link from 'next/link'
2-
import React, { useState } from 'react'
3-
import { Code, SquareDashedBottomCode } from 'lucide-react'
2+
import React, { useState, useEffect } from 'react'
3+
import { Code, SquareDashedBottomCode, Sun, Moon, Menu, X } from 'lucide-react'
44
import { Button } from './ui/button'
55
import { useSession } from 'next-auth/react'
66
import { Avatar, AvatarImage } from './ui/avatar'
7-
import { Menu, X } from 'lucide-react'
87

98
const Header = () => {
109
const { data: session } = useSession()
1110
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
11+
const [isDarkMode, setIsDarkMode] = useState(false)
12+
13+
useEffect(() => {
14+
if (typeof window !== 'undefined') {
15+
const savedTheme = localStorage.getItem('theme')
16+
if (savedTheme) {
17+
setIsDarkMode(savedTheme === 'dark')
18+
document.documentElement.classList.toggle('dark', savedTheme === 'dark')
19+
} else {
20+
const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
21+
setIsDarkMode(prefersDarkMode)
22+
document.documentElement.classList.toggle('dark', prefersDarkMode)
23+
}
24+
}
25+
}, [])
1226

1327
const handleToggle = () => {
1428
setIsMobileMenuOpen(!isMobileMenuOpen)
1529
}
1630

31+
const handleThemeToggle = () => {
32+
const newTheme = isDarkMode ? 'light' : 'dark'
33+
setIsDarkMode(!isDarkMode)
34+
document.documentElement.classList.toggle('dark', newTheme === 'dark')
35+
localStorage.setItem('theme', newTheme)
36+
}
37+
1738
return (
18-
<nav className="border-b border-gray-200 sticky top-0 z-50 bg-white ">
19-
<div className="flex flex-wrap items-center justify-between mx-auto p-4 max-w-[1440px] mx-auto">
39+
<nav className="border-b border-gray-200 sticky top-0 z-50 bg-white dark:bg-gradient-to-r from-black via-gray-800 to-black dark:border-zinc-700">
40+
<div className="flex flex-wrap items-center justify-between p-4 max-w-[1440px] mx-auto">
2041
<Link href={'/'} className='flex items-center space-x-3 text-primary font-bold'>
2142
<img src='/Designer.png' width={32} height={32} alt="Logo" />
2243
<span className="self-center text-2xl font-semibold whitespace-nowrap">
@@ -31,6 +52,9 @@ const Header = () => {
3152
</div>
3253

3354
<div className="hidden md:flex items-center space-x-8">
55+
<button onClick={handleThemeToggle} className="text-primary">
56+
{isDarkMode ? <Sun size={24} /> : <Moon size={24} />}
57+
</button>
3458
{session ? (
3559
<>
3660
<Link href={'/projects'} className='flex items-center text-primary font-bold space-x-2'>
@@ -53,6 +77,9 @@ const Header = () => {
5377
{/* Mobile Menu */}
5478
{isMobileMenuOpen && (
5579
<div className="w-full md:hidden flex flex-col items-start space-y-4 mt-4">
80+
<button onClick={handleThemeToggle} className="text-primary">
81+
{isDarkMode ? <Sun size={24} /> : <Moon size={24} />}
82+
</button>
5683
{session ? (
5784
<>
5885
<Link href={'/projects'} className='flex items-center text-primary font-bold space-x-2'>

‎components/Hero.jsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,16 @@ import { useSession } from 'next-auth/react';
44

55
const Hero = () => {
66
const { data: session } = useSession();
7-
return <>
7+
return (
88
<div className="relative overflow-hidden max-w-[1440px] mx-auto">
99
<div className="pb-16 pt-20 sm:pt-24 lg:pb-24 lg:pt-24">
1010
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
1111
<div className="text-center">
12-
<h1 className="text-4xl font-extrabold tracking-tight text-primary sm:text-5xl lg:text-6xl">
13-
Your Hub for <span className="text-green-600">Project</span> Templates
12+
<h1 className="text-4xl font-extrabold tracking-tight text-primary dark:text-white sm:text-5xl lg:text-6xl">
13+
Your Hub for <span className="text-green-600 dark:text-green-400">Project</span> Templates
1414
</h1>
15-
<p className="mt-6 text-xl text-gray-600">
16-
Ready to kickstart your next big idea? Welcome to <span className="text-indigo-600">Design2Code</span>, where developers like you come together to showcase their <span className='text-blue-600'>design </span> and <span className="text-red-600">project</span> expertise. Find the <span className="text-purple-600">inspiration</span> and <span className="text-purple-600">resources</span> you need to bring your projects to life.
15+
<p className="mt-6 text-xl text-gray-600 dark:text-gray-300">
16+
Ready to kickstart your next big idea? Welcome to <span className="text-indigo-600 dark:text-indigo-400">Design2Code</span>, where developers like you come together to showcase their <span className='text-blue-600 dark:text-blue-400'>design</span> and <span className="text-red-600 dark:text-red-400">project</span> expertise. Find the <span className="text-purple-600 dark:text-purple-400">inspiration</span> and <span className="text-purple-600 dark:text-purple-400">resources</span> you need to bring your projects to life.
1717
</p>
1818
</div>
1919
<div className="mt-12 text-center">
@@ -30,7 +30,7 @@ const Hero = () => {
3030
</div>
3131
</div>
3232
</div>
33-
</>
33+
);
3434
}
3535

36-
export default Hero
36+
export default Hero;

‎components/Templates.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -97,13 +97,13 @@ const TemplateItem = ({ template }) => {
9797
</h3>
9898
</div>
9999
</div>
100-
<div className="bg-white p-4 rounded-b-lg">
101-
<h3 className="text-lg font-semibold transition duration-300 line-clamp-1 truncate mb-10 hover:text-primary text-gray-600">
100+
<div className=" p-4 rounded-b-lg">
101+
<h3 className="text-lg font-semibold transition duration-300 line-clamp-1 truncate mb-10 hover:text-primary text-gray-600 dark:text-white">
102102
{template.title}
103103
</h3>
104104
</div>
105105
</Link>
106-
<div className="absolute bottom-0 left-0 w-full border-t p-3 text-gray-500 text-sm">
106+
<div className="absolute bottom-0 left-0 w-full border-t p-3 text-gray-500 dark:text-white text-sm">
107107
<div className="flex justify-between items-center">
108108
<p className="text-sm"> {template.framework}</p>
109109
<Link href={template.deployedLink} target="_blank">

‎components/dashboard/DashboardContent.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,15 +61,15 @@ const DashboardContent = () => {
6161

6262
return (
6363
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
64-
<Card className='w-full h-auto bg-gray-100 cursor-pointer mb-3 hover:bg-white' onClick={() => { window.location.href = '/dashboard/projects/new' }}>
64+
<Card className='w-full h-auto bg-gray-100 dark:bg-slate-800 hover:dark:bg-slate-900 cursor-pointer mb-3 hover:bg-white' onClick={() => { window.location.href = '/dashboard/projects/new' }}>
6565
<CardContent className='flex flex-col items-center justify-center mt-2 text-center h-full'>
6666
<CirclePlus className='w-12 h-12 mb-2' />
6767
<h1>New Template</h1>
6868
</CardContent>
6969
</Card>
7070

7171
{[...templates].reverse().map(template => (
72-
<Card key={template._id} className='bg-white w-full mb-3'>
72+
<Card key={template._id} className='bg-white w-full mb-3 dark:bg-slate-800 hover:dark:bg-slate-900 '>
7373
<CardHeader>
7474
<CardTitle className='truncate text-clamp-1'>
7575
{template.title}

‎components/dashboard/DashboardHeader.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@ const DashboardHeader = () => {
1515

1616
return (
1717
<>
18-
<div className="flex justify-between items-center p-4 bg-gray-100 shadow-sm">
18+
<div className="flex justify-between items-center p-4 shadow-sm">
1919
<button
20-
className="inline-flex items-center p-2 text-gray-500 rounded-lg sm:hidden hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-200"
20+
className="inline-flex items-center p-2 text-gray-500 rounded-lg sm:hidden hover:bg-gray-200 dark:bg-slate-800 hover:dark:bg-slate-900 focus:outline-none focus:ring-2 "
2121
onClick={() => setIsSidebarOpen(!isSidebarOpen)}
2222
>
2323
<span className="sr-only">Open sidebar</span>
@@ -37,7 +37,7 @@ const DashboardHeader = () => {
3737
</button>
3838
</div>
3939

40-
<aside className={`fixed z-40 w-80 h-100 bg-gray-50 transition-transform ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'} sm:translate-x-0`}>
40+
<aside className={`fixed z-40 w-80 h-100 transition-transform ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'} sm:translate-x-0`}>
4141
<div className="h-full px-3 py-4 overflow-y-auto relative">
4242
<button
4343
className="absolute top-4 right-4 text-gray-500 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-200 rounded-lg p-2 sm:hidden"
@@ -60,11 +60,11 @@ const DashboardHeader = () => {
6060
</button>
6161
<ul className="space-y-2 font-medium mt-8">
6262
<li>
63-
<div className="w-full max-w-sm bg-white border border-gray-200 rounded-lg shadow">
63+
<div className="w-full max-w-sm bg-white border border-gray-200 dark:bg-slate-800 dark:border-gray-800 rounded-lg shadow">
6464
<div className="flex flex-col items-center p-3">
6565
<img src={session?.user?.image} alt={session?.user?.name} className='w-24 h-24 mb-3 rounded-full shadow-lg' />
66-
<h5 className="mb-1 text-xl font-medium text-gray-900">{session?.user?.name}</h5>
67-
<span className="text-sm text-gray-600">{session?.user?.email}</span>
66+
<h5 className="mb-1 text-xl font-medium text-gray-900 dark:text-white">{session?.user?.name}</h5>
67+
<span className="text-sm text-gray-600 dark:text-white">{session?.user?.email}</span>
6868
<Button variant='outline' className='w-full mt-2' onClick={() => { window.location.href = '/dashboard' }}>
6969
Dashboard
7070
</Button>

‎components/dashboard/DashboardLayout.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const DashboardLayout = ({ children }) => {
66
<div className="flex flex-col min-h-screen">
77
<DashboardHeader />
88
<div className="flex-grow p-4 sm:ml-80">
9-
<div className="p-4 border border-gray-200 rounded-lg bg-white">
9+
<div className="p-4 border ">
1010
{children}
1111
</div>
1212
</div>

‎components/dashboard/TemplateForm.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -210,7 +210,7 @@ const TemplateForm = ({
210210
</LazyLoad>
211211
<div className="absolute top-3 right-3 cursor-pointer opacity-100">
212212
<Button onClick={() => handleDeleteImage(index)}>
213-
<Trash className='w-4 h-4 bg-white text-red-600 rounded-full p-1' />
213+
<Trash className='w-6 h-6 text-red-600 rounded-full p-1' />
214214
</Button>
215215
</div>
216216
</div>

‎models/Template.js‎ renamed to ‎models/Template.model.js‎

File renamed without changes.

‎pages/api/template.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { mongooseConnect } from "@/lib/mongoose";
2-
import { Template } from "@/models/Template";
2+
import { Template } from "@/models/Template.model";
33

44
export default async function handle(req, res) {
55
const { method } = req;

0 commit comments

Comments
 (0)