mirror of
https://github.com/soconnor0919/lewisburg-coffee.git
synced 2026-02-04 23:56:32 -05:00
feat: Implement detailed coffee shop profiles with address, phone, website, and image, displayed in an updated drawer component.
This commit is contained in:
108
src/app/page.tsx
108
src/app/page.tsx
@@ -6,15 +6,105 @@ import Navbar from "~/components/Navbar";
|
||||
import Drawer from "~/components/Drawer";
|
||||
|
||||
const COFFEE_SHOPS = [
|
||||
{ id: 1, name: "Amami Kitchen", description: "Italian espresso & fresh food.", lat: 40.9547, lng: -76.8841 },
|
||||
{ id: 2, name: "Culture Coffee", description: "Specialty brews & matcha.", lat: 40.9660, lng: -76.8820 },
|
||||
{ id: 3, name: "Bucknell 7th St Cafe", description: "Campus favorite.", lat: 40.9547, lng: -76.8837 },
|
||||
{ id: 4, name: "Tastecraft Cafe", description: "Roastery & French macarons.", lat: 40.9635, lng: -76.8885 },
|
||||
{ id: 5, name: "Paris Bakery", description: "Authentic pastries & coffee.", lat: 40.9645, lng: -76.8845 },
|
||||
{ id: 6, name: "CycleUp Coffee", description: "Cycling themed cafe.", lat: 40.9640, lng: -76.8860 },
|
||||
{ id: 7, name: "Cornerstone Kitchen", description: "Fresh eats at Miller Center.", lat: 40.9610, lng: -76.8970 },
|
||||
{ id: 8, name: "Gram's Eatery", description: "Homestyle breakfast & coffee.", lat: 40.9642, lng: -76.8837 },
|
||||
{ id: 9, name: "DC Coffee", description: "Gourmet coffee & atmosphere.", lat: 40.9650, lng: -76.8825 },
|
||||
{
|
||||
id: 1,
|
||||
name: "Amami Kitchen",
|
||||
description: "A beloved culinary spot offering a blend of high-quality Italian espresso and American coffee bar options, alongside mouthwatering baked goods and paninis.",
|
||||
lat: 40.9547,
|
||||
lng: -76.8841,
|
||||
address: "103 S 6th St, Lewisburg, PA 17837",
|
||||
phone: "(570) 490-7857",
|
||||
website: "https://www.amamiespresso.com",
|
||||
image: "https://images.unsplash.com/photo-1554118811-1e0d58224f24?q=80&w=1000&auto=format&fit=crop"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Culture Coffee",
|
||||
description: "A modern coffee shop focusing on unique brewing methods for specialty coffee and traditional techniques for matcha. Known for its 'Red Velvet Latte' and croissants.",
|
||||
lat: 40.9660,
|
||||
lng: -76.8820,
|
||||
address: "216 St. John St, Lewisburg, PA 17837",
|
||||
phone: "(570) 601-7903",
|
||||
website: "https://www.instagram.com/culturecoffeee_",
|
||||
image: "https://images.unsplash.com/photo-1509042239860-f550ce710b93?q=80&w=1000&auto=format&fit=crop"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Bucknell 7th St Cafe",
|
||||
description: "Bucknell's ultimate on-campus dessert and coffee shop. A cozy spot for students and visitors to enjoy milkshakes, ice cream, and specialty espresso drinks.",
|
||||
lat: 40.9547,
|
||||
lng: -76.8837,
|
||||
address: "420 S 7th St, Lewisburg, PA 17837",
|
||||
phone: "(570) 577-1240",
|
||||
website: "https://www.bucknell.edu/life-bucknell/dining-services/places-eat",
|
||||
image: "https://images.unsplash.com/photo-1559925393-8be0ec4767c8?q=80&w=1000&auto=format&fit=crop"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Tastecraft Cafe",
|
||||
description: "Downtown cafe known for its in-house roasted coffee and over 20 flavors of French macarons. A perfect spot to relax with a fresh brew and a sweet treat.",
|
||||
lat: 40.9635,
|
||||
lng: -76.8885,
|
||||
address: "512 Market St, Lewisburg, PA 17837",
|
||||
phone: "(570) 768-5340",
|
||||
website: "https://www.tastecraftcafe.com",
|
||||
image: "https://images.unsplash.com/photo-1556742049-0cfed4f7a07d?q=80&w=1000&auto=format&fit=crop"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "Paris Bakery",
|
||||
description: "Authentic French bakery offering legendary croissants, pain au chocolat, and artisanal breads. Experience a taste of France in the heart of Lewisburg.",
|
||||
lat: 40.9645,
|
||||
lng: -76.8845,
|
||||
address: "335 Market St, Lewisburg, PA 17837",
|
||||
phone: "(570) 884-2138",
|
||||
website: "https://parisbakery.cafe",
|
||||
image: "https://images.unsplash.com/photo-1509440159596-0249088772ff?q=80&w=1000&auto=format&fit=crop"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "CycleUp Coffee",
|
||||
description: "A unique bike shop cafe serving as a community hub. Enjoy coffee, light bites, and bike services in a cozy, cycling-themed atmosphere.",
|
||||
lat: 40.9640,
|
||||
lng: -76.8860,
|
||||
address: "429 Market St, Lewisburg, PA 17837",
|
||||
phone: "(570) 413-1705",
|
||||
website: "https://www.cycleupcafe.com",
|
||||
image: "https://images.unsplash.com/photo-1521017432531-fbd92d768814?q=80&w=1000&auto=format&fit=crop"
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: "Cornerstone Kitchen",
|
||||
description: "Located in the Miller Center, offering fresh, healthy, and delicious cafe food. A place to connect over real food and a shared table.",
|
||||
lat: 40.9610,
|
||||
lng: -76.8970,
|
||||
address: "120 Hardwood Dr, Lewisburg, PA 17837",
|
||||
phone: "(570) 556-4191",
|
||||
website: "https://millercenterlewisburg.com/cornerstone-kitchen",
|
||||
image: "https://images.unsplash.com/photo-1498837167922-ddd27525d352?q=80&w=1000&auto=format&fit=crop"
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: "Gram's Eatery",
|
||||
description: "A local favorite for homestyle breakfast and brunch. Known for generous portions, locally sourced ingredients, and a welcoming atmosphere.",
|
||||
lat: 40.9642,
|
||||
lng: -76.8837,
|
||||
address: "21 N 3rd St, Lewisburg, PA 17837",
|
||||
phone: "(570) 522-0230",
|
||||
website: "https://www.facebook.com/gramseaterylewisburg",
|
||||
image: "https://images.unsplash.com/photo-1533777857889-4be7c70b33f7?q=80&w=1000&auto=format&fit=crop"
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
name: "DC Coffee",
|
||||
description: "Charming cafe offering gourmet coffee, lattes, and a full breakfast and lunch menu. A cozy spot with a friendly, hometown feel.",
|
||||
lat: 40.9650,
|
||||
lng: -76.8825,
|
||||
address: "235 Market St, Lewisburg, PA 17837",
|
||||
phone: "(570) 966-6400",
|
||||
website: "https://dccoffeeandteacafe.com",
|
||||
image: "https://images.unsplash.com/photo-1497935586351-b67a49e012bf?q=80&w=1000&auto=format&fit=crop"
|
||||
},
|
||||
];
|
||||
|
||||
export default function Home() {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { X, MapPin, Coffee } from "lucide-react";
|
||||
import { X, MapPin, Coffee, Phone, Globe, ExternalLink } from "lucide-react";
|
||||
|
||||
interface CoffeeShop {
|
||||
id: number;
|
||||
@@ -6,6 +6,10 @@ interface CoffeeShop {
|
||||
description: string;
|
||||
lat: number;
|
||||
lng: number;
|
||||
address: string;
|
||||
phone: string;
|
||||
website: string;
|
||||
image: string;
|
||||
}
|
||||
|
||||
interface DrawerProps {
|
||||
@@ -21,46 +25,54 @@ export default function Drawer({ shop, onClose }: DrawerProps) {
|
||||
>
|
||||
{shop && (
|
||||
<div className="flex flex-col h-full text-white">
|
||||
{/* Header Image Placeholder */}
|
||||
<div className="h-64 bg-gradient-to-br from-[#8B4513] to-black relative flex items-center justify-center">
|
||||
<Coffee className="w-24 h-24 text-white/20" />
|
||||
{/* Header Image */}
|
||||
<div className="h-64 relative">
|
||||
<img
|
||||
src={shop.image}
|
||||
alt={shop.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/90 to-transparent" />
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="absolute top-4 right-4 p-2 bg-black/50 rounded-full hover:bg-black/70 transition-colors"
|
||||
className="absolute top-4 right-4 p-2 bg-black/50 rounded-full hover:bg-black/70 transition-colors backdrop-blur-md"
|
||||
>
|
||||
<X className="w-6 h-6 text-white" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-8 flex-1 overflow-y-auto">
|
||||
<h2 className="text-4xl font-bold font-serif mb-2 text-[#D2691E]">{shop.name}</h2>
|
||||
<div className="flex items-center gap-2 text-gray-400 mb-6 font-sans text-sm">
|
||||
<MapPin className="w-4 h-4" />
|
||||
<span>{shop.lat.toFixed(4)}, {shop.lng.toFixed(4)}</span>
|
||||
<div className="p-8 flex-1 overflow-y-auto -mt-12 relative z-10">
|
||||
<h2 className="text-4xl font-bold font-serif mb-4 text-[#D2691E] leading-tight">{shop.name}</h2>
|
||||
|
||||
<div className="space-y-4 mb-8">
|
||||
<div className="flex items-start gap-3 text-gray-300 font-sans text-sm">
|
||||
<MapPin className="w-5 h-5 text-[#8B4513] flex-shrink-0 mt-0.5" />
|
||||
<span>{shop.address}</span>
|
||||
</div>
|
||||
{shop.phone && (
|
||||
<div className="flex items-center gap-3 text-gray-300 font-sans text-sm">
|
||||
<Phone className="w-5 h-5 text-[#8B4513] flex-shrink-0" />
|
||||
<a href={`tel:${shop.phone}`} className="hover:text-white transition-colors">{shop.phone}</a>
|
||||
</div>
|
||||
)}
|
||||
{shop.website && (
|
||||
<div className="flex items-center gap-3 text-gray-300 font-sans text-sm">
|
||||
<Globe className="w-5 h-5 text-[#8B4513] flex-shrink-0" />
|
||||
<a href={shop.website} target="_blank" rel="noopener noreferrer" className="hover:text-white transition-colors flex items-center gap-1">
|
||||
Visit Website <ExternalLink className="w-3 h-3" />
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-2 text-gray-200">About</h3>
|
||||
<h3 className="text-lg font-semibold mb-2 text-gray-200 font-serif">About</h3>
|
||||
<p className="text-gray-300 leading-relaxed font-serif text-lg">
|
||||
{shop.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Placeholder for more details */}
|
||||
<div className="pt-6 border-t border-white/10">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="bg-white/5 p-4 rounded-lg text-center">
|
||||
<span className="block text-2xl mb-1">☕</span>
|
||||
<span className="text-xs text-gray-400 uppercase tracking-wider">Coffee</span>
|
||||
</div>
|
||||
<div className="bg-white/5 p-4 rounded-lg text-center">
|
||||
<span className="block text-2xl mb-1">🥐</span>
|
||||
<span className="text-xs text-gray-400 uppercase tracking-wider">Pastries</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -70,7 +82,7 @@ export default function Drawer({ shop, onClose }: DrawerProps) {
|
||||
href={`https://www.google.com/maps/search/?api=1&query=${shop.lat},${shop.lng}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center justify-center w-full py-4 bg-[#8B4513] hover:bg-[#A0522D] text-white font-bold rounded-xl transition-colors"
|
||||
className="flex items-center justify-center w-full py-4 bg-[#8B4513] hover:bg-[#A0522D] text-white font-bold rounded-xl transition-colors shadow-lg"
|
||||
>
|
||||
Get Directions
|
||||
</a>
|
||||
|
||||
@@ -13,6 +13,10 @@ interface CoffeeShop {
|
||||
description: string;
|
||||
lat: number;
|
||||
lng: number;
|
||||
address: string;
|
||||
phone: string;
|
||||
website: string;
|
||||
image: string;
|
||||
}
|
||||
|
||||
interface MapProps {
|
||||
|
||||
@@ -13,6 +13,10 @@ interface CoffeeShop {
|
||||
description: string;
|
||||
lat: number;
|
||||
lng: number;
|
||||
address: string;
|
||||
phone: string;
|
||||
website: string;
|
||||
image: string;
|
||||
}
|
||||
|
||||
interface MapLoaderProps {
|
||||
|
||||
Reference in New Issue
Block a user