Kevin-Mok/kanban
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Purple theme

Browse Source
This commit is contained in:
Kevin Mok
2025-03-28 14:43:07 -04:00
parent 4cb4cb4959
commit da54bd0272
8 changed files with 57 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/app/layout.tsx
View File

@@ -1,6 +1,7 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google"; import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css"; import "./globals.css";
import { inter } from '@/styles/fonts';
const geistSans = Geist({ const geistSans = Geist({
variable: "--font-geist-sans", variable: "--font-geist-sans",
@@ -19,14 +20,12 @@ export const metadata: Metadata = {
export default function RootLayout({ export default function RootLayout({
children, children,
}: Readonly<{ }: {
children: React.ReactNode; children: React.ReactNode
}>) { }) {
return ( return (
<html lang="en"> <html lang="en" className={`${geistSans.variable} ${geistMono.variable} ${inter.variable} antialiased`}>
<body <body className="bg-gradient-to-br from-[#f3e8ff] to-[#e9d5ff] min-h-screen">
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children} {children}
</body> </body>
</html> </html>

26
src/components/Calendar.tsx
View File

@@ -231,7 +231,7 @@ const Calendar = () => {
<div <div
ref={containerRef} ref={containerRef}
className="flex-1 overflow-hidden" className="flex-1 overflow-hidden bg-gradient-to-br from-[#f5f3ff] to-[#ede9fe]"
onTouchStart={handleTouchStart} onTouchStart={handleTouchStart}
onTouchMove={handleTouchMove} onTouchMove={handleTouchMove}
onTouchEnd={handleTouchEnd} onTouchEnd={handleTouchEnd}
@@ -379,7 +379,7 @@ const DayColumn = ({
className={`flex-1 ${isMobile ? 'min-w-[calc(100vw-32px)]' : ''} bg-gray-50 rounded-lg p-2 relative`} className={`flex-1 ${isMobile ? 'min-w-[calc(100vw-32px)]' : ''} bg-gray-50 rounded-lg p-2 relative`}
data-day={dayOffset} data-day={dayOffset}
> >
<div className="font-bold mb-2 text-black text-xl"> <div className="font-bold mb-2 text-purple-500 text-med">
{format(date, 'EEE, MMM d')} {format(date, 'EEE, MMM d')}
</div> </div>
@@ -414,24 +414,26 @@ const WeekHeader = ({ currentDate }: { currentDate: Date }) => {
}, [currentDate]); }, [currentDate]);
return ( return (
<div className="flex justify-between px-2 py-3 border-b"> <div className="flex justify-between px-2 py-3 bg-gradient-to-r from-blue-500 to-purple-500">
{weekDays.map((day, index) => ( {weekDays.map((day, index) => (
<motion.div <motion.div
key={day.toISOString()} key={day.toISOString()}
className="flex flex-col items-center flex-1" className="flex flex-col items-center flex-1"
initial={false} initial={false}
animate={{ backgroundColor: isSameDay(day, currentDate) ? '#3B82F6' : 'transparent' }} animate={{ backgroundColor: 'transparent' }}
transition={{ duration: 0.3 }} transition={{ duration: 0.3 }}
> >
<div className={`text-sm font-medium ${ <div className={`w-full px-2 py-2 rounded-md flex flex-col items-center gap-1 ${
isSameDay(day, currentDate) ? 'text-white' : 'text-gray-600' isSameDay(day, currentDate)
? 'bg-gradient-to-br from-indigo-600 to-violet-600 text-white'
: 'text-purple-100'
}`}> }`}>
{format(day, 'EEE')} <div className="text-sm font-medium">
</div> {format(day, 'EEE')}
<div className={`w-8 h-8 rounded-full flex items-center justify-center ${ </div>
isSameDay(day, currentDate) ? 'bg-blue-500 text-white' : 'text-gray-900' <div className="w-8 h-8 rounded-full flex items-center justify-center">
}`}> {format(day, 'd')}
{format(day, 'd')} </div>
</div> </div>
</motion.div> </motion.div>
))} ))}

12
src/components/CalendarHeader.tsx
View File

@@ -8,27 +8,27 @@ interface CalendarHeaderProps {
function CalendarHeader({ currentDate, onPrevWeek, onNextWeek }: CalendarHeaderProps) { function CalendarHeader({ currentDate, onPrevWeek, onNextWeek }: CalendarHeaderProps) {
return ( return (
<div className="flex items-center justify-center gap-4"> <div className="flex items-center justify-center gap-4 p-4 bg-gradient-to-r from-blue-500 to-purple-500">
<button <button
onClick={onPrevWeek} onClick={onPrevWeek}
className="p-2 rounded-full hover:bg-gray-100" className="p-2 rounded-full bg-gradient-to-br from-indigo-400 to-violet-400 hover:from-indigo-500 hover:to-violet-500"
> >
{/* Left arrow icon */} {/* Left arrow icon */}
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
</svg> </svg>
</button> </button>
<h2 className="text-xl font-semibold"> <h2 className="text-xl font-semibold text-purple-100 font-sans">
{format(currentDate, 'MMMM yyyy')} {format(currentDate, 'MMMM yyyy')}
</h2> </h2>
<button <button
onClick={onNextWeek} onClick={onNextWeek}
className="p-2 rounded-full hover:bg-gray-100" className="p-2 rounded-full bg-gradient-to-br from-indigo-400 to-violet-400 hover:from-indigo-500 hover:to-violet-500"
> >
{/* Right arrow icon */} {/* Right arrow icon */}
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
</svg> </svg>
</button> </button>

4
src/components/DayColumn.tsx
View File

@@ -44,10 +44,10 @@ const DayColumn: React.FC<DayColumnProps> = ({
return ( return (
<motion.div <motion.div
ref={columnRef} ref={columnRef}
className={`flex-1 ${isMobile ? 'min-w-[calc(100vw-32px)]' : ''} bg-gray-50 rounded-lg p-2 relative`} className={`flex-1 ${isMobile ? 'min-w-[calc(100vw-32px)]' : ''} bg-gray-50 rounded-lg p-2 relative shadow-md z-10`}
data-day={index} data-day={index}
> >
<div className="font-bold mb-2 text-black text-xl"> <div className="font-bold mb-2 text-purple-600 text-sm font-sans">
{format(date, 'EEE, MMM d')} {format(date, 'EEE, MMM d')}
</div> </div>

6
src/components/DraggableEvent.tsx
View File

@@ -69,7 +69,7 @@ export default function DraggableEvent({
ref={ref} ref={ref}
layoutId={event.id} layoutId={event.id}
onClick={() => !isDragging && onEventClick({ event, date })} onClick={() => !isDragging && onEventClick({ event, date })}
className="bg-white p-4 rounded shadow mb-2 cursor-grab active:cursor-grabbing transition-all relative select-none" className="bg-white p-4 rounded shadow-md mb-2 cursor-grab active:cursor-grabbing transition-all relative select-none"
whileHover={{ scale: 1.01 }} whileHover={{ scale: 1.01 }}
style={{ style={{
opacity: isDragging ? 0.7 : 1, opacity: isDragging ? 0.7 : 1,
@@ -87,11 +87,11 @@ export default function DraggableEvent({
draggable="false" draggable="false"
/> />
)} )}
<div className="absolute top-1 right-1 bg-black/50 text-white text-xs px-2 py-1 rounded"> <div className="absolute top-1 right-1 bg-gradient-to-br from-indigo-600 to-violet-600 text-white text-[12px] md:text-[10px] px-1 py-0.5 rounded">
{event.time} {event.time}
</div> </div>
</div> </div>
<h3 className="font-medium text-black">{event.title}</h3> <h3 className="text-sm text-black font-sans">{event.title}</h3>
</motion.div> </motion.div>
); );
} }

8
src/components/EventModal.tsx
View File

@@ -62,11 +62,11 @@ const EventModal = ({ event, date, onClose }: EventModalProps) => {
className="w-full h-48 object-cover rounded-lg mb-4" className="w-full h-48 object-cover rounded-lg mb-4"
/> />
)} )}
<motion.h2 className="text-2xl font-bold mb-4">{event.title}</motion.h2> <motion.h2 className="text-lg mb-4 font-sans">{event.title}</motion.h2>
<motion.p className="text-gray-600 mb-2">Date: {formattedDate}</motion.p> <motion.p className="text-gray-600 mb-2 font-sans">Date: {formattedDate}</motion.p>
<motion.p className="text-gray-600">Time: {event.time}</motion.p> <motion.p className="text-gray-600 font-sans">Time: {event.time}</motion.p>
{event.description && ( {event.description && (
<motion.p className="text-gray-600"> <motion.p className="text-gray-600 font-sans">
Description: {event.description} Description: {event.description}
</motion.p> </motion.p>
)} )}

7
src/styles/fonts.ts Normal file
View File

@@ -0,0 +1,7 @@
import { Inter } from 'next/font/google';
export const inter = Inter({
subsets: ['latin'],
variable: '--font-inter',
display: 'swap',
});

15
tailwind.config.js Normal file
View File

@@ -0,0 +1,15 @@
const { fontFamily } = require('tailwindcss/defaultTheme')
module.exports = {
content: [
// ... existing content ...
],
theme: {
extend: {
fontFamily: {
sans: ['var(--font-inter)', ...fontFamily.sans],
},
},
},
plugins: [],
}