Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add Settings page #9

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

add Settings page #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
873 changes: 872 additions & 1 deletion client/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

16 changes: 15 additions & 1 deletion client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,25 +13,39 @@
"@fortawesome/fontawesome-svg-core": "^6.5.1",
"@fortawesome/free-brands-svg-icons": "^6.5.1",
"@fortawesome/react-fontawesome": "^0.2.0",
"@hookform/resolvers": "^3.3.4",
"@radix-ui/react-avatar": "^1.0.4",
"@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-hover-card": "^1.0.7",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-popover": "^1.0.7",
"@radix-ui/react-radio-group": "^1.1.3",
"@radix-ui/react-select": "^2.0.0",
"@radix-ui/react-separator": "^1.0.3",
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-switch": "^1.0.3",
"@radix-ui/react-toast": "^1.1.5",
"@radix-ui/react-tooltip": "^1.0.7",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.0",
"cmdk": "^0.2.1",
"date-fns": "^3.3.1",
"embla-carousel-autoplay": "^8.0.0-rc22",
"embla-carousel-react": "^8.0.0-rc22",
"gsap": "^3.12.5",
"lucide-react": "^0.330.0",
"next": "^14.1.0",
"next-themes": "^0.2.1",
"react": "^18.2.0",
"react-day-picker": "^8.10.0",
"react-hook-form": "^7.50.1",
"react-icons": "^5.0.1",
"react-image-gallery": "^1.3.0",
"tailwind-merge": "^2.2.1",
"tailwindcss-animate": "^1.0.7"
"tailwindcss-animate": "^1.0.7",
"zod": "^3.22.4"
},
"devDependencies": {
"autoprefixer": "^10.0.1",
Expand Down
159 changes: 91 additions & 68 deletions client/src/app/events/[eventName]/page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,39 +10,46 @@ import SmallPerson from '@/components/SmallPerson'
library.add(fab)

const event = {
title: 'Example Event',
summary: 'This is a dummy event.',
coverImage: 'https://picsum.photos/id/200/1080/300/',
startDateTime: '2024-02-21T00:00:00Z',
endDateTime: '2024-02-21T01:00:00Z',
venue: 'IIIT Sri City',
sponsors: [
"title": "Example Event",
"slug": "example-event",
"summary": "This is a dummy event.",
"coverImage": {
"sm": "https://picsum.photos/id/200/350/400/",
"md": "https://picsum.photos/id/200/800/400/",
"lg": "https://picsum.photos/id/200/1080/300/",
"thumb": "https://picsum.photos/id/200/1080/300/"
},
"startDateTime": "2024-02-21T00:00:00Z",
"endDateTime": "2024-02-21T01:00:00Z",
"venue": "IIIT Sri City",
"eventType": "string",
"sponsors": [
{
name: 'Example Sponsor 1',
logo: 'https://github.com/shadcn.png',
url: 'https://www.example.com/sponsor1',
"sponsorName": "Example Sponsor 1",
"logo": "https://github.com/shadcn.png",
"url": "https://www.example.com/sponsor1"
},
{
name: 'Example Sponsor 2',
logo: 'https://github.com/shadcn.png',
url: 'https://www.example.com/sponsor2',
},
],
socialMediaPosts: [
'https://www.facebook.com/exampleevent',
'https://www.twitter.com/exampleevent',
"sponsorName": "Example Sponsor 2",
"logo": "https://github.com/shadcn.png",
"url": "https://www.example.com/sponsor2"
}
],
description: '<p>This is a description of the event.</p>',
acceptingRegistrations: true,
completed: false,
eventManagers: ['user1', 'user2'],
organizers: ['user3'],
volunteers: ['user4', 'user5'],
gallery: [
'https://picsum.photos/id/1018/1000/600/',
'https://picsum.photos/id/1015/1000/600/',
'https://picsum.photos/id/1019/1000/600/',
"socialMediaPosts": [
"https://www.facebook.com/exampleevent",
"https://www.twitter.com/exampleevent"
],
"description": "<p>This is a description of the event.</p>",
"acceptRegistrations": true,
"completed": false,
"managers": ["user1", "user2"],
"organizers": ["user3"],
"volunteers": ["user4", "user5"],
"gallery": [
"https://picsum.photos/id/1018/1000/600/",
"https://picsum.photos/id/1015/1000/600/",
"https://picsum.photos/id/1019/1000/600/"
]
}

const gallery = []
Expand All @@ -57,42 +64,60 @@ event.gallery.forEach((url) => {
})
const Page = () => {
return (
<div className=" text-white px-4 w-[95%] m-auto mb-10">
<div className="text-white px-4 w-[95%] m-auto mb-10">
<div className="flex flex-col gap-4 items-center">
<div className="flex flex-col items-center gap-4 w-full justify-between">
{event.coverImage && (
<img
src={event.coverImage}
alt=""
className=" object-cover rounded-lg shadow-md shadow-blue-500/40"
/>
<>
{event.coverImage.sm && (
<img
src={event.coverImage.sm}
alt=""
className="object-cover rounded-lg shadow-md shadow-blue-500/40 sm:hidden "
/>
)}
{event.coverImage.md && (
<img
src={event.coverImage.md}
alt=""
className={`object-cover rounded-lg shadow-md shadow-blue-500/40 ${event.coverImage.sm ? "hidden" : ""} sm:block ${event.coverImage.lg ? "md:hidden" : ""} `}
/>
)}
{event.coverImage.lg && (
<img
src={event.coverImage.lg}
alt=""
className={`object-cover rounded-lg shadow-md shadow-blue-500/40 hidden md:block`}
/>
)}
<h1 className="text-3xl font-bold text-blue-500">
{event.title}
</h1>
<p className="text-gray-400">{event.summary}</p>
<div className="text-center py-5 my-5 border-y-2 border-white">
<div className="flex gap-5 items-center mb-4">
<p className="text-gray-200">
<span className="material-symbols-outlined text-5xl">
date_range
</span>
</p>
<p>
{formatDateTime(event.startDateTime)}
<p>To</p>
{formatDateTime(event.endDateTime)}
</p>
</div>
<p className="text-gray-200 flex items-center justify-center gap-3">
<span className="material-symbols-outlined">
location_on
</span>{' '}
{event.venue}
</p>
</div>
</>
)}
<h1 className="text-3xl font-bold text-blue-500">
{event.title}
</h1>
<p className="text-gray-400">{event.summary}</p>
<div className=" text-center py-5 my-5 border-y-2 border-white">
<div className="flex gap-5 items-center mb-4">
<p className="text-gray-200">
<span className="material-symbols-outlined text-5xl">
date_range
</span>
</p>
<p>
{formatDateTime(event.startDateTime)}
<p>To</p>
{formatDateTime(event.endDateTime)}
</p>
</div>
<p className="text-gray-200 flex items-center justify-center gap-3">
<span className="material-symbols-outlined">
location_on
</span>{' '}
{event.venue}
</p>
</div>
</div>
{event.acceptingRegistrations && (
{event.acceptRegistrations && (
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
Register Now
</button>
Expand All @@ -108,18 +133,16 @@ const Page = () => {
<div className="flex flex-wrap gap-4 mt-4 items-center justify-around">
{event.sponsors.map((sponsor) => (
<a
key={sponsor.name}
key={sponsor.sponsorName}
href={sponsor.url}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2 hover:text-blue-500"
>
<Image
<img
src={sponsor.logo}
alt={sponsor.name}
width={200}
height={200}
className=" max-h-[100px] max-w-200px rounded"
alt={sponsor.sponsorName}
className="max-h-[100px] max-w-200px rounded"
/>
</a>
))}
Expand All @@ -130,13 +153,13 @@ const Page = () => {
<MyGallery images={gallery} />

<div className="flex flex-col gap-2 mt-4 items-center">
{event.eventManagers.length > 0 && (
{event.managers.length > 0 && (
<p className="text-gray-200 mb-2 pb-2 border-b-2 text-xl ">
Event Managers
</p>
)}
<div className="flex flex-wrap gap-2 ">
{event.eventManagers.map((manager) => (
{event.managers.map((manager) => (
<SmallPerson key={manager} name={manager} />
))}
</div>
Expand All @@ -156,7 +179,7 @@ const Page = () => {
</div>

<div className="flex flex-col gap-2 mt-4 items-center">
{event.organizers.length > 0 && (
{event.volunteers.length > 0 && (
<p className="text-gray-200 mb-2 pb-2 border-b-2 text-xl ">
Volunteers
</p>
Expand Down
52 changes: 52 additions & 0 deletions client/src/app/login/page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import Image from 'next/image';
import React from 'react';

const Page = () => {
return (
<div className="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8 bg-gray-950 mb-10">
<div className="sm:mx-auto sm:w-full sm:max-w-sm">
<Image
src="https://github.com/Enigma-IIITS/enigma-site/assets/116871732/c72bc255-b90b-45f6-b980-b7b451d6465c"
alt="logo"
width={70}
height={70}
className="mx-auto w-auto"
/>
<h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-white">Log in to your account</h2>
</div>

<div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
<form className="space-y-6" action="#" method="POST">
<div>
<div className="grid gap-2">
<Label htmlFor="username">Username</Label>
<Input id="username" type="text" />
</div>
</div>


<div>
<div className="grid gap-2">
<Label htmlFor="password">Password</Label>
<Input id="password" type="password" />
</div>
</div>

<div>
<Button className="w-full">Create account</Button>
</div>
</form>

<p className="mt-10 text-center text-sm text-white">
Not a member?
<a href="/signup" className=" mx-2 font-semibold leading-6 text-indigo-600 hover:text-indigo-500">Join Now!</a>
</p>
</div>
</div>
);
};

export default Page;
18 changes: 18 additions & 0 deletions client/src/app/settings/account/page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { Separator } from "@/components/ui/separator"
import { AccountForm } from "@/components/settings/account-form"

export default function Page() {
return (
<div className="space-y-6 max-w-[90%] mb-10 m-auto flex flex-col justify-center ">
<div>
<h3 className="text-lg font-medium">Account</h3>
<p className="text-sm text-muted-foreground">
Update your account settings. Set your preferred language and
timezone.
</p>
</div>
<Separator />
<AccountForm />
</div>
)
}
18 changes: 18 additions & 0 deletions client/src/app/settings/appearance/page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { Separator } from "@/components/ui/separator"
import { AppearanceForm } from "@/components/settings/appearance-form"

export default function SettingsAppearancePage() {
return (
<div className="space-y-6">
<div>
<h3 className="text-lg font-medium">Appearance</h3>
<p className="text-sm text-muted-foreground">
Customize the appearance of the app. Automatically switch between day
and night themes.
</p>
</div>
<Separator />
<AppearanceForm />
</div>
)
}
50 changes: 50 additions & 0 deletions client/src/app/settings/layout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import Image from "next/image"

import { Separator } from "@/components/ui/separator"
import { SidebarNav } from "@/components/settings/sidebar-nav"

export const metadata = {
title: "Forms",
description: "Advanced form example using react-hook-form and Zod."
}

const sidebarNavItems = [
{
title: "Profile",
href: "/settings"
},
{
title: "Account",
href: "/settings/account"
},
{
title: "Appearance",
href: "/settings/appearance"
},
{
title: "Notifications",
href: "/settings/notifications"
}
]

export default function SettingsLayout({ children }) {
return (
<>
<div className=" space-y-6 p-10 pb-16 ">
<div className="space-y-0.5">
<h2 className="text-2xl font-bold tracking-tight">Settings</h2>
<p className="text-muted-foreground">
Manage your account settings.
</p>
</div>
<Separator className="my-6" />
<div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
<aside className="-mx-4 lg:w-1/5">
<SidebarNav items={sidebarNavItems} />
</aside>
<div className="flex-1 lg:max-w-2xl">{children}</div>
</div>
</div>
</>
)
}
Loading