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

Purple theme

main
Kevin Mok 7 days ago
parent
4cb4cb4959
commit
da54bd0272
8 changed files with 57 additions and 34 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 13
      src/app/layout.tsx
  2. 26
      src/components/Calendar.tsx
  3. 12
      src/components/CalendarHeader.tsx
  4. 4
      src/components/DayColumn.tsx
  5. 6
      src/components/DraggableEvent.tsx
  6. 8
      src/components/EventModal.tsx
  7. 7
      src/styles/fonts.ts
  8. 15
      tailwind.config.js

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">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<html lang="en" className={`${geistSans.variable} ${geistMono.variable} ${inter.variable} antialiased`}>
<body className="bg-gradient-to-br from-[#f3e8ff] to-[#e9d5ff] min-h-screen">
{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 ${
isSameDay(day, currentDate) ? 'text-white' : 'text-gray-600'
<div className={`w-full px-2 py-2 rounded-md flex flex-col items-center gap-1 ${
isSameDay(day, currentDate)
? 'bg-gradient-to-br from-indigo-600 to-violet-600 text-white'
: 'text-purple-100'
}`}> }`}>
{format(day, 'EEE')}
</div>
<div className={`w-8 h-8 rounded-full flex items-center justify-center ${
isSameDay(day, currentDate) ? 'bg-blue-500 text-white' : 'text-gray-900'
}`}>
{format(day, 'd')}
<div className="text-sm font-medium">
{format(day, 'EEE')}
</div>
<div className="w-8 h-8 rounded-full flex items-center justify-center">
{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.p className="text-gray-600 mb-2">Date: {formattedDate}</motion.p>
<motion.p className="text-gray-600">Time: {event.time}</motion.p>
<motion.h2 className="text-lg mb-4 font-sans">{event.title}</motion.h2>
<motion.p className="text-gray-600 mb-2 font-sans">Date: {formattedDate}</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
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
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: [],
}
Write Preview
Loading…
Cancel
Save