Skip to content

Commit

Permalink
Merge pull request #12 from Samvibhanshu/dev
Browse files Browse the repository at this point in the history 
PR :33
  • Loading branch information
@Samvibhanshu
Samvibhanshu authored Nov 7, 2024
2 parents 326a8a7 + f448787 commit 3e42f6e
Show file tree
Hide file tree
Showing 14 changed files with 319 additions and 68 deletions.
1 change: 1 addition & 0 deletions Found-It
Submodule Found-It added at e5106d
24 changes: 14 additions & 10 deletions components/Card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,24 @@ interface CardProps {
title: string;
location: string;
time: string;
image: string;
locationLabel?: string; // New optional prop for location label
}

const Card: React.FC<CardProps> = ({ title, location, time }) => {
const Card: React.FC<CardProps> = ({ title, location, time, image, locationLabel = "Found at" }) => {
return (
<div className="bg-[#28AFB096] p-4 rounded-lg shadow-md">
<img
src="/assets/sample.png"
alt={title} //background: #19647E;
width={300}
height={100}
className="rounded-lg mb-4"
/>
<div
className="bg-[#28AFB096] p-4 rounded-lg shadow-md"
style={{ width: '330px', height: '310px' }} // Fixed card size
>
<img
src={image} // Use the image prop
alt={title}
className="rounded-lg mb-4"
style={{ width: '100%', height: '200px', objectFit: 'cover' }} // Fixed image size
/>
<h5 className="text-[#19647E] text-lg font-semibold">{title}</h5>
<p className="text-sm">Found at: {location}</p>
<p className="text-sm">{locationLabel}: {location}</p> {/* Customizable label */}
<p className="text-sm">Time: {time}</p>
</div>
);
Expand Down
63 changes: 63 additions & 0 deletions components/LoginForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import React from 'react';

const LoginForm: React.FC<{ onClose: () => void }> = ({ onClose }) => {
return (
<div className="fixed inset-0 flex items-center justify-center z-50">

<div className="absolute inset-0 bg-black bg-opacity-50" />

<div className="w-full max-w-md rounded-lg bg-cyan-700 p-8 shadow-lg border-gray-700 border-opacity-15 border-4 relative z-10">
<div className="flex justify-between items-center mb-4">
<h2 className="text-gray-100 text-3xl font-bold">Login</h2>
<button
className="text-white text-xl hover:text-gray-300"
onClick={onClose}
>
✕
</button>
</div>

<form>
<label htmlFor="email" className="block text-gray-200 text-lg font-semibold mb-2">
Email:
</label>
<input
type="email"
id="email"
className="p-2 mb-4 w-full border border-gray-400 rounded-md text-lg focus:outline-none"
placeholder="Enter your email"
required
/>

<label htmlFor="password" className="block text-gray-200 text-lg font-semibold mb-2">
Password:
</label>
<input
type="password"
id="password"
className="p-2 mb-4 w-full border border-gray-400 rounded-md text-lg focus:outline-none"
placeholder="Enter your password"
required
/>

<div className="flex items-center justify-between mt-4">
<button
type="submit"
className="bg-cyan-800 text-white px-4 py-2 rounded-md hover:bg-cyan-900"
>
Login
</button>
<a
href="#"
className="text-sm text-cyan-300 hover:underline"
>
Forgot password?
</a>
</div>
</form>
</div>
</div>
);
};

export default LoginForm;
48 changes: 37 additions & 11 deletions components/found.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import AddItemButton from './Addbutton';
import AddItemForm from './AddItemForm';

const Found: React.FC = () => {
const [isModalOpen, setIsModalOpen] = useState(false); // Initialize the modal state
const [isModalOpen, setIsModalOpen] = useState(false);

// Scroll handler function to scroll horizontally with mouse wheel
const handleScroll = (event: React.WheelEvent<HTMLDivElement>) => {
Expand Down Expand Up @@ -46,16 +46,42 @@ const Found: React.FC = () => {

<section className="mb-10">
<h2 className="text-3xl text-cyan-900 font-bold mb-4">Items</h2>
<div className="grid grid-cols-5 gap-7">
{[...Array(10)].map((_, index) => (
<div key={index} className="flex-shrink-0">
<Card
title="Product name"
location="Location"
time="Time"
/>
</div>
))}
<div className="grid grid-cols-4 gap-6">
<Card
image = "/assets/wallet.jpg"
title="Lost Wallet"
location="Library"
time="14:40"
locationLabel="Found at"
/>
<Card
image ="/assets/earbuds.jpg"
title="Earbuds"
location="Cafeteria"
time="18:30"
locationLabel="Found at"
/>
<Card
image ="/assets/bottle.jpg"
title="Water Bottle"
location="Gym"
time="6:30"
locationLabel="Found at"
/>
<Card
image ="/assets/umbrella.jpg"
title="Umbrella"
location="Park"
time="17:30"
locationLabel="Found at"
/>
<Card
image ="/assets/glasses.jpg"
title="Glasses"
location="Cafe"
time="16:30"
locationLabel="Found at"
/>
</div>
</section>

Expand Down
111 changes: 99 additions & 12 deletions components/landing.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,31 @@
'use client';

import React from 'react';
import React, { useState } from 'react';
import { useRouter } from 'next/navigation';

const LandingPage: React.FC = () => {
const router = useRouter();
const [isLoginModalOpen, setLoginModalOpen] = useState(false);

const handleLoginClick = () => {
router.push('/home');
setLoginModalOpen(true);
};

const closeLoginModal = () => {
setLoginModalOpen(false);
};

const handleLoginSubmit = () => {
router.push('/home');
};

const handleGoogleLogin = () => {
window.location.href = '/api/auth/google';
};

return (
<div className="min-h-screen bg-gradient-to-b from-[#19647E] to-[#4ABDAC] flex flex-col items-center justify-center text-white">

{/* Top Image */}
<div className="mt-8 mb-4">
<img
src="assets/foundit.png"
Expand All @@ -22,7 +34,6 @@ const LandingPage: React.FC = () => {
/>
</div>

{/* Hero Section */}
<div className="flex flex-col items-center mb-12 text-center px-4">
<h1 className="text-5xl font-bold mb-4 animate-fadeIn">Welcome to FoundIt</h1>
<p className="text-lg mb-8 max-w-lg animate-fadeIn">
Expand All @@ -35,18 +46,94 @@ const LandingPage: React.FC = () => {
Login
</button>

<img
src="/assets/plane.png"
alt="Plane Image"
className="w-[800px] h-[800px] object-contain"
/>
</div>

<img
src="/assets/plane.png"
alt="Plane Image"
className="w-[800px] h-[800px] object-contain"
/>
</div>

{/* Footer */}
<footer className="mt-auto p-4 w-full text-center text-sm text-gray-300">
<p>&copy; {new Date().getFullYear()} FoundIt. All rights reserved.</p>
</footer>

{isLoginModalOpen && (
<div className="fixed inset-0 flex items-center justify-center z-50">
<div
className="absolute inset-0 bg-black bg-opacity-50"
onClick={closeLoginModal}
/>

{/* Modal container */}
<div className="w-full max-w-md rounded-lg bg-cyan-700 p-8 shadow-lg relative z-10">
<div className="flex justify-between items-center mb-4">
<h2 className="text-gray-100 text-3xl font-bold">Login</h2>
<button
className="text-white text-xl hover:text-gray-300"
onClick={closeLoginModal}
>
✕
</button>
</div>

<form
onSubmit={(e) => {
e.preventDefault();
handleLoginSubmit();
}}
>
<label htmlFor="email" className="block text-gray-200 text-lg font-semibold mb-2">
Email:
</label>
<input
type="email"
id="email"
className="p-2 mb-4 w-full border border-gray-400 rounded-md text-lg focus:outline-none"
placeholder="Enter your email"
required
/>

<label htmlFor="password" className="block text-gray-200 text-lg font-semibold mb-2">
Password:
</label>
<input
type="password"
id="password"
className="p-2 mb-4 w-full border border-gray-400 rounded-md text-lg focus:outline-none"
placeholder="Enter your password"
required
/>

<button
type="submit"
className="w-full bg-cyan-800 text-white px-4 py-2 rounded-md hover:bg-cyan-900 mt-4"
>
Login
</button>
</form>


<div className="flex items-center justify-center my-6">
<div className="w-1/4 h-px bg-gray-300"></div>
<p className="px-2 text-sm text-gray-200">OR</p>
<div className="w-1/4 h-px bg-gray-300"></div>
</div>

{/* Google Login */}
<button
onClick={handleGoogleLogin}
className="w-full flex items-center justify-center px-4 py-2 bg-white text-[#19647E] rounded-md font-semibold shadow-lg hover:bg-gray-100 transition duration-300"
>
<img
src="/assets/google-icon.png"
alt="Google Icon"
className="w-6 h-6 mr-2"
/>
Login with Google
</button>
</div>
</div>
)}
</div>
);
};
Expand Down
46 changes: 36 additions & 10 deletions components/lost.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,16 +46,42 @@ const Lost: React.FC = () => {

<section className="mb-10">
<h2 className="text-3xl text-cyan-900 font-bold mb-4">Items</h2>
<div className="grid grid-cols-5 gap-7">
{[...Array(10)].map((_, index) => (
<div key={index} className="flex-shrink-0">
<Card
title="Product name"
location="Location"
time="Time"
/>
</div>
))}
<div className="grid grid-cols-4 gap-6">
<Card
image = "/assets/wallet.jpg"
title="Lost Wallet"
location="Library"
time="14:40"
locationLabel="Lost at"
/>
<Card
image ="/assets/earbuds.jpg"
title="Earbuds"
location="Cafeteria"
time="18:30"
locationLabel="Lost at"
/>
<Card
image ="/assets/bottle.jpg"
title="Water Bottle"
location="Gym"
time="6:30"
locationLabel="Lost at"
/>
<Card
image ="/assets/umbrella.jpg"
title="Umbrella"
location="Park"
time="17:30"
locationLabel="Lost at"
/>
<Card
image ="/assets/glasses.jpg"
title="Glasses"
location="Cafe"
time="16:30"
locationLabel="Lost at"
/>
</div>
</section>

Expand Down
Loading

0 comments on commit 3e42f6e

Please sign in to comment.