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.

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

leaflet started #18

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
6 changes: 6 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,17 +21,20 @@
"encoding": "^0.1.13",
"eslint": "8.46.0",
"eslint-config-next": "13.4.13",
"leaflet": "^1.9.4",
"luxon": "^3.4.2",
"next": "13.4.13",
"postcss": "8.4.27",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-leaflet": "^4.2.1",
"supabase": "^1.86.0",
"tailwindcss": "3.3.3",
"typescript": "5.1.6",
"uuid": "^9.0.0"
},
"devDependencies": {
"@types/leaflet": "^1.9.4",
"@types/luxon": "^3.3.1",
"@types/uuid": "^9.0.2"
}
Expand Down
8 changes: 7 additions & 1 deletion src/app/(surfspots)/spots/[spot_id]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,15 @@ import type { Database } from "@/app/lib/database.types";
import Link from "next/link";
import { AddFavoriteIcon, ArrowBackIcon } from "@/app/components/icons/icons";
import AddToFavoriteBtn from "@/app/components/AddToFavoriteBtn";
import dynamic from "next/dynamic";

type SurfSpot = Database["public"]["Tables"]["surfspots"]["Row"];
type FullSpot = (SurfSpot & { hourlySpotForecast: HourlySurfData }) | null;

const PintxoMap = dynamic(() => import("@/app/components/Map"), {
ssr: false,
});

async function getSpotDetails(id: string) {
try {
const supabase = createServerComponentClient({ cookies });
Expand Down Expand Up @@ -52,7 +57,6 @@ export default async function SpotDetails({
const spot = await getSpotDetails(id);
const favorite = await isSpotFavorite(id);
const isFavorite = !!favorite;
console.log("SPOT IS FAVORITE", isFavorite);

return (
<>
Expand All @@ -74,6 +78,8 @@ export default async function SpotDetails({
/>
</div>
</div>

<PintxoMap lat={spot.lat} long={spot.long} />
</main>
)}
</>
Expand Down
28 changes: 28 additions & 0 deletions src/app/components/Map.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
"use client";
import { MapContainer, TileLayer, Marker } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import { useMap } from "react-leaflet";

function Map({ lat, long }) {
console.log(lat, long);
return (
<>
<div className="w-72 h-72">
<MapContainer
center={[lat, long]}
zoom={13}
scrollWheelZoom={true}
className="w-full h-full"
>
<TileLayer
attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{lat && long && <Marker position={[lat, long]} />}
</MapContainer>
</div>
</>
);
}

export default Map;
27 changes: 15 additions & 12 deletions src/app/components/SpotDetails.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
getCurrentWind,
} from "../utils/surfUtils";
import { Database } from "../lib/database.types";
import { WaveHeightIcon, WindIcon } from "./icons/icons";
import { PeriodIcon, WaveHeightIcon, WindIcon } from "./icons/icons";
type PintxoConditions = Database["public"]["Tables"]["spot_conditions"]["Row"];
type PintxoName =
| "Empty Plate"
Expand Down Expand Up @@ -75,10 +75,10 @@ export default async function SpotDetails({
}

return (
<div className="flex flex-col justify-start p-4 bg-dark rounded-md shadow-md">
<div className="flex flex-row justify-between gap-4">
<div className="flex flex-col justify-start gap-4">
<span className="text-light font-body font-regular text-lg">
<div className="flex flex-col justify-start bg-dark rounded-md shadow-md">
<div className="flex flex-row justify-between gap-4 ">
<div className="flex flex-col justify-start gap-4 p-4">
<span className="text-light font-body font-regular text-xl">
{spot?.name?.slice(0, 21) ?? ""}
</span>
<div className="flex flex-row gap-1 justify-start w-54">
Expand All @@ -93,19 +93,22 @@ export default async function SpotDetails({
</div>
</div>

<div className="flex flex-col justify-between gap-0 items-end">
<div className="flex flex-row gap-4 align-start">
<div className="flex flex-col gap-1 items-start justify-around bg-light/5 opacity-50 p-4 rounded-md">
<div className="flex flex-row gap-2 justify-between w-full ">
<WaveHeightIcon size={24} color="text-light" />
<span className="text-light font-body font-regular text-2xl">
{getCurrentWaveHeightForSpot(spot) || null} {"m"}
</span>
</div>
<div className="flex flex-row gap-2 items-center justify-between w-full">
<PeriodIcon size={24} color="text-light/50" />
<span className="text-light font-body font-light text-lg justify-between">
{getCurrentPeriodForSpot(spot) || null}{" "}
<span className="text-xs">sec</span>
</span>
</div>

<span className="text-light font-body font-light text-lg">
{getCurrentPeriodForSpot(spot) || null}{" "}
<span className="text-xs">sec</span>
</span>
<div className="flex flex-row gap-4 items-center">
<div className="flex flex-row gap-2 items-center justify-between w-full">
<WindIcon size={24} color="text-light/50" />
<span className="text-light font-body text-sm font-thin">
{getCurrentWind(spot) || null}
Expand Down
19 changes: 19 additions & 0 deletions src/app/components/icons/icons.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -199,3 +199,22 @@ export function FallinTideIcon({ size, color }: IconProps) {
</svg>
);
}

export function PeriodIcon({ size, color }: IconProps) {
return (
<svg
width={size}
height={size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
className={color}
>
<path
fill="currentColor"
fill-rule="evenodd"
d="M9.25 2a.75.75 0 0 1 .75-.75h4a.75.75 0 0 1 0 1.5h-4A.75.75 0 0 1 9.25 2ZM12 4.75a8.25 8.25 0 1 0 0 16.5a8.25 8.25 0 0 0 0-16.5ZM2.25 13c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75s-4.365 9.75-9.75 9.75S2.25 18.385 2.25 13ZM12 8.25a.75.75 0 0 1 .75.75v4a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Z"
clip-rule="evenodd"
/>
</svg>
);
}
Loading