soconnor/lewisburg-coffee
1
0
Fork 0
mirror of https://github.com/soconnor0919/lewisburg-coffee.git synced 2026-02-05 08:06:32 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: Introduce map components, navigation, and a shop detail drawer with updated dependencies and global styling.

Browse Source
This commit is contained in:
Sean O'Connor
2025-12-04 23:10:50 -05:00
parent 03ed3d0213
commit de95255a1d
12 changed files with 6238 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/layout.tsx
View File

@@ -1,26 +1,26 @@
import "~/styles/globals.css";
import { type Metadata } from "next";
import { Geist } from "next/font/google";
import { Lora } from "next/font/google";
import { TRPCReactProvider } from "~/trpc/react";
export const metadata: Metadata = {
title: "Create T3 App",
description: "Generated by create-t3-app",
title: "Lewisburg Coffee Map",
description: "A guide to coffee in Lewisburg, PA",
icons: [{ rel: "icon", url: "/favicon.ico" }],
};
const geist = Geist({
const lora = Lora({
subsets: ["latin"],
variable: "--font-geist-sans",
variable: "--font-lora",
});
export default function RootLayout({
children,
}: Readonly<{ children: React.ReactNode }>) {
return (
<html lang="en" className={`${geist.variable}`}>
<html lang="en" className={`${lora.variable}`}>
<body>
<TRPCReactProvider>{children}</TRPCReactProvider>
</body>

74
src/app/page.tsx
View File

@@ -1,52 +1,44 @@
import Link from "next/link";
"use client";
import { LatestPost } from "~/app/_components/post";
import { api, HydrateClient } from "~/trpc/server";
import { useState } from "react";
import { HydrateClient } from "~/trpc/server";
import MapLoader from "~/components/MapLoader";
import Navbar from "~/components/Navbar";
import Drawer from "~/components/Drawer";
export default async function Home() {
const hello = await api.post.hello({ text: "from tRPC" });
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 },
];
void api.post.getLatest.prefetch();
export default function Home() {
const [selectedShop, setSelectedShop] = useState<typeof COFFEE_SHOPS[0] | null>(null);
return (
<HydrateClient>
<main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white">
<div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
<h1 className="text-5xl font-extrabold tracking-tight sm:text-[5rem]">
Create <span className="text-[hsl(280,100%,70%)]">T3</span> App
</h1>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-8">
<Link
className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 hover:bg-white/20"
href="https://create.t3.gg/en/usage/first-steps"
target="_blank"
>
<h3 className="text-2xl font-bold">First Steps →</h3>
<div className="text-lg">
Just the basics - Everything you need to know to set up your
database and authentication.
</div>
</Link>
<Link
className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 hover:bg-white/20"
href="https://create.t3.gg/en/introduction"
target="_blank"
>
<h3 className="text-2xl font-bold">Documentation →</h3>
<div className="text-lg">
Learn more about Create T3 App, the libraries it uses, and how
to deploy it.
</div>
</Link>
</div>
<div className="flex flex-col items-center gap-2">
<p className="text-2xl text-white">
{hello ? hello.greeting : "Loading tRPC query..."}
</p>
</div>
<main className="relative h-screen w-screen overflow-hidden bg-black text-white font-serif">
<Navbar />
<LatestPost />
{/* Map Background */}
<div className="absolute inset-0 z-0">
<MapLoader
shops={COFFEE_SHOPS}
onShopSelect={(shop) => setSelectedShop(shop)}
/>
</div>
{/* Right Drawer */}
<Drawer
shop={selectedShop}
onClose={() => setSelectedShop(null)}
/>
</main>
</HydrateClient>
);

82
src/components/Drawer.tsx Normal file
View File

@@ -0,0 +1,82 @@
import { X, MapPin, Coffee } from "lucide-react";
interface CoffeeShop {
id: number;
name: string;
description: string;
lat: number;
lng: number;
}
interface DrawerProps {
shop: CoffeeShop | null;
onClose: () => void;
}
export default function Drawer({ shop, onClose }: DrawerProps) {
return (
<div
className={`absolute top-0 right-0 h-full w-full sm:w-[400px] bg-black/90 backdrop-blur-xl border-l border-white/10 z-30 transform transition-transform duration-300 ease-in-out shadow-2xl ${shop ? "translate-x-0" : "translate-x-full"
}`}
>
{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" />
<button
onClick={onClose}
className="absolute top-4 right-4 p-2 bg-black/50 rounded-full hover:bg-black/70 transition-colors"
>
<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>
<div className="space-y-6">
<div>
<h3 className="text-lg font-semibold mb-2 text-gray-200">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>
{/* Footer Actions */}
<div className="p-6 border-t border-white/10 bg-black/40">
<a
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"
>
Get Directions
</a>
</div>
</div>
)}
</div>
);
}

72
src/components/Map.tsx Normal file
View File

@@ -0,0 +1,72 @@
"use client";
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';
import { useEffect } from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import { Coffee } from 'lucide-react';
interface CoffeeShop {
id: number;
name: string;
description: string;
lat: number;
lng: number;
}
interface MapProps {
shops: CoffeeShop[];
onShopSelect: (shop: CoffeeShop) => void;
}
const Map = ({ shops, onShopSelect }: MapProps) => {
useEffect(() => {
// No longer need default icon fix as we are using custom icons
}, []);
const createCustomIcon = () => {
const iconMarkup = renderToStaticMarkup(
<div className="relative flex items-center justify-center w-8 h-8 bg-[#8B4513] rounded-full border-2 border-white shadow-lg transform -translate-x-1/2 -translate-y-1/2 cursor-pointer hover:scale-110 transition-transform">
<Coffee className="w-5 h-5 text-white" />
<div className="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-l-transparent border-r-4 border-r-transparent border-t-4 border-t-[#8B4513]"></div>
</div>
);
return L.divIcon({
html: iconMarkup,
className: 'custom-marker', // Add a class for potential extra styling
iconSize: [32, 32],
iconAnchor: [16, 32], // Anchor at bottom center
popupAnchor: [0, -32],
});
};
const customIcon = createCustomIcon();
return (
<MapContainer
center={[40.9645, -76.8844]}
zoom={15}
style={{ height: '100%', width: '100%' }}
className="z-0"
>
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
url="https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png"
/>
{shops.map((shop) => (
<Marker
key={shop.id}
position={[shop.lat, shop.lng]}
icon={customIcon}
eventHandlers={{
click: () => onShopSelect(shop),
}}
/>
))}
</MapContainer>
);
};
export default Map;

12
src/components/MapLoader.tsx Normal file
View File

@@ -0,0 +1,12 @@
"use client";
import dynamic from "next/dynamic";
const Map = dynamic(() => import("./Map"), {
ssr: false,
loading: () => <div className="w-full h-full bg-gray-100 animate-pulse flex items-center justify-center text-gray-400">Loading Map...</div>
});
export default function MapLoader({ shops, onShopSelect }: { shops: any[], onShopSelect: (shop: any) => void }) {
return <Map shops={shops} onShopSelect={onShopSelect} />;
}

20
src/components/Navbar.tsx Normal file
View File

@@ -0,0 +1,20 @@
import Link from "next/link";
import { Coffee } from "lucide-react";
export default function Navbar() {
return (
<nav className="absolute top-0 left-0 right-0 z-20 flex items-center justify-between px-6 py-4 bg-black/40 backdrop-blur-md border-b border-white/10">
<div className="flex items-center gap-3">
<div className="flex items-center justify-center w-10 h-10 bg-[#8B4513] rounded-full shadow-lg">
<Coffee className="w-6 h-6 text-white" />
</div>
<h1 className="text-2xl font-bold text-white font-serif tracking-wide">
Lewisburg Coffee Map
</h1>
</div>
<div className="flex gap-4">
{/* Placeholder for future links or actions */}
</div>
</nav>
);
}

6
src/lib/utils.ts Normal file
View File

@@ -0,0 +1,6 @@
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}

119
src/styles/globals.css
View File

@@ -1,6 +1,125 @@
@import "tailwindcss";
@import "tw-animate-css";
@custom-variant dark (&:is(.dark *));
@theme {
--font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
@theme inline {
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
}
:root {
--radius: 0.625rem;
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
}
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0);
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
}
}