4 |
6 | );
7 | };
8 |
9 | export default AuthLayout;
10 |
--------------------------------------------------------------------------------
/src/constants.ts:
--------------------------------------------------------------------------------
1 | export const DEFAULT_PAGE = 1;
2 | export const DEFAULT_PAGE_SIZE = 10;
3 | export const MIN_PAGE_SIZE = 1;
4 | export const MAX_PAGE_SIZE = 100;
5 |
6 | // Upload image limit is 20MB
7 | export const IMAGE_SIZE_LIMIT = 50 * 1024 * 1024;
8 |
9 | // Upload default folder
10 | export const DEFAULT_PHOTOS_UPLOAD_FOLDER = "photos";
11 |
--------------------------------------------------------------------------------
/src/modules/posts/types.ts:
--------------------------------------------------------------------------------
1 | import { inferRouterOutputs } from "@trpc/server";
2 | import type { appRouter } from "@/trpc/routers/_app";
3 |
4 | export type PostGetOne = inferRouterOutputs<
5 | typeof appRouter
6 | >["posts"]["getOne"];
7 |
8 | export type PostGetMany = inferRouterOutputs<
9 | typeof appRouter
10 | >["posts"]["getMany"]["items"];
11 |
--------------------------------------------------------------------------------
/src/components/ui/aspect-ratio.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
4 |
5 | function AspectRatio({
6 | ...props
7 | }: React.ComponentProps{children}
5 | {children}
;
9 | };
10 |
11 | export default CardContainer;
12 |
--------------------------------------------------------------------------------
/src/modules/auth/lib/get-session.ts:
--------------------------------------------------------------------------------
1 | import { cache } from "react";
2 | import { auth } from "./auth";
3 | import { headers } from "next/headers";
4 |
5 | export const getSession = cache(async () => {
6 | return await auth.api.getSession({
7 | headers: await headers(),
8 | });
9 | });
10 |
11 | export const getActiveSessions = cache(async () => {
12 | return await auth.api.listSessions({
13 | headers: await headers(),
14 | });
15 | });
16 |
--------------------------------------------------------------------------------
/src/modules/posts/hooks/use-posts-filters.ts:
--------------------------------------------------------------------------------
1 | import { DEFAULT_PAGE } from "@/constants";
2 | import { parseAsInteger, parseAsString, useQueryStates } from "nuqs";
3 |
4 | export const usePostsFilters = () => {
5 | return useQueryStates({
6 | search: parseAsString.withDefault("").withOptions({ clearOnDefault: true }),
7 | page: parseAsInteger
8 | .withDefault(DEFAULT_PAGE)
9 | .withOptions({ clearOnDefault: true }),
10 | });
11 | };
12 |
--------------------------------------------------------------------------------
/src/modules/home/ui/components/header/logo.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import WordRotate from "../word-rotate";
3 | import { RiCameraLensFill } from "react-icons/ri";
4 |
5 | const Logo = () => {
6 | return (
7 |
8 |
12 |
14 | );
15 | };
16 |
--------------------------------------------------------------------------------
/src/modules/s3/lib/server-client.ts:
--------------------------------------------------------------------------------
1 | import { S3Client } from "@aws-sdk/client-s3";
2 |
3 | /**
4 | * Server-side S3 client initialization.
5 | * This client is used for backend operations like generating presigned URLs and deleting files.
6 | * It uses the AWS SDK v3.
7 | */
8 | export const s3Client = new S3Client({
9 | region: "auto",
10 | endpoint: process.env.S3_ENDPOINT,
11 | credentials: {
12 | accessKeyId: process.env.S3_ACCESS_KEY_ID!,
13 | secretAccessKey: process.env.S3_SECRET_ACCESS_KEY!,
14 | },
15 | });
16 |
--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
1 | # Database
2 | DATABASE_URL=
3 |
4 | # Better Auth
5 | BETTER_AUTH_SECRET=
6 | BETTER_AUTH_URL=http://localhost:3000 #Base URL of your app
7 |
8 | # Next.js
9 | NEXT_PUBLIC_APP_URL='http://localhost:3000'
10 |
11 | # S3
12 | S3_ENDPOINT=
13 | S3_BUCKET_NAME=
14 | S3_PUBLIC_URL=
15 | S3_ACCESS_KEY_ID=
16 | S3_SECRET_ACCESS_KEY=
17 | NEXT_PUBLIC_S3_PUBLIC_URL=
18 |
19 | # Mapbox access token
20 | NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN=
21 |
22 | # Seed admin user
23 | SEED_USER_EMAIL=
24 | SEED_USER_PASSWORD=
25 | SEED_USER_NAME=
26 |
--------------------------------------------------------------------------------
/src/modules/auth/lib/auth.ts:
--------------------------------------------------------------------------------
1 | import { betterAuth } from "better-auth";
2 | import { drizzleAdapter } from "better-auth/adapters/drizzle";
3 |
4 | import { db } from "@/db";
5 | import * as schema from "@/db/schema";
6 | import { nextCookies } from "better-auth/next-js";
7 |
8 | export const auth = betterAuth({
9 | database: drizzleAdapter(db, {
10 | provider: "pg",
11 | schema: {
12 | ...schema,
13 | },
14 | }),
15 | emailAndPassword: {
16 | enabled: true,
17 | },
18 |
19 | plugins: [nextCookies()],
20 | });
21 |
--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
1 | import { defineConfig, globalIgnores } from "eslint/config";
2 | import nextVitals from "eslint-config-next/core-web-vitals";
3 | import nextTs from "eslint-config-next/typescript";
4 |
5 | const eslintConfig = defineConfig([
6 | ...nextVitals,
7 | ...nextTs,
8 | // Override default ignores of eslint-config-next.
9 | globalIgnores([
10 | // Default ignores of eslint-config-next:
11 | ".next/**",
12 | "out/**",
13 | "build/**",
14 | "next-env.d.ts",
15 | ]),
16 | ]);
17 |
18 | export default eslintConfig;
19 |
--------------------------------------------------------------------------------
/src/modules/posts/lib/utils.ts:
--------------------------------------------------------------------------------
1 | // Generate slug from title (supports Unicode)
2 | export const generateSlug = (text: string) => {
3 | return text
4 | .toString()
5 | .toLowerCase()
6 | .trim()
7 | .replace(/\s+/g, "-") // Replace spaces with -
8 | .replace(/&/g, "-and-") // Replace & with 'and'
9 | .replace(/[^\p{L}\p{N}\-]+/gu, "") // Keep Unicode letters, numbers, hyphens
10 | .replace(/\-\-+/g, "-") // Replace multiple - with single -
11 | .replace(/^-+/, "") // Trim - from start of text
12 | .replace(/-+$/, ""); // Trim - from end of text
13 | };
14 |
--------------------------------------------------------------------------------
/src/db/index.ts:
--------------------------------------------------------------------------------
1 | import * as schema from "./schema";
2 | import { neon } from "@neondatabase/serverless";
3 | import { drizzle as drizzleNeon } from "drizzle-orm/neon-http";
4 | import { drizzle as drizzlePg } from "drizzle-orm/node-postgres";
5 | import pg from "pg";
6 |
7 | const isLocal = process.env.DATABASE_PROVIDER === "local";
8 |
9 | // Use 'pg' for local/docker development and 'neon-http' for serverless/production
10 | export const db = isLocal
11 | ? drizzlePg(new pg.Pool({ connectionString: process.env.DATABASE_URL! }), {
12 | schema,
13 | })
14 | : drizzleNeon(neon(process.env.DATABASE_URL!), { schema });
15 |
--------------------------------------------------------------------------------
/src/modules/photos/ui/components/create-photo-modal.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { ResponsiveModal } from "@/components/responsive-modal";
4 | import MultiStepForm from "./multi-step-form";
5 | import { useModal } from "@/hooks/use-modal";
6 |
7 | const CreatePhotoModal = () => {
8 | const { isOpen, onClose } = useModal();
9 |
10 | return (
11 |
6 |
15 | Travel
7 |
8 |
14 | 9 | Exploring the world one step at a time, capturing life through street 10 | photography and city walks. From bustling urban corners to hidden 11 | alleyways, every journey tells a unique story through the lens. 12 |
13 |
10 | setFilters({ search: e.target.value })}
15 | />
16 |
18 | );
19 | };
20 |
--------------------------------------------------------------------------------
/src/modules/photos/ui/components/photos-search-filter.tsx:
--------------------------------------------------------------------------------
1 | import { Input } from "@/components/ui/input";
2 | import { usePhotosFilters } from "../../hooks/use-photos-filters";
3 | import { SearchIcon } from "lucide-react";
4 |
5 | export const PhotosSearchFilter = () => {
6 | const [filters, setFilters] = usePhotosFilters();
7 |
8 | return (
9 |
10 | setFilters({ search: e.target.value })}
15 | />
16 |
18 | );
19 | };
20 |
--------------------------------------------------------------------------------
/src/proxy.ts:
--------------------------------------------------------------------------------
1 | import { headers } from "next/headers";
2 | import { auth } from "./modules/auth/lib/auth";
3 | import { NextResponse } from "next/server";
4 | import type { NextRequest } from "next/server";
5 |
6 | // This function can be marked `async` if using `await` inside
7 | export async function proxy(request: NextRequest) {
8 | const session = await auth.api.getSession({
9 | headers: await headers(),
10 | });
11 |
12 | if (!session) {
13 | return NextResponse.redirect(new URL("/sign-in", request.url));
14 | }
15 |
16 | return NextResponse.next();
17 | }
18 |
19 | // See "Matching Paths" below to learn more
20 | export const config = {
21 | matcher: ["/dashboard", "/dashboard/:path*"],
22 | };
23 |
--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
1 | FROM oven/bun:1 AS base
2 |
3 | # Install dependencies
4 | FROM base AS deps
5 | WORKDIR /app
6 | COPY package.json bun.lock ./
7 | RUN bun install
8 |
9 | # Runner stage
10 | FROM base AS runner
11 | WORKDIR /app
12 |
13 | # Copy dependencies
14 | COPY --from=deps /app/node_modules ./node_modules
15 |
16 | # Copy source code
17 | COPY . .
18 |
19 | # Environment setup
20 | ENV NODE_ENV=production
21 | ENV NEXT_TELEMETRY_DISABLED=1
22 | ENV PORT=3000
23 |
24 | EXPOSE 3000
25 |
26 | # We don't run the server here by default in this strategy,
27 | # because we want to allow the command to be overridden by docker-compose
28 | # to perform "build && start".
29 | # However, providing a default CMD is good practice.
30 | CMD ["bun", "start"]
--------------------------------------------------------------------------------
/src/modules/home/ui/components/header/navbar.tsx:
--------------------------------------------------------------------------------
1 | import Logo from "./logo";
2 | import FlipLink from "@/components/flip-link";
3 | import { ThemeSwitch } from "@/components/theme-toggle";
4 |
5 | const Navbar = () => {
6 | return (
7 |
19 | );
20 | };
21 |
22 | export default Navbar;
23 |
--------------------------------------------------------------------------------
/src/modules/posts/ui/components/dashboard-post-view-header.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button";
2 |
3 | interface DashboardPostViewHeaderProps {
4 | title: string;
5 | onRemove: () => void;
6 | onSave: () => void;
7 | }
8 |
9 | export const DashboardPostViewHeader = ({
10 | title,
11 | onRemove,
12 | onSave,
13 | }: DashboardPostViewHeaderProps) => {
14 | return (
15 |
16 |
24 | );
25 | };
26 |
--------------------------------------------------------------------------------
/src/modules/dashboard/ui/components/dashboard-sidebar/icon-map.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | IconLayoutDashboard,
3 | IconPhoto,
4 | IconUser,
5 | IconBuildingPavilion,
6 | IconNotebook,
7 | } from "@tabler/icons-react";
8 |
9 | interface IconMapProps {
10 | icon: string;
11 | }
12 |
13 | const IconMap = ({ icon }: IconMapProps) => {
14 | switch (icon) {
15 | case "dashboard":
16 | return {title}
17 |
18 |
21 |
22 |
23 |
7 |
20 |
8 |
11 |
12 | Camera
9 |& Camera Lenses
10 |
13 |
19 | 14 | I have a passion for photography and camera lenses. I use a variety 15 | of lenses to capture the beauty of nature and people in their 16 | different moments. 17 |
18 |
11 |
23 | );
24 |
--------------------------------------------------------------------------------
/src/modules/photos/ui/components/multi-step-form/components/progress-bar.tsx:
--------------------------------------------------------------------------------
1 | import { Progress } from "@/components/ui/progress";
2 |
3 | interface ProgressBarProps {
4 | currentStep: number;
5 | totalSteps: number;
6 | }
7 |
8 | export function ProgressBar({ currentStep, totalSteps }: ProgressBarProps) {
9 | const progress = ((currentStep + 1) / totalSteps) * 100;
10 |
11 | return (
12 |
20 |
22 | {photo.title}
21 |
13 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/src/lib/cloudflare-image-loader.ts:
--------------------------------------------------------------------------------
1 | const S3_PUBLIC_URL = process.env.NEXT_PUBLIC_S3_PUBLIC_URL || "";
2 |
3 | const normalizeSrc = (src: string) => {
4 | return src.startsWith("/") ? src.slice(1) : src;
5 | };
6 |
7 | export default function cloudflareLoader({
8 | src,
9 | width,
10 | quality,
11 | }: {
12 | src: string;
13 | width: number;
14 | quality?: number;
15 | }) {
16 | if (src.startsWith("/")) {
17 | return src;
18 | }
19 | // if (process.env.NODE_ENV === "development") {
20 | // return src;
21 | // }
22 | const params = [`width=${width}`];
23 | if (quality) {
24 | params.push(`quality=${quality}`);
25 | }
26 | const paramsString = params.join(",");
27 |
28 | return `${S3_PUBLIC_URL}/cdn-cgi/image/${paramsString}/${normalizeSrc(src)}`;
29 | }
30 |
--------------------------------------------------------------------------------
/public/Lumix_logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
6 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2017",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "noEmit": true,
9 | "esModuleInterop": true,
10 | "module": "esnext",
11 | "moduleResolution": "bundler",
12 | "resolveJsonModule": true,
13 | "isolatedModules": true,
14 | "jsx": "react-jsx",
15 | "incremental": true,
16 | "plugins": [
17 | {
18 | "name": "next"
19 | }
20 | ],
21 | "paths": {
22 | "@/*": ["./src/*"]
23 | }
24 | },
25 | "include": [
26 | "next-env.d.ts",
27 | "**/*.ts",
28 | "**/*.tsx",
29 | ".next/types/**/*.ts",
30 | ".next/dev/types/**/*.ts",
31 | "**/*.mts"
32 | ],
33 | "exclude": ["node_modules"]
34 | }
35 |
--------------------------------------------------------------------------------
/src/components/ui/separator.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as SeparatorPrimitive from "@radix-ui/react-separator"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | function Separator({
9 | className,
10 | orientation = "horizontal",
11 | decorative = true,
12 | ...props
13 | }: React.ComponentProps
14 |
15 | Step {currentStep + 1} of {totalSteps}
16 |
17 | {Math.round(progress)}%
18 |
19 |
20 |
7 |
19 | );
20 | };
21 |
22 | export default LatestTravelCard;
23 |
--------------------------------------------------------------------------------
/src/modules/home/ui/components/latest-travel-card.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import { PiArrowDown } from "react-icons/pi";
3 |
4 | const LatestTravelCard = () => {
5 | return (
6 |
8 |
11 |
12 | Latest Travel
9 |
13 |
14 | View All
15 |
16 |
17 |
18 |
7 |
19 | );
20 | };
21 |
22 | export default LatestTravelCard;
23 |
--------------------------------------------------------------------------------
/src/components/footer/footer-nav.tsx:
--------------------------------------------------------------------------------
1 | import LinkRotate from "../link-rotate";
2 |
3 | interface Props {
4 | title: string;
5 | links: {
6 | title: string;
7 | href: string;
8 | }[];
9 | }
10 |
11 | const FooterNav = ({ title, links }: Props) => {
12 | return (
13 |
8 |
11 |
12 | Latest Travel
9 |
13 |
14 | View All
15 |
16 |
17 |
18 |
14 |
27 | );
28 | };
29 |
30 | export default FooterNav;
31 |
--------------------------------------------------------------------------------
/next.config.ts:
--------------------------------------------------------------------------------
1 | import type { NextConfig } from "next";
2 |
3 | const s3PublicUrl = process.env.NEXT_PUBLIC_S3_PUBLIC_URL || "";
4 | const s3Url = s3PublicUrl ? new URL(s3PublicUrl) : null;
5 | const s3Hostname = s3Url ? s3Url.hostname : "";
6 | const s3Protocol = s3Url ? s3Url.protocol.replace(":", "") : "https";
7 |
8 | const nextConfig: NextConfig = {
9 | output: "standalone",
10 | /* config options here */
11 | reactCompiler: true,
12 | images: {
13 | qualities: [65, 75],
14 | loader: "custom",
15 | loaderFile: "./src/lib/cloudflare-image-loader.ts",
16 | remotePatterns: s3Hostname
17 | ? [
18 | {
19 | protocol: s3Protocol as "http" | "https",
20 | hostname: s3Hostname,
21 | port: s3Url?.port || "",
22 | },
23 | ]
24 | : [],
25 | },
26 | };
27 |
28 | export default nextConfig;
29 |
--------------------------------------------------------------------------------
/src/components/ui/progress.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as ProgressPrimitive from "@radix-ui/react-progress"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | function Progress({
9 | className,
10 | value,
11 | ...props
12 | }: React.ComponentProps{title}
15 |-
16 | {links.map((link) => (
17 |
-
18 |
23 |
24 | ))}
25 |
9 |
21 |
22 |
14 | ![]()
15 |
16 |
17 |
18 | ![]()
19 |
20 |
11 |
28 | );
29 | };
30 |
31 | export default VectorTopLeftAnimation;
32 |
--------------------------------------------------------------------------------
/src/trpc/init.ts:
--------------------------------------------------------------------------------
1 | import { db } from "@/db";
2 | import { cache } from "react";
3 | import superjson from "superjson";
4 | import { initTRPC, TRPCError } from "@trpc/server";
5 | import { getSession } from "@/modules/auth/lib/get-session";
6 |
7 | export const createTRPCContext = cache(async () => {
8 | return { db };
9 | });
10 |
11 | type Context = {
12 | db: typeof db;
13 | };
14 |
15 | const t = initTRPC.context
12 |
19 |
20 |
13 |
18 | {title}
14 |
15 |
17 |
21 | ![]()
22 |
23 |
24 |
25 | ![]()
26 |
27 |
18 |
20 | Photo uploaded successfully!
21 |22 | Your photo has been uploaded successfully. 23 |
24 | 25 |
15 |
21 |
22 | );
23 | };
24 |
25 | export default Graphic;
26 |
--------------------------------------------------------------------------------
/src/components/marquee-card.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 | import { ReactNode } from "react";
3 |
4 | interface MarqueeCardProps {
5 | children: ReactNode;
6 | className?: string;
7 | pauseOnHover?: boolean;
8 | }
9 |
10 | /**
11 | * MarqueeCard component displays a marquee card.
12 | *
13 | * @returns {JSX.Element} - The MarqueeCard component.
14 | */
15 | export function MarqueeCard({
16 | children,
17 | className,
18 | pauseOnHover = false,
19 | }: MarqueeCardProps) {
20 | return (
21 | *]:pause",
25 | className
26 | )}
27 | >
28 | {/* Duplicate the children to create the infinite scroll effect */}
29 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/src/modules/dashboard/ui/components/dashboard-sidebar/nav-secondary.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import {
5 | SidebarGroup,
6 | SidebarGroupContent,
7 | SidebarMenu,
8 | SidebarMenuButton,
9 | SidebarMenuItem,
10 | } from "@/components/ui/sidebar";
11 | import { Badge } from "@/components/ui/badge";
12 |
13 | export function NavSecondary({
14 | items,
15 | ...props
16 | }: {
17 | items: {
18 | title: string;
19 | url: string;
20 | }[];
21 | } & React.ComponentPropsWithoutRef
30 | {children}
31 |
32 |
36 | {children}
37 |
38 |
7 |
25 | About
8 |
9 |
24 | 10 | With a focus on both candid moments and stunning landscapes, I 11 | strive to evoke emotion and tell stories through my work. My 12 | photography blends the rawness of everyday life with the artistry of 13 | fine art, allowing viewers to connect with each image on a deeper 14 | level. 15 |
16 | 17 |18 | Whether I'm exploring urban environments or venturing into 19 | nature, my goal is to highlight the extraordinary in the ordinary. 20 | Through my lens, I invite you to join me on this visual journey of 21 | discovery and inspiration. 22 |
23 |
16 |
38 | );
39 | };
40 |
--------------------------------------------------------------------------------
/src/components/ui/sonner.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import {
4 | CircleCheckIcon,
5 | InfoIcon,
6 | Loader2Icon,
7 | OctagonXIcon,
8 | TriangleAlertIcon,
9 | } from "lucide-react"
10 | import { useTheme } from "next-themes"
11 | import { Toaster as Sonner, type ToasterProps } from "sonner"
12 |
13 | const Toaster = ({ ...props }: ToasterProps) => {
14 | const { theme = "system" } = useTheme()
15 |
16 | return (
17 |
17 | Page {page} of {totalPages || 1}
18 |
19 |
20 |
28 |
36 |
37 |
12 | {steps.map((s, i) => (
13 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/public/DJI_logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
17 |
--------------------------------------------------------------------------------
/src/components/ui/switch.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as SwitchPrimitive from "@radix-ui/react-switch";
5 |
6 | import { cn } from "@/lib/utils";
7 |
8 | function Switch({
9 | className,
10 | ...props
11 | }: React.ComponentProps
14 |
28 | ))}
29 |
24 | {i < currentStep ?
26 | {s.title}
27 |
24 |
39 | );
40 | };
41 |
42 | export default ProfilePage;
43 |
--------------------------------------------------------------------------------
/src/components/ui/checkbox.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
5 | import { CheckIcon } from "lucide-react"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | function Checkbox({
10 | className,
11 | ...props
12 | }: React.ComponentProps
25 |
30 |
31 | {/* Active Sessions */}
32 | Profile & Security
26 |27 | Manage your profile, password, and active sessions 28 |
29 |
33 |
38 |
12 | {/* Container positioned so arrow tip is at coordinate center */}
13 |
29 | );
30 |
--------------------------------------------------------------------------------
/src/modules/posts/ui/components/columns.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { ColumnDef } from "@tanstack/react-table";
4 | import { PostGetMany } from "../../types";
5 | import { VisibilityToggle } from "./visibility-toggle";
6 | import { DeletePostButton } from "./delete-post-button";
7 | import Link from "next/link";
8 | import { PenBoxIcon } from "lucide-react";
9 | import { Button } from "@/components/ui/button";
10 |
11 | export const columns: ColumnDef
14 | {/* Image above arrow */}
15 |
28 |
16 |
25 | {/* Arrow pointing down to coordinate center */}
26 |
27 |
24 |
31 |
32 |
25 |
30 | City Collection
26 |27 | Explore your photos organized by cities you've visited 28 |
29 |
20 |
47 | );
48 | };
49 |
50 | export default VectorCombined;
51 |
--------------------------------------------------------------------------------
/src/components/editor/toolbars/horizontal-rule.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { SeparatorHorizontal } from "lucide-react";
4 | import React from "react";
5 |
6 | import { Button, type ButtonProps } from "@/components/ui/button";
7 | import {
8 | Tooltip,
9 | TooltipContent,
10 | TooltipTrigger,
11 | } from "@/components/ui/tooltip";
12 | import { cn } from "@/lib/utils";
13 | import { useToolbar } from "./toolbar-provider";
14 |
15 | const HorizontalRuleToolbar = React.forwardRef
21 | {link ? (
22 |
23 |
30 |
31 | {title}
25 | 26 | ) : ( 27 |{title}
28 | )} 29 |
36 | ![]()
37 |
38 |
39 |
44 | ![]()
45 |
46 | router.push(`/travel/${title}`)}
22 | >
23 |
27 |
37 |
38 |
42 | );
43 | };
44 |
45 | export default CityCard;
46 |
--------------------------------------------------------------------------------
/src/app/(dashboard)/dashboard/posts/page.tsx:
--------------------------------------------------------------------------------
1 | import { Suspense } from "react";
2 | import { trpc } from "@/trpc/server";
3 | import { getQueryClient } from "@/trpc/server";
4 | import type { SearchParams } from "nuqs/server";
5 | import { ErrorBoundary } from "react-error-boundary";
6 | import { loadSearchParams } from "@/modules/posts/params";
7 | import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
8 | import { PostsListHeader } from "@/modules/posts/ui/components/posts-list-header";
9 | import {
10 | DashboardPostsView,
11 | ErrorStatus,
12 | LoadingStatus,
13 | } from "@/modules/posts/ui/views/dashboard-posts-view";
14 |
15 | export const metadata = {
16 | title: "Posts",
17 | description: "Posts",
18 | };
19 |
20 | type Props = {
21 | searchParams: Promise
39 |
41 |
26 |
40 | );
41 | };
42 |
43 | export default WordRotate;
44 |
--------------------------------------------------------------------------------
/src/app/(dashboard)/dashboard/photos/page.tsx:
--------------------------------------------------------------------------------
1 | import { Suspense } from "react";
2 | import { trpc } from "@/trpc/server";
3 | import { getQueryClient } from "@/trpc/server";
4 | import type { SearchParams } from "nuqs/server";
5 | import { ErrorBoundary } from "react-error-boundary";
6 | import { loadSearchParams } from "@/modules/photos/params";
7 | import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
8 | import { PhotosListHeader } from "@/modules/photos/ui/components/photos-list-header";
9 | import {
10 | DashboardPhotosView,
11 | ErrorStatus,
12 | LoadingStatus,
13 | } from "@/modules/photos/ui/views/dashboard-photos-view";
14 |
15 | export const metadata = {
16 | title: "Photo Collection",
17 | description: "Photo Collection",
18 | };
19 |
20 | type Props = {
21 | searchParams: Promise
29 | {/* Default Text (visible initially, moves down on hover) */}
30 |
31 | {label}
32 |
33 |
34 | {/* Hover Text (hidden initially, moves up on hover) */}
35 |
36 | {label2 || label}
37 |
38 |
39 |
51 | {icon &&
60 | );
61 | }
62 |
--------------------------------------------------------------------------------
/src/components/link-rotate.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 | import Link from "next/link";
3 |
4 | interface Props {
5 | link: string;
6 | label: string;
7 | className?: string;
8 | }
9 |
10 | /**
11 | * LinkRotate component displays a vertical rotation of link when user hover it
12 | * @preview ![img]() - https://p.ecarry.me/components/link-rotate
13 | *
14 | * @param {Object} props - Component props
15 | * @param {string} props.link - Url string
16 | * @param {string} props.label - Url label
17 | * @param {string} props.classname - Component styles
18 | * @returns {JSX.Element} JSX Element
19 | */
20 |
21 | const LinkRotate = ({ link, label, className }: Props) => {
22 | return (
23 | {icon}
}
52 |
53 |
58 | {action && {title}
54 | {description && ( 55 |{description}
56 | )} 57 |{action}
}
59 |
24 |
31 | {/* Default Text (visible initially, moves down on hover) */}
32 |
33 | {label}
34 |
35 |
36 | {/* Hover Text (hidden initially, moves up on hover) */}
37 |
38 | {label}
39 |
40 |
41 |
42 | );
43 | };
44 |
45 | export default LinkRotate;
46 |
--------------------------------------------------------------------------------
/src/modules/travel/server/procedures.ts:
--------------------------------------------------------------------------------
1 | import { z } from "zod";
2 | import { db } from "@/db";
3 | import { createTRPCRouter, baseProcedure } from "@/trpc/init";
4 | import { desc, eq, and } from "drizzle-orm";
5 | import { citySets, photos } from "@/db/schema";
6 | import { TRPCError } from "@trpc/server";
7 |
8 | export const travelRouter = createTRPCRouter({
9 | getCitySets: baseProcedure.query(async () => {
10 | const data = await db.query.citySets.findMany({
11 | with: {
12 | coverPhoto: true,
13 | photos: true,
14 | },
15 | orderBy: [desc(citySets.updatedAt)],
16 | });
17 |
18 | return data;
19 | }),
20 | getOne: baseProcedure
21 | .input(
22 | z.object({
23 | city: z.string(),
24 | })
25 | )
26 | .query(async ({ input }) => {
27 | const { city } = input;
28 |
29 | // Get city set info
30 | const [citySet] = await db
31 | .select()
32 | .from(citySets)
33 | .where(and(eq(citySets.city, city)));
34 |
35 | if (!citySet) {
36 | throw new TRPCError({
37 | code: "NOT_FOUND",
38 | message: "City not found",
39 | });
40 | }
41 |
42 | // Get all photos in this city
43 | const cityPhotos = await db
44 | .select()
45 | .from(photos)
46 | .where(and(eq(photos.city, city)))
47 | .orderBy(desc(photos.dateTimeOriginal), desc(photos.createdAt));
48 |
49 | return {
50 | ...citySet,
51 | photos: cityPhotos,
52 | };
53 | }),
54 | });
55 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Changelog
2 |
3 | All notable changes to this project will be documented in this file.
4 |
5 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7 |
8 | ## [2.1.0] - 2025-11-22
9 |
10 | ### Added
11 |
12 | - **Mapbox Integration**: Interactive map embeds with location toolbar functionality
13 | - Interactive map preview with zoom controls in MapboxToolbar dialog
14 | - Drag rotate and drag pan controls for enhanced map interaction
15 | - Location-based content embedding support
16 | - **Editor Toolbar Enhancements**:
17 | - Dedicated Heading toolbar component for better text formatting
18 | - Separate Color and Highlight toolbar components for improved UX
19 | - Numeric font size display replacing generic Type icon
20 |
21 | ### Changed
22 |
23 | - **Editor Performance**: Optimized editor toolbar performance using `useEditorState` hook
24 | - **Code Organization**:
25 | - Extracted Tiptap editor styles to dedicated CSS file for better maintainability
26 | - Normalized YouTube extension indentation from 4 spaces to 2 spaces
27 | - **Image Responsiveness**: Improved image component responsiveness and simplified RichTextViewer
28 |
29 | ### Fixed
30 |
31 | - Added explicit `type="button"` attribute to prevent unintended form submissions in editor components
32 |
33 | ### Technical Details
34 |
35 | - 28 files changed
36 | - +1,846 insertions, -750 deletions
37 |
38 | ## [2.0.0] - Previous Release
39 |
40 | - Initial stable release
41 |
--------------------------------------------------------------------------------
/src/components/responsive-modal.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useIsMobile } from "@/hooks/use-mobile";
4 | import {
5 | Drawer,
6 | DrawerContent,
7 | DrawerDescription,
8 | DrawerHeader,
9 | DrawerTitle,
10 | } from "@/components/ui/drawer";
11 |
12 | import {
13 | Dialog,
14 | DialogContent,
15 | DialogDescription,
16 | DialogHeader,
17 | DialogTitle,
18 | } from "@/components/ui/dialog";
19 |
20 | interface ResponsiveModalProps {
21 | children: React.ReactNode;
22 | open: boolean;
23 | title: string;
24 | onOpenChange: (open: boolean) => void;
25 | className?: string;
26 | }
27 |
28 | export const ResponsiveModal = ({
29 | children,
30 | open,
31 | title,
32 | onOpenChange,
33 | className,
34 | }: ResponsiveModalProps) => {
35 | const isMobile = useIsMobile();
36 |
37 | if (isMobile) {
38 | return (
39 |
14 |
41 | );
42 | };
43 |
--------------------------------------------------------------------------------
/src/modules/travel/ui/components/city-item.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import { PiArrowRight } from "react-icons/pi";
3 | import TextScroll from "./text-scroll";
4 | import { CitySetWithPhotos } from "@/db/schema";
5 |
6 | interface CityItemProps {
7 | city: CitySetWithPhotos;
8 | onMouseEnter: (city: CitySetWithPhotos) => void;
9 | }
10 |
11 | export const CityItem = ({ city, onMouseEnter }: CityItemProps) => {
12 | return (
13 |
14 |
15 | {/* Cover photo */}
16 |
40 |
17 | {citySets?.map((city) => (
18 |
35 |
36 |
24 |
33 | ))}
34 |
37 |
39 | onMouseEnter(city)}
18 | >
19 |
31 |
32 | );
33 | };
34 |
--------------------------------------------------------------------------------
/src/modules/auth/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { Laptop, Smartphone, Monitor, Tablet } from "lucide-react";
2 | import { UAParser } from "ua-parser-js";
3 |
4 | export const formatLastActive = (createdAt: Date) => {
5 | const date = new Date(createdAt);
6 | const now = new Date();
7 | const diffInMinutes = Math.floor(
8 | (now.getTime() - date.getTime()) / (1000 * 60)
9 | );
10 |
11 | if (diffInMinutes < 1) return "Active now";
12 | if (diffInMinutes < 60) return `${diffInMinutes}m ago`;
13 | if (diffInMinutes < 1440) return `${Math.floor(diffInMinutes / 60)}h ago`;
14 | return `${Math.floor(diffInMinutes / 1440)}d ago`;
15 | };
16 |
17 | export const getDeviceIcon = (
18 | parser: UAParser,
19 | deviceType: string | undefined
20 | ) => {
21 | const os = parser.getOS().name?.toLowerCase();
22 |
23 | if (deviceType === "mobile" || deviceType === "tablet") {
24 | return deviceType === "tablet" ? Tablet : Smartphone;
25 | }
26 |
27 | if (os?.includes("mac")) return Laptop;
28 | if (os?.includes("windows")) return Monitor;
29 |
30 | return Laptop;
31 | };
32 |
33 | export const getDeviceDescription = (
34 | parser: UAParser,
35 | deviceType: string | undefined
36 | ) => {
37 | const browser = parser.getBrowser();
38 | const os = parser.getOS();
39 | const device = parser.getDevice();
40 |
41 | if (deviceType === "mobile") {
42 | return `${device.vendor || "Mobile"} ${device.model || "Device"}`;
43 | }
44 |
45 | if (deviceType === "tablet") {
46 | return `${device.vendor || "Tablet"} ${device.model || "Device"}`;
47 | }
48 |
49 | return `${browser.name || "Browser"} on ${os.name || "Desktop"}`;
50 | };
51 |
--------------------------------------------------------------------------------
/src/modules/home/ui/views/cities-view.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { AspectRatio } from "@/components/ui/aspect-ratio";
4 | import CityCard from "../components/city-card";
5 | import { useTRPC } from "@/trpc/client";
6 | import { useSuspenseQuery } from "@tanstack/react-query";
7 | import { Skeleton } from "@/components/ui/skeleton";
8 | import VectorTopLeftAnimation from "../components/vector-top-left-animation";
9 |
10 | export const CitiesView = () => {
11 | const trpc = useTRPC();
12 | const { data } = useSuspenseQuery(
13 | trpc.home.getCitySets.queryOptions({ limit: 12 })
14 | );
15 |
16 | return (
17 | {city.city}
20 |
21 |
30 |
22 |
23 | {city.country}
24 |
25 |
26 |
27 |
29 |
18 | {data.map((item) => (
19 |
26 | );
27 | };
28 |
29 | export const CitiesViewLoadingStatus = () => {
30 | return (
31 |
32 | {Array.from({ length: 6 }).map((_, index) => (
33 |
47 | );
48 | };
49 |
--------------------------------------------------------------------------------
/src/app/(home)/blog/[slug]/page.tsx:
--------------------------------------------------------------------------------
1 | import { Metadata } from "next";
2 | import { BlogSlugView } from "@/modules/blog/ui/views/blog-slug-view";
3 | import { getQueryClient } from "@/trpc/server";
4 | import { trpc } from "@/trpc/server";
5 | import { HydrationBoundary } from "@tanstack/react-query";
6 | import { dehydrate } from "@tanstack/react-query";
7 | import { Suspense } from "react";
8 | import { ErrorBoundary } from "react-error-boundary";
9 |
10 | type Props = {
11 | params: Promise<{ slug: string }>;
12 | };
13 |
14 | export async function generateMetadata({ params }: Props): Promise
34 |
38 |
40 |
41 |
45 | ))}
46 |
42 |
44 |
26 |
51 | );
52 | }
53 |
--------------------------------------------------------------------------------
/src/modules/posts/ui/components/posts-list-header.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import Link from "next/link";
4 | import { Button } from "@/components/ui/button";
5 | import { PlusIcon, XCircle } from "lucide-react";
6 | import { usePostsFilters } from "../../hooks/use-posts-filters";
7 | import { DEFAULT_PAGE } from "@/constants";
8 | import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
9 | import { PostsSearchFilter } from "./posts-search-filter";
10 |
11 | export const PostsListHeader = () => {
12 | const [filters, setFilters] = usePostsFilters();
13 |
14 | const isAnyFilterModified = !!filters.search;
15 |
16 | const onClearFilters = () => {
17 | setFilters({
18 | search: "",
19 | page: DEFAULT_PAGE,
20 | });
21 | };
22 |
23 | return (
24 |
27 |
50 |
37 |
49 |
25 |
52 | );
53 | };
54 |
--------------------------------------------------------------------------------
/src/modules/cities/ui/components/city-card.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import Link from "next/link";
4 | import BlurImage from "@/components/blur-image";
5 | import { keyToUrl } from "@/modules/s3/lib/key-to-url";
6 | import type { CityGetMany } from "../../types";
7 |
8 | interface CityCardProps {
9 | citySet: CityGetMany[number];
10 | }
11 |
12 | export function CityCard({ citySet }: CityCardProps) {
13 | const { country, city, photoCount, coverPhotoUrl, coverPhotoBlurData } =
14 | citySet;
15 |
16 | const href = `/dashboard/cities/${encodeURIComponent(city)}`;
17 |
18 | return (
19 |
20 |
26 |
31 | Posts
27 |28 | Here's a list of your posts 29 |
30 |
32 |
33 |
44 |
50 |
51 |
34 |
42 |
21 | {/* Background Image */}
22 |
48 |
49 | );
50 | }
51 |
--------------------------------------------------------------------------------
/src/components/editor/toolbars/image-placeholder-toolbar.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Image as ImageIcon } from "lucide-react";
4 | import React from "react";
5 |
6 | import { Button, type ButtonProps } from "@/components/ui/button";
7 | import {
8 | Tooltip,
9 | TooltipContent,
10 | TooltipTrigger,
11 | } from "@/components/ui/tooltip";
12 | import { cn } from "@/lib/utils";
13 | import { useToolbar } from "./toolbar-provider";
14 | import { useEditorState } from "@tiptap/react";
15 |
16 | const ImagePlaceholderToolbar = React.forwardRef<
17 | HTMLButtonElement,
18 | ButtonProps
19 | >(({ className, onClick, children, ...props }, ref) => {
20 | const { editor } = useToolbar();
21 |
22 | const editorState = useEditorState({
23 | editor,
24 | selector: (ctx) => ({
25 | isImagePlaceholderActive:
26 | ctx.editor.isActive("image-placeholder") ?? false,
27 | }),
28 | });
29 |
30 | return (
31 |
35 |
40 |
41 | {/* Bottom - Photo Count */}
42 | {country}
36 |37 | {city} 38 |
39 |
43 |
47 | 44 | {photoCount} 45 |
46 |
22 | {children.split("").map((l, i) => (
23 |
40 | {l}
41 |
42 | ))}
43 |
44 |
45 | {children.split("").map((l, i) => (
46 |
63 | {l}
64 |
65 | ))}
66 |
67 |
18 |
25 |
42 |
43 | {/* hides browsers password toggles */}
44 |
52 |
53 | );
54 | }
55 | );
56 | PasswordInput.displayName = "PasswordInput";
57 |
58 | export { PasswordInput };
59 |
--------------------------------------------------------------------------------
/src/components/editor/toolbars/ordered-list.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { ListOrdered } from "lucide-react";
4 | import React from "react";
5 |
6 | import { Button, type ButtonProps } from "@/components/ui/button";
7 | import {
8 | Tooltip,
9 | TooltipContent,
10 | TooltipTrigger,
11 | } from "@/components/ui/tooltip";
12 | import { cn } from "@/lib/utils";
13 | import { useToolbar } from "@/components/editor/toolbars/toolbar-provider";
14 | import { useEditorState } from "@tiptap/react";
15 |
16 | const OrderedListToolbar = React.forwardRef{title}
38 | 39 |
40 |
52 |
53 | );
54 | };
55 |
56 | export default ContactCard;
57 |
--------------------------------------------------------------------------------
/src/modules/posts/ui/components/delete-post-button.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { toast } from "sonner";
4 | import { Trash2 } from "lucide-react";
5 | import { Button } from "@/components/ui/button";
6 | import { useTRPC } from "@/trpc/client";
7 | import { useMutation, useQueryClient } from "@tanstack/react-query";
8 | import { useConfirm } from "@/hooks/use-confirm";
9 |
10 | interface DeletePostButtonProps {
11 | postId: string;
12 | postTitle: string;
13 | }
14 |
15 | export function DeletePostButton({ postId, postTitle }: DeletePostButtonProps) {
16 | const trpc = useTRPC();
17 | const queryClient = useQueryClient();
18 |
19 | const [ConfirmDialog, confirm] = useConfirm(
20 | "Delete Post",
21 | `Are you sure you want to delete "${postTitle}"? This action cannot be undone. The post will be permanently deleted.`
22 | );
23 |
24 | const deletePost = useMutation(trpc.posts.remove.mutationOptions());
25 |
26 | const handleDelete = async () => {
27 | const ok = await confirm();
28 |
29 | if (!ok) return;
30 |
31 | deletePost.mutate(
32 | { id: postId },
33 | {
34 | onSuccess: async () => {
35 | // Invalidate queries to refetch posts list
36 | await queryClient.invalidateQueries(
37 | trpc.posts.getMany.queryOptions({})
38 | );
39 | toast.success("Post deleted successfully");
40 | },
41 | onError: (error) => {
42 | toast.error(error.message || "Failed to delete post");
43 | },
44 | }
45 | );
46 | };
47 |
48 | return (
49 | <>
50 |
41 | {/* Default Text (visible initially, moves down on hover) */}
42 |
43 | {iconMap[title]}
44 |
45 |
46 | {/* Hover Text (hidden initially, moves up on hover) */}
47 |
48 |
51 |
30 |
53 | );
54 | };
55 |
56 | export default page;
57 |
--------------------------------------------------------------------------------
/src/modules/blog/ui/components/latest-blog-section.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | // External dependencies
4 | import Image from "next/image";
5 | import Link from "next/link";
6 | // UI Components
7 | import { Badge } from "@/components/ui/badge";
8 | import { postsGetMany } from "@/modules/blog/types";
9 | import { keyToUrl } from "@/modules/s3/lib/key-to-url";
10 |
11 | interface LatestPostSectionProps {
12 | data?: postsGetMany[0];
13 | }
14 |
15 | export const LatestPostSection = ({ data }: LatestPostSectionProps) => {
16 | if (!data) {
17 | return (
18 |
31 |
36 | Overview
32 |33 | See your photos, travel history, and more. 34 |
35 |
37 |
52 |
38 |
39 | Error}>
44 |
46 |
47 |
48 |
50 |
51 |
19 |
21 | );
22 | }
23 |
24 | return (
25 |
29 | No blog available
20 |
39 |
53 |
54 | );
55 | };
56 |
--------------------------------------------------------------------------------
/src/components/editor/toolbars/strikethrough.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Strikethrough } from "lucide-react";
4 | import React from "react";
5 |
6 | import { Button, type ButtonProps } from "@/components/ui/button";
7 | import {
8 | Tooltip,
9 | TooltipContent,
10 | TooltipTrigger,
11 | } from "@/components/ui/tooltip";
12 | import { cn } from "@/lib/utils";
13 | import { useToolbar } from "@/components/editor/toolbars/toolbar-provider";
14 | import { useEditorState } from "@tiptap/react";
15 |
16 | const StrikeThroughToolbar = React.forwardRef
40 |
52 |
41 |
42 | New
43 |
44 |
46 |
47 | {data.title}
45 |
48 | Read
49 |
50 |
51 |
16 | {/* Container positioned so arrow tip is at coordinate center */}
17 |
41 | );
42 | };
43 |
--------------------------------------------------------------------------------
/src/components/blur-image.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useState, memo } from "react";
4 | import Image, { ImageProps } from "next/image";
5 | import { Blurhash } from "react-blurhash";
6 |
7 | interface BlurImageProps extends Omit
18 | {/* Image above arrow */}
19 |
40 |
20 |
37 | {/* Arrow pointing down to coordinate center */}
38 |
39 |
32 |
33 | {cluster.count}
34 |
35 |
36 |
39 | {!imageLoaded && (
40 | setImageLoaded(true)}
61 | {...props}
62 | />
63 |
64 | );
65 | });
66 |
67 | export default BlurImage;
68 |
--------------------------------------------------------------------------------
/src/modules/photos/ui/components/delete-photo-button.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { toast } from "sonner";
4 | import { Trash2 } from "lucide-react";
5 | import { useTRPC } from "@/trpc/client";
6 | import { Button } from "@/components/ui/button";
7 | import { useMutation, useQueryClient } from "@tanstack/react-query";
8 | import { useConfirm } from "@/hooks/use-confirm";
9 |
10 | interface DeletePhotoButtonProps {
11 | photoId: string;
12 | photoTitle: string;
13 | }
14 |
15 | export function DeletePhotoButton({
16 | photoId,
17 | photoTitle,
18 | }: DeletePhotoButtonProps) {
19 | const trpc = useTRPC();
20 | const queryClient = useQueryClient();
21 |
22 | const [ConfirmDialog, confirm] = useConfirm(
23 | "Delete Photo",
24 | `Are you sure you want to delete "${photoTitle}"? This action cannot be undone. The photo will be permanently deleted.`
25 | );
26 |
27 | const deletePhoto = useMutation(trpc.photos.remove.mutationOptions());
28 |
29 | const handleDelete = async () => {
30 | const ok = await confirm();
31 |
32 | if (!ok) return;
33 |
34 | deletePhoto.mutate(
35 | { id: photoId },
36 | {
37 | onSuccess: async () => {
38 | // Invalidate queries to refetch photos list
39 | await queryClient.invalidateQueries(
40 | trpc.photos.getMany.queryOptions({})
41 | );
42 | toast.success("Photo deleted successfully");
43 | },
44 | onError: (error) => {
45 | toast.error(error.message || "Failed to delete photo");
46 | },
47 | }
48 | );
49 | };
50 |
51 | return (
52 | <>
53 |
41 |
50 | )}
51 |
16 |
22 | );
23 | }
24 |
25 | return (
26 | No cities yet
18 |19 | Upload photos with location data to see your city collection 20 |
21 |
27 | {cities.map((citySet) => (
28 |
31 | );
32 | }
33 |
34 | export function CityListLoadingView() {
35 | return (
36 |
37 | {Array.from({ length: 8 }).map((_, i) => (
38 |
45 | );
46 | }
47 |
48 | export function CityListErrorView() {
49 | return (
50 |
39 |
43 | ))}
44 |
51 |
56 | );
57 | }
58 |
--------------------------------------------------------------------------------
/src/components/tech-marquee.tsx:
--------------------------------------------------------------------------------
1 | import { MarqueeCard } from "./marquee-card";
2 | import {
3 | SiReact,
4 | SiNextdotjs,
5 | SiTailwindcss,
6 | SiTypescript,
7 | SiTrpc,
8 | SiReactquery,
9 | SiShadcnui,
10 | SiAdobelightroomclassic,
11 | SiVercel,
12 | SiCloudflare,
13 | SiDrizzle,
14 | } from "react-icons/si";
15 |
16 | const technologies = [
17 | {
18 | icon: SiReact,
19 | name: "React",
20 | },
21 | {
22 | icon: SiNextdotjs,
23 | name: "Next.js",
24 | },
25 | {
26 | icon: SiTailwindcss,
27 | name: "Tailwind CSS",
28 | },
29 | {
30 | icon: SiDrizzle,
31 | name: "Drizzle ORM",
32 | },
33 | {
34 | icon: SiTypescript,
35 | name: "TypeScript",
36 | },
37 | {
38 | icon: SiTrpc,
39 | name: "tRPC",
40 | },
41 | {
42 | icon: SiReactquery,
43 | name: "React Query",
44 | },
45 | {
46 | icon: SiShadcnui,
47 | name: "Shadcn UI",
48 | },
49 | {
50 | icon: SiVercel,
51 | name: "Vercel",
52 | },
53 | {
54 | icon: SiCloudflare,
55 | name: "Cloudflare",
56 | },
57 | {
58 | icon: SiAdobelightroomclassic,
59 | name: "Lightroom Classic",
60 | },
61 | ];
62 |
63 | const TechMarquee = () => {
64 | return (
65 | Failed to load cities
52 |53 | Please try refreshing the page 54 |
55 |
66 |
82 | );
83 | };
84 |
85 | export default TechMarquee;
86 |
--------------------------------------------------------------------------------
/src/modules/discover/hooks/use-photo-clustering.ts:
--------------------------------------------------------------------------------
1 | import { useMemo, useState, useCallback } from "react";
2 | import {
3 | createClusterIndex,
4 | getClustersFromIndex,
5 | calculateBounds,
6 | type PhotoPoint,
7 | } from "@/modules/discover/lib/clustering";
8 |
9 | interface UsePhotoClusteringProps {
10 | photos: PhotoPoint[];
11 | initialZoom?: number;
12 | }
13 |
14 | export function usePhotoClustering({
15 | photos,
16 | initialZoom = 3,
17 | }: UsePhotoClusteringProps) {
18 | const [zoom, setZoom] = useState(initialZoom);
19 | const [bounds, setBounds] = useState<[number, number, number, number]>([
20 | -180, -85, 180, 85,
21 | ]);
22 |
23 | // Filter valid photos (with coordinates)
24 | const validPhotos = useMemo(() => {
25 | return photos.filter(
26 | (photo) =>
27 | photo.latitude != null &&
28 | photo.longitude != null &&
29 | !isNaN(photo.latitude) &&
30 | !isNaN(photo.longitude)
31 | );
32 | }, [photos]);
33 |
34 | // Create cluster index
35 | const clusterIndex = useMemo(() => {
36 | if (validPhotos.length === 0) return null;
37 | return createClusterIndex(validPhotos);
38 | }, [validPhotos]);
39 |
40 | // Get clusters for current zoom and bounds
41 | const { clusters, singlePhotos } = useMemo(() => {
42 | if (!clusterIndex) return { clusters: [], singlePhotos: [] };
43 |
44 | const result = getClustersFromIndex(clusterIndex, zoom, bounds);
45 |
46 | return result;
47 |
48 |
49 | }, [clusterIndex, zoom, bounds, validPhotos.length]);
50 |
51 | // Handle map move/zoom changes
52 | const handleMove = useCallback(
53 | (viewState: { zoom: number; latitude: number; longitude: number }) => {
54 |
55 | setZoom(viewState.zoom);
56 |
57 | // Calculate approximate bounds based on viewport
58 | const newBounds = calculateBounds(
59 | viewState.latitude,
60 | viewState.longitude,
61 | viewState.zoom
62 | );
63 | setBounds(newBounds);
64 | },
65 | []
66 | );
67 |
68 | return {
69 | clusters,
70 | singlePhotos,
71 | zoom,
72 | handleMove,
73 | };
74 | }
75 |
--------------------------------------------------------------------------------
/src/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as TooltipPrimitive from "@radix-ui/react-tooltip"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | function TooltipProvider({
9 | delayDuration = 0,
10 | ...props
11 | }: React.ComponentPropsBuilt with
67 | 68 |
69 |
70 | {technologies.map((tech) => (
71 |
77 |
78 |
79 |
80 |
81 |
72 |
75 | ))}
76 |
55 | {}}
59 | />
60 | {JSON.stringify(data, null, 2)}
61 |
62 |
30 | {postsToShow.map((item) => (
31 |
32 |
36 |
57 | ))}
58 |
59 | );
60 | };
61 |
--------------------------------------------------------------------------------
/src/components/ui/tabs.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as TabsPrimitive from "@radix-ui/react-tabs"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | function Tabs({
9 | className,
10 | ...props
11 | }: React.ComponentProps
46 |
55 |
56 |
47 |
54 | {item.title}
48 | 49 |
50 | Read
51 |
52 |
53 |
49 |
51 | )}
52 |