Skip to content

Commit 5d6e87f

Browse files
SolankimimohSolankimimoh
committed
Updated schedule page, Animation added, Calender button added
1 parent 70d77e4 commit 5d6e87f

27 files changed

Lines changed: 833 additions & 268 deletions

‎.idea/tailwindcss.xml‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/workspace.xml‎

Lines changed: 25 additions & 16 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/[lang]/schedule/layout.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,5 @@ export async function generateMetadata({ params }) {
77
}
88

99
export default function ScheduleLayout({ children }) {
10-
return <div>{children}</div>;
10+
return <div className="">{children}</div>;
1111
}

‎src/app/layout.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export const metadata = {
3535
export default function RootLayout({ children }) {
3636
return (
3737
<html className={openSans.className}>
38-
<body className="flex flex-col min-h-screen">{children}</body>
38+
<body className="bg-gray-50 flex flex-col min-h-screen ">{children}</body>
3939
</html>
4040
);
4141
}

‎src/components/elements/CalendarButton.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { LuCalendarPlus } from 'react-icons/lu';
2+
3+
/**
4+
* Calendar Button Component
5+
*/
6+
const CalendarButton = ({ onClick }) => (
7+
<button
8+
onClick={onClick}
9+
className="absolute top-4 right-4 p-2 text-gray-500 hover:text-blue-800 hover:bg-blue-100 rounded-lg transition-colors duration-200 z-10 cursor-pointer"
10+
aria-label="Add to calendar"
11+
title="Add to calendar"
12+
>
13+
<LuCalendarPlus
14+
size={20}
15+
className="hover:scale-110 hover:rotate-6 transition-transform duration-200"
16+
/>
17+
</button>
18+
);
19+
20+
export default CalendarButton;

‎src/components/elements/LanguageSwitcher.js‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,14 @@ import { usePathname, useSearchParams } from 'next/navigation';
55
import Link from 'next/link';
66
import { useLocale } from 'next-intl';
77
import { locales } from '@/i18n';
8+
import ICON_REGISTRY, { getIcon } from '@/lib/icons';
89

910
// The actual switcher component that uses useSearchParams
1011
function LanguageSwitcherContent() {
1112
const pathName = usePathname();
1213
const searchParams = useSearchParams();
1314
const currentLocale = useLocale();
15+
const IconComponent = getIcon('language');
1416

1517
// Get the alternative locale
1618
const alternativeLocale = locales.find((locale) => locale !== currentLocale);
@@ -32,8 +34,10 @@ function LanguageSwitcherContent() {
3234
{alternativeLocale && (
3335
<Link
3436
href={redirectedPathName(alternativeLocale)}
35-
className="text-gray-800 px-4 py-2 text-md hover:text-black hover:bg-gray-200 rounded-full"
37+
className="text-gray-800 px-4 py-2 text-md flex items-center gap-1 hover:text-black hover:bg-gray-200 rounded-full sm:hover:ring-gray-500 sm:hover:ring-1"
3638
>
39+
{IconComponent && <IconComponent size={20} strokeWidth={2} />}
40+
3741
{alternativeLocale.toUpperCase()}
3842
</Link>
3943
)}
@@ -44,13 +48,13 @@ function LanguageSwitcherContent() {
4448
// Main component with Suspense wrapper
4549
const LanguageSwitcher = () => {
4650
return (
47-
<Suspense fallback={
48-
<div className="flex items-center">
49-
<div className="text-gray-800 px-4 py-2 text-md">
50-
...
51+
<Suspense
52+
fallback={
53+
<div className="flex items-center">
54+
<div className="text-gray-800 px-4 py-2 text-md">...</div>
5155
</div>
52-
</div>
53-
}>
56+
}
57+
>
5458
<LanguageSwitcherContent />
5559
</Suspense>
5660
);

‎src/components/elements/MobileDrawer.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import Navbar from '@/components/elements/Navbar';
22
import Link from 'next/link';
3-
import { useParams} from 'next/navigation';
4-
3+
import { useParams } from 'next/navigation';
54

65
const MobileDrawer = ({ isOpen, onClose }) => {
76
const { lang } = useParams();
@@ -28,7 +27,6 @@ const MobileDrawer = ({ isOpen, onClose }) => {
2827
{/* Header/Title Section */}
2928
<Link href={`/${lang}`}>
3029
<div className="mb-4 pl-4 pt-3">
31-
{' '}
3230
{/* Add margin-bottom for spacing */}
3331
<h2 className="text-md">DevFest 2025</h2>
3432
<p className="text-gray-500 text-sm">GDG Montréal</p>

‎src/components/elements/Navbar.js‎

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import Link from 'next/link';
22
import { useParams, usePathname } from 'next/navigation';
33
import { v4 as uuidv4 } from 'uuid';
44
import { useTranslations } from 'next-intl';
5+
import { LuUsers, LuCalendar, LuMic } from 'react-icons/lu';
6+
import { getIcon } from '@/lib/icons';
57

68
const Navbar = ({ isMobile }) => {
79
const pathname = usePathname();
@@ -26,7 +28,7 @@ const Navbar = ({ isMobile }) => {
2628
aria-label="Main navigation"
2729
className={
2830
isMobile
29-
? 'flex flex-col space-y-2 '
31+
? 'flex flex-col space-y-2'
3032
: 'hidden lg:flex space-x-3 items-center'
3133
}
3234
>
@@ -36,25 +38,35 @@ const Navbar = ({ isMobile }) => {
3638
(normalizedPathname === '/' && link.href === '/') ||
3739
(link.href !== '/' && normalizedPathname.startsWith(link.href));
3840

41+
const IconComponent = getIcon(link.icon);
42+
3943
return (
4044
<Link
4145
key={link.uuid}
4246
href={link.newWindow ? link.href : `/${lang}${link.href}`}
4347
target={link.newWindow ? '_blank' : '_self'}
4448
rel={link.newWindow ? 'noopener noreferrer' : undefined}
4549
className={`
46-
text-gray-800
47-
px-4
48-
py-2
49-
text-md
50-
hover:text-black
51-
hover:bg-gray-200
52-
${!isMobile && 'rounded-full'}
53-
${isActive ? 'bg-gray-200 text-gray-800' : ''}
54-
`}
50+
flex items-center gap-1
51+
text-gray-900
52+
px-4
53+
py-2
54+
text-md
55+
hover:text-gray-900
56+
hover:bg-gray-200
57+
hover:ring-1
58+
hover:ring-gray-600
59+
transition-all
60+
hover:shadow-sm
61+
duration-200
62+
ease-in
63+
${!isMobile && 'rounded-full'}
64+
${isActive ? 'bg-gray-200 text-gray-900 sm:ring-gray-600 sm:ring-1' : ''}
65+
`}
5566
aria-current={isActive ? 'page' : undefined}
5667
>
57-
{link.label}
68+
{IconComponent && <IconComponent size={20} strokeWidth={2} />}
69+
<span>{link.label}</span>
5870
</Link>
5971
);
6072
})}

‎src/components/elements/PillButton.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ const Button = ({
1111
disabled = false,
1212
aria_label = label,
1313
className = '',
14-
onClick, // Add onClick prop for handling click events
14+
onClick,
15+
children, // Add onClick prop for handling click events
1516
}) => {
1617
return (
1718
<Link
@@ -34,6 +35,7 @@ const Button = ({
3435
className
3536
)}
3637
>
38+
{children}
3739
{label}
3840
</Link>
3941
);

‎src/components/elements/QuickTips.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { useTranslations } from 'next-intl';
2+
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
3+
import { useMemo } from 'react';
4+
import { getIcon } from '@/lib/icons';
5+
import { getColorForIndex, getRotationForIndex } from '@/lib/colors';
6+
7+
const QuickTips = ({ tips }) => {
8+
if (!tips || tips.length === 0) return null;
9+
10+
return (
11+
<div
12+
className="bg-white rounded-2xl p-6 lg:p-8 lg:sticky lg:top-8 overflow-hidden shadow-md ring-2
13+
ring-gray-300"
14+
>
15+
<h2 className="text-xl font-bold text-gray-900 mb-1">{tips.title}</h2>
16+
<p className="text-sm text-gray-600 mb-6">{tips.subtitle}</p>
17+
18+
<div className="flex flex-col gap-5">
19+
{tips.items.map((tip, index) => {
20+
const IconComponent = getIcon(tip.icon);
21+
const colors = getColorForIndex(index);
22+
const rotation = getRotationForIndex(index);
23+
24+
return (
25+
<div
26+
key={index}
27+
className={`flex items-start gap-3 rounded-xl px-4 py-3 group transition-all duration-300 ease-in-out ${colors.bg} ${colors.text} ${rotation} hover:rotate-0 hover:scale-[1.02] hover:shadow-lg`}
28+
>
29+
<div className="mt-0.5 flex-shrink-0 group-hover:rotate-6 transition-all duration-300">
30+
{IconComponent && <IconComponent size={21} />}
31+
</div>
32+
<span className="text-sm font-medium leading-relaxed flex-1">
33+
{tip.text}
34+
</span>
35+
</div>
36+
);
37+
})}
38+
</div>
39+
</div>
40+
);
41+
};
42+
export default QuickTips;

0 commit comments

Comments
 (0)