Skip to content

Commit

Permalink
Updated styles of the website.
Browse files Browse the repository at this point in the history
  • Loading branch information
@KrishDave1
KrishDave1 committed Nov 23, 2024
1 parent 488ec14 commit dd2e483
Show file tree
Hide file tree
Showing 7 changed files with 1,474 additions and 91 deletions.
349 changes: 349 additions & 0 deletions public/Online Messaging App.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
306 changes: 306 additions & 0 deletions public/Responsive Design.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
515 changes: 515 additions & 0 deletions public/Secure and fast.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
111 changes: 63 additions & 48 deletions src/app/(auth)/login/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,69 +5,84 @@
import { Button } from "@/components/ui/Button";
import { useToast } from "@/components/ui/use-toast";
import { signIn } from "next-auth/react";
import { FC, useState } from "react";
import { FC } from "react";
import Image from "next/image";

interface pageProps {}
interface PageProps {}

const Login: FC<pageProps> = ({}) => {
const Login: FC<PageProps> = ({}) => {
const { toast } = useToast();

const loginwithGoogle = async () => {
const loginWithGoogle = async () => {
try {
await signIn("google");
} catch (error) {
// Display error to user
toast({
title: "SignIn Error",
description: "An error occurred while signing in",
title: "Sign-In Error",
description: "An error occurred while signing in. Please try again.",
variant: "destructive",
});
}
};

return (
<>
<div className='flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8'>
<div className='w-full flex flex-col items-center max-w-md space-y-8'>
<div className='flex flex-col items-center gap-8'>
logo
<h2 className='mt-6 text-center text-3xl font-bold tracking-tight text-gray-900'>
Sign in to your account
</h2>
</div>
<Button className='max-w-sm mx-auto w-full' onClick={loginwithGoogle}>
<svg
className='mr-2 h-4 w-4'
aria-hidden='true'
focusable='false'
data-prefix='fab'
data-icon='github'
role='img'
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 24 24'
>
<path
d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z'
fill='#4285F4'
/>
<path
d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z'
fill='#34A853'
/>
<path
d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z'
fill='#FBBC05'
/>
<path
d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z'
fill='#EA4335'
/>
<path d='M1 1h22v22H1z' fill='none' />
</svg>
Google
</Button>
<div className='min-h-screen flex items-center justify-center bg-gradient-to-br from-indigo-100 to-purple-200'>
<div className='bg-white shadow-xl rounded-lg p-8 w-full max-w-md'>
<div className='text-center mb-8'>
<Image
src='/favicon.ico' // Replace with your logo path
alt='Sync Logo'
width={100}
height={100}
className='mx-auto'
/>
<h1 className='text-3xl font-bold text-indigo-800 mt-4'>
Welcome to <span className='text-purple-600'>Sync</span>
</h1>
<p className='text-gray-600 mt-2'>Sign in to continue</p>
</div>
<Button
className='w-full flex items-center justify-center bg-indigo-700 text-white hover:bg-indigo-800 transition duration-300 font-semibold py-3 rounded-lg shadow-md'
onClick={loginWithGoogle}
>
<svg
className='mr-2 h-5 w-5'
aria-hidden='true'
focusable='false'
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 24 24'
>
<path
d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z'
fill='#4285F4'
/>
<path
d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z'
fill='#34A853'
/>
<path
d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z'
fill='#FBBC05'
/>
<path
d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z'
fill='#EA4335'
/>
<path d='M1 1h22v22H1z' fill='none' />
</svg>
Continue with Google
</Button>
<div className='mt-6 text-center text-gray-600'>
Don’t have an account?{" "}
<a
href='/register'
className='text-indigo-700 font-semibold hover:underline'
>
Sign up
</a>
</div>
</div>
</>
</div>
);
};

Expand Down
156 changes: 123 additions & 33 deletions src/app/(dashboard)/dashboard/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,98 @@
// /** @format */

// import { signOut, useSession } from "next-auth/react";
// import { Button } from "@/components/ui/Button";
// import { getServerSession } from "next-auth";
// import { authOptions } from "../../api/auth/[...nextauth]/options";
// import { notFound } from "next/navigation";
// import { getFriendsByUserId } from "@/helpers/get-friends-by-userId";
// import { fetchRedis } from "@/helpers/redis";
// import { chatHrefConstructor } from "@/lib/utils";
// import { ChevronRight } from "lucide-react";
// import Link from "next/link";
// import Image from "next/image";

// const Dashboard = async () => {
// const session = await getServerSession(authOptions);

// if (!session) {
// notFound();
// }

// const friends = await getFriendsByUserId(session.user.id);

// const friendsWithLastMessage = await Promise.all(
// friends.map(async (friend) => {
// const [lastMessageRaw] = (await fetchRedis(
// "zrange",
// `chat:${chatHrefConstructor(session.user.id, friend.id)}:messages`,
// -1,
// -1
// )) as string[];

// const lastMessage = JSON.parse(lastMessageRaw) as Message;
// return {
// ...friend,
// lastMessage,
// };
// })
// );

// return (
// <div className='container py-12'>
// <h1 className='font-bold text-5xl mb-8'>Recent Chats</h1>
// {friendsWithLastMessage.length === 0 ? (
// <p className='text-sm text-zinc-500'>No Recent Chats</p>
// ) : (
// friendsWithLastMessage.map((friend) => (
// <div
// key={friend.id}
// className='relative bg-zinc-50 border-zinc-200 p-3 rounded-md my-4'
// >
// <div className='absolute right-4 inset-y-0 flex items-center space-x-4'>
// <ChevronRight className='w-7 h-7 text-zinc-400' />
// </div>

// <Link
// href={`/dashboard/chat/${chatHrefConstructor(
// session.user.id,
// friend.id
// )}`}
// className='relative sm:flex'
// >
// <div className='mb-4 flex-shrink-0 sm:mb-0 sm:mr-4'>
// <div className='relative h-6 w-6'>
// <Image
// referrerPolicy='no-referrer'
// className='rounded-full'
// alt={`${friend.name} profile picture`}
// src={friend.image}
// fill
// />
// </div>
// </div>

// <div>
// <h4 className='text-lg font-semibold'>{friend.name}</h4>
// <p className='mt-1 max-w-md'>
// <span className='text-zinc-400'>
// {friend.lastMessage.senderId === session.user.id
// ? "You: "
// : ""}
// </span>
// {friend.lastMessage.text}
// </p>
// </div>
// </Link>
// </div>
// ))
// )}
// </div>
// );
// };

// export default Dashboard;

/** @format */

import { signOut, useSession } from "next-auth/react";
Expand Down Expand Up @@ -39,52 +134,47 @@ const Dashboard = async () => {
);

return (
<div className='container py-12'>
<h1 className='font-bold text-5xl mb-8'>Recent Chats</h1>
<div className="container mx-auto py-12 px-4">
<h1 className="font-bold text-4xl lg:text-5xl text-indigo-900 mb-8">
Recent Chats
</h1>
{friendsWithLastMessage.length === 0 ? (
<p className='text-sm text-zinc-500'>No Recent Chats</p>
<p className="text-sm text-gray-500">No recent chats available.</p>
) : (
friendsWithLastMessage.map((friend) => (
<div
<Link
href={`/dashboard/chat/${chatHrefConstructor(
session.user.id,
friend.id
)}`}
key={friend.id}
className='relative bg-zinc-50 border-zinc-200 p-3 rounded-md my-4'
className="group block border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-lg hover:bg-gray-50 transition mb-4"
>
<div className='absolute right-4 inset-y-0 flex items-center space-x-4'>
<ChevronRight className='w-7 h-7 text-zinc-400' />
</div>

<Link
href={`/dashboard/chat/${chatHrefConstructor(
session.user.id,
friend.id
)}`}
className='relative sm:flex'
>
<div className='mb-4 flex-shrink-0 sm:mb-0 sm:mr-4'>
<div className='relative h-6 w-6'>
<Image
referrerPolicy='no-referrer'
className='rounded-full'
alt={`${friend.name} profile picture`}
src={friend.image}
fill
/>
</div>
<div className="flex items-center">
<div className="relative h-10 w-10 rounded-full overflow-hidden bg-gray-100">
<Image
src={friend.image}
alt={`${friend.name}'s profile`}
fill
className="object-cover"
/>
</div>

<div>
<h4 className='text-lg font-semibold'>{friend.name}</h4>
<p className='mt-1 max-w-md'>
<span className='text-zinc-400'>
<div className="ml-4 flex-1">
<h3 className="text-lg font-medium text-gray-800">
{friend.name}
</h3>
<p className="text-sm text-gray-600 truncate">
<span className="font-semibold">
{friend.lastMessage.senderId === session.user.id
? "You: "
: ""}
</span>
{friend.lastMessage.text}
</p>
</div>
</Link>
</div>
<ChevronRight className="w-5 h-5 text-gray-400 ml-auto group-hover:text-indigo-600" />
</div>
</Link>
))
)}
</div>
Expand Down
Loading

0 comments on commit dd2e483

Please sign in to comment.