24 |
,
37 | document.getElementById("modal-root")!,
38 | );
39 | }
40 |
--------------------------------------------------------------------------------
/src/app/_components/topnav.tsx:
--------------------------------------------------------------------------------
1 | import { SignInButton, SignedIn, UserButton, SignedOut } from "@clerk/nextjs";
2 | import Link from "next/link";
3 | import { UploadComponent } from "./upload-component";
4 |
5 | export const Topnav = () => {
6 | return (
7 |
8 |
Gallery
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | );
21 | };
22 |
--------------------------------------------------------------------------------
/src/app/_components/upload-component.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useRouter } from "next/navigation";
4 | import { UploadButton } from "~/components/uploadthing";
5 |
6 | export const UploadComponent = () => {
7 | const router = useRouter();
8 | return (
9 |
{
12 | router.refresh();
13 | }}
14 | />
15 | );
16 | };
17 |
--------------------------------------------------------------------------------
/src/app/api/uploadthing/core.tsx:
--------------------------------------------------------------------------------
1 | import { auth } from "@clerk/nextjs/server";
2 | import { createUploadthing, type FileRouter } from "uploadthing/next";
3 | import { UploadThingError } from "uploadthing/server";
4 | import { db } from "~/server/db";
5 | import { images } from "~/server/db/schema";
6 |
7 | const f = createUploadthing();
8 |
9 | export const ourFileRouter = {
10 | imageUploader: f({ image: { maxFileCount: 10, maxFileSize: "4MB" } })
11 | .middleware(async () => {
12 | const user = auth();
13 | if (!user || !user.userId) throw new UploadThingError("Unauthorized");
14 |
15 | return { userId: user.userId };
16 | })
17 | .onUploadComplete(async ({ metadata, file }) => {
18 | await db
19 | .insert(images)
20 | .values({ url: file.url, name: file.name, userId: metadata.userId });
21 |
22 | return { uploadedBy: metadata.userId };
23 | }),
24 | } satisfies FileRouter;
25 |
26 | export type OurFileRouter = typeof ourFileRouter;
27 |
--------------------------------------------------------------------------------
/src/app/api/uploadthing/route.tsx:
--------------------------------------------------------------------------------
1 | import { createRouteHandler } from "uploadthing/next";
2 |
3 | import { ourFileRouter } from "./core";
4 |
5 | // Export routes for Next App Router
6 | export const { GET, POST } = createRouteHandler({
7 | router: ourFileRouter,
8 | });
9 |
--------------------------------------------------------------------------------
/src/app/img/[imageid]/page.tsx:
--------------------------------------------------------------------------------
1 | import FullImageView from "~/app/_components/full-image";
2 |
3 | export default function ImagePage(props: { params: { imageid: string } }) {
4 | return ;
5 | }
6 |
--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import "~/styles/globals.css";
2 |
3 | import { Inter } from "next/font/google";
4 | import { Topnav } from "./_components/topnav";
5 | import { ClerkProvider } from "@clerk/nextjs";
6 |
7 | import "@uploadthing/react/styles.css";
8 |
9 | const inter = Inter({
10 | subsets: ["latin"],
11 | variable: "--font-sans",
12 | });
13 |
14 | export const metadata = {
15 | title: "Create T3 App",
16 | description: "Generated by create-t3-app",
17 | icons: [{ rel: "icon", url: "/favicon.ico" }],
18 | };
19 |
20 | export default function RootLayout({
21 | children,
22 | modal,
23 | }: {
24 | children: React.ReactNode;
25 | modal: React.ReactNode;
26 | }) {
27 | return (
28 |
29 |
30 |
31 |
32 |
33 | {children}
34 | {modal}
35 |
36 |
37 |
38 |
39 |
40 | );
41 | }
42 |
--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
1 | import { getImagesByUserId } from "~/server/data-layer";
2 | import { ImageGrid } from "./_components/image-grid";
3 | import { auth } from "@clerk/nextjs/server";
4 |
5 | export const dynamic = "force-dynamic";
6 |
7 | async function safeFetch(userId: string) {
8 | try {
9 | return { data: await getImagesByUserId(userId) } as const;
10 | } catch (e) {
11 | console.error("err", e);
12 | return { error: "Failed to get images" } as const;
13 | }
14 | }
15 |
16 | export default async function HomePage() {
17 | const userId = auth()?.userId;
18 | if (!userId) {
19 | return Sign in above
;
20 | }
21 |
22 | const { data, error } = await safeFetch(userId);
23 |
24 | if (error) {
25 | return ERROR
;
26 | }
27 |
28 | return (
29 |
30 |
31 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import { Slot } from "@radix-ui/react-slot"
3 | import { cva, type VariantProps } from "class-variance-authority"
4 |
5 | import { cn } from "~/lib/utils"
6 |
7 | const buttonVariants = cva(
8 | "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
9 | {
10 | variants: {
11 | variant: {
12 | default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 | destructive:
14 | "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 | outline:
16 | "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 | secondary:
18 | "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 | ghost: "hover:bg-accent hover:text-accent-foreground",
20 | link: "text-primary underline-offset-4 hover:underline",
21 | },
22 | size: {
23 | default: "h-10 px-4 py-2",
24 | sm: "h-9 rounded-md px-3",
25 | lg: "h-11 rounded-md px-8",
26 | icon: "h-10 w-10",
27 | },
28 | },
29 | defaultVariants: {
30 | variant: "default",
31 | size: "default",
32 | },
33 | }
34 | )
35 |
36 | export interface ButtonProps
37 | extends React.ButtonHTMLAttributes,
38 | VariantProps {
39 | asChild?: boolean
40 | }
41 |
42 | const Button = React.forwardRef(
43 | ({ className, variant, size, asChild = false, ...props }, ref) => {
44 | const Comp = asChild ? Slot : "button"
45 | return (
46 |
51 | )
52 | }
53 | )
54 | Button.displayName = "Button"
55 |
56 | export { Button, buttonVariants }
57 |
--------------------------------------------------------------------------------
/src/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as DialogPrimitive from "@radix-ui/react-dialog"
5 | import { X } from "lucide-react"
6 |
7 | import { cn } from "~/lib/utils"
8 |
9 | const Dialog = DialogPrimitive.Root
10 |
11 | const DialogTrigger = DialogPrimitive.Trigger
12 |
13 | const DialogPortal = DialogPrimitive.Portal
14 |
15 | const DialogClose = DialogPrimitive.Close
16 |
17 | const DialogOverlay = React.forwardRef<
18 | React.ElementRef,
19 | React.ComponentPropsWithoutRef
20 | >(({ className, ...props }, ref) => (
21 |
29 | ))
30 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
31 |
32 | const DialogContent = React.forwardRef<
33 | React.ElementRef,
34 | React.ComponentPropsWithoutRef
35 | >(({ className, children, ...props }, ref) => (
36 |
37 |
38 |
46 | {children}
47 |
48 |
49 | Close
50 |
51 |
52 |
53 | ))
54 | DialogContent.displayName = DialogPrimitive.Content.displayName
55 |
56 | const DialogHeader = ({
57 | className,
58 | ...props
59 | }: React.HTMLAttributes) => (
60 |
67 | )
68 | DialogHeader.displayName = "DialogHeader"
69 |
70 | const DialogFooter = ({
71 | className,
72 | ...props
73 | }: React.HTMLAttributes) => (
74 |
81 | )
82 | DialogFooter.displayName = "DialogFooter"
83 |
84 | const DialogTitle = React.forwardRef<
85 | React.ElementRef,
86 | React.ComponentPropsWithoutRef
87 | >(({ className, ...props }, ref) => (
88 |
96 | ))
97 | DialogTitle.displayName = DialogPrimitive.Title.displayName
98 |
99 | const DialogDescription = React.forwardRef<
100 | React.ElementRef,
101 | React.ComponentPropsWithoutRef
102 | >(({ className, ...props }, ref) => (
103 |
108 | ))
109 | DialogDescription.displayName = DialogPrimitive.Description.displayName
110 |
111 | export {
112 | Dialog,
113 | DialogPortal,
114 | DialogOverlay,
115 | DialogClose,
116 | DialogTrigger,
117 | DialogContent,
118 | DialogHeader,
119 | DialogFooter,
120 | DialogTitle,
121 | DialogDescription,
122 | }
123 |
--------------------------------------------------------------------------------
/src/components/uploadthing.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | generateUploadButton,
3 | generateUploadDropzone,
4 | } from "@uploadthing/react";
5 |
6 | import type { OurFileRouter } from "~/app/api/uploadthing/core";
7 |
8 | export const UploadButton = generateUploadButton();
9 | export const UploadDropzone = generateUploadDropzone();
10 |
--------------------------------------------------------------------------------
/src/components/xbutton.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * This code was generated by v0 by Vercel.
3 | * @see https://v0.dev/t/uQ6sF3KXLJ7
4 | */
5 | import { Button, type ButtonProps } from "~/components/ui/button";
6 |
7 | export function XButton(props: ButtonProps) {
8 | return (
9 |
16 | );
17 | }
18 |
19 | function XIcon(props: { className?: string }) {
20 | return (
21 |
36 | );
37 | }
38 |
--------------------------------------------------------------------------------
/src/env.js:
--------------------------------------------------------------------------------
1 | import { createEnv } from "@t3-oss/env-nextjs";
2 | import { z } from "zod";
3 |
4 | export const env = createEnv({
5 | /**
6 | * Specify your server-side environment variables schema here. This way you can ensure the app
7 | * isn't built with invalid env vars.
8 | */
9 | server: {
10 | DATABASE_URL: z
11 | .string()
12 | .url()
13 | .refine(
14 | (str) => !str.includes("YOUR_MYSQL_URL_HERE"),
15 | "You forgot to change the default URL"
16 | ),
17 | NODE_ENV: z
18 | .enum(["development", "test", "production"])
19 | .default("development"),
20 | },
21 |
22 | /**
23 | * Specify your client-side environment variables schema here. This way you can ensure the app
24 | * isn't built with invalid env vars. To expose them to the client, prefix them with
25 | * `NEXT_PUBLIC_`.
26 | */
27 | client: {
28 | // NEXT_PUBLIC_CLIENTVAR: z.string(),
29 | },
30 |
31 | /**
32 | * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
33 | * middlewares) or client-side so we need to destruct manually.
34 | */
35 | runtimeEnv: {
36 | DATABASE_URL: process.env.DATABASE_URL,
37 | NODE_ENV: process.env.NODE_ENV,
38 | // NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
39 | },
40 | /**
41 | * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially
42 | * useful for Docker builds.
43 | */
44 | skipValidation: !!process.env.SKIP_ENV_VALIDATION,
45 | /**
46 | * Makes it so that empty strings are treated as undefined.
47 | * `SOME_VAR: z.string()` and `SOME_VAR=''` will throw an error.
48 | */
49 | emptyStringAsUndefined: true,
50 | });
51 |
--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs))
6 | }
7 |
--------------------------------------------------------------------------------
/src/middleware.ts:
--------------------------------------------------------------------------------
1 | import { clerkMiddleware } from "@clerk/nextjs/server";
2 | import { NextResponse } from "next/server";
3 |
4 | export default clerkMiddleware((auth, request) => {
5 | return NextResponse.next();
6 | });
7 |
8 | export const config = {
9 | matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
10 | };
11 |
--------------------------------------------------------------------------------
/src/server/data-layer/index.ts:
--------------------------------------------------------------------------------
1 | import "server-only";
2 | import { db } from "../db";
3 | import { images } from "../db/schema";
4 | import type { InferSelectModel } from "drizzle-orm";
5 |
6 | const mockData = [
7 | {
8 | url: "/temp/1.jpg",
9 | createdAt: new Date(),
10 | updatedAt: new Date(),
11 | name: "1.jpg",
12 | },
13 | {
14 | url: "/temp/2.jpg",
15 | createdAt: new Date(),
16 | updatedAt: new Date(),
17 | name: "2.jpg",
18 | },
19 | {
20 | url: "/temp/3.png",
21 | createdAt: new Date(),
22 | updatedAt: new Date(),
23 | name: "3.png",
24 | },
25 | ];
26 |
27 | const generateMockData = (amount: number) => {
28 | const result = [];
29 | for (let i = 0; i < amount; i++) {
30 | const refIndex = i % mockData.length;
31 | result.push({ ...mockData[refIndex]!, id: i + 1 });
32 | }
33 | return result;
34 | };
35 |
36 | type ImageType = InferSelectModel;
37 | export const getImagesByUserId = async (
38 | userId: string,
39 | ): Promise => {
40 | return await db.query.images.findMany({
41 | where: (images, { eq }) => eq(images.userId, userId),
42 | orderBy: (images, { desc }) => desc(images.createdAt),
43 | });
44 | };
45 |
--------------------------------------------------------------------------------
/src/server/db/index.ts:
--------------------------------------------------------------------------------
1 | import { drizzle } from "drizzle-orm/vercel-postgres";
2 | import { sql } from "@vercel/postgres";
3 |
4 | import * as schema from "./schema";
5 |
6 | export const db = drizzle(sql, { schema });
7 |
--------------------------------------------------------------------------------
/src/server/db/schema.ts:
--------------------------------------------------------------------------------
1 | // Example model schema from the Drizzle docs
2 | // https://orm.drizzle.team/docs/sql-schema-declaration
3 |
4 | import { sql } from "drizzle-orm";
5 | import {
6 | index,
7 | pgTableCreator,
8 | serial,
9 | timestamp,
10 | varchar,
11 | } from "drizzle-orm/pg-core";
12 |
13 | /**
14 | * This is an example of how to use the multi-project schema feature of Drizzle ORM. Use the same
15 | * database instance for multiple projects.
16 | *
17 | * @see https://orm.drizzle.team/docs/goodies#multi-project-schema
18 | */
19 | export const pgTable = pgTableCreator((name) => `gallery-tutorial_${name}`);
20 |
21 | export const images = pgTable(
22 | "image",
23 | {
24 | id: serial("id").primaryKey(),
25 | url: varchar("url", { length: 256 }).notNull(),
26 | createdAt: timestamp("created_at")
27 | .default(sql`CURRENT_TIMESTAMP`)
28 | .notNull(),
29 | updatedAt: timestamp("updatedAt"),
30 |
31 | userId: varchar("user_id", { length: 256 }).notNull(),
32 |
33 | name: varchar("name", { length: 256 }).notNull(),
34 | },
35 | (imageModel) => ({
36 | urlIndex: index("url_idx").on(imageModel.url),
37 | }),
38 | );
39 |
--------------------------------------------------------------------------------
/src/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | @layer base {
6 | :root {
7 | --background: 0 0% 100%;
8 | --foreground: 222.2 84% 4.9%;
9 |
10 | --card: 0 0% 100%;
11 | --card-foreground: 222.2 84% 4.9%;
12 |
13 | --popover: 0 0% 100%;
14 | --popover-foreground: 222.2 84% 4.9%;
15 |
16 | --primary: 222.2 47.4% 11.2%;
17 | --primary-foreground: 210 40% 98%;
18 |
19 | --secondary: 210 40% 96.1%;
20 | --secondary-foreground: 222.2 47.4% 11.2%;
21 |
22 | --muted: 210 40% 96.1%;
23 | --muted-foreground: 215.4 16.3% 46.9%;
24 |
25 | --accent: 210 40% 96.1%;
26 | --accent-foreground: 222.2 47.4% 11.2%;
27 |
28 | --destructive: 0 84.2% 60.2%;
29 | --destructive-foreground: 210 40% 98%;
30 |
31 | --border: 214.3 31.8% 91.4%;
32 | --input: 214.3 31.8% 91.4%;
33 | --ring: 222.2 84% 4.9%;
34 |
35 | --radius: 0.5rem;
36 | }
37 |
38 | .dark {
39 | --background: 222.2 84% 0%;
40 | --foreground: 210 40% 98%;
41 |
42 | --card: 222.2 84% 4.9%;
43 | --card-foreground: 210 40% 98%;
44 |
45 | --popover: 222.2 84% 4.9%;
46 | --popover-foreground: 210 40% 98%;
47 |
48 | --primary: 210 40% 98%;
49 | --primary-foreground: 222.2 47.4% 11.2%;
50 |
51 | --secondary: 217.2 32.6% 17.5%;
52 | --secondary-foreground: 210 40% 98%;
53 |
54 | --muted: 217.2 32.6% 17.5%;
55 | --muted-foreground: 215 20.2% 65.1%;
56 |
57 | --accent: 217.2 32.6% 17.5%;
58 | --accent-foreground: 210 40% 98%;
59 |
60 | --destructive: 0 62.8% 30.6%;
61 | --destructive-foreground: 210 40% 98%;
62 |
63 | --border: 217.2 32.6% 17.5%;
64 | --input: 217.2 32.6% 17.5%;
65 | --ring: 212.7 26.8% 83.9%;
66 | }
67 | }
68 |
69 | @layer base {
70 | * {
71 | @apply border-border;
72 | }
73 | body {
74 | @apply bg-background text-foreground;
75 | }
76 | }
77 |
78 | .modal-backdrop {
79 | position: absolute;
80 | top: 0;
81 | left: 0;
82 | right: 0;
83 | bottom: 0;
84 | background-color: rgba(0, 0, 0, 0.7);
85 | z-index: 1000;
86 | }
87 |
88 | .close-button {
89 | position: absolute;
90 | top: 10px;
91 | left: 10px;
92 | width: 48px;
93 | height: 48px;
94 | background-color: transparent;
95 | border: none;
96 | border-radius: 15px; /* Circular shape */
97 | cursor: pointer;
98 | display: flex;
99 | align-items: center;
100 | justify-content: center;
101 | font-weight: 500;
102 | font-size: 24px; /* Adjust font size as needed */
103 | }
104 |
105 | .close-button:hover {
106 | background-color: #eee;
107 | }
108 |
109 | .close-button:after {
110 | content: "x";
111 | color: white;
112 | }
113 |
114 | dialog:modal {
115 | max-width: 100vw;
116 | max-height: 100vh;
117 | }
118 |
--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from "tailwindcss";
2 |
3 | const config = {
4 | darkMode: ["class"],
5 | content: [
6 | "./pages/**/*.{ts,tsx}",
7 | "./components/**/*.{ts,tsx}",
8 | "./app/**/*.{ts,tsx}",
9 | "./src/**/*.{ts,tsx}",
10 | ],
11 | prefix: "",
12 | theme: {
13 | container: {
14 | center: true,
15 | padding: "2rem",
16 | screens: {
17 | "2xl": "1400px",
18 | },
19 | },
20 | extend: {
21 | colors: {
22 | border: "hsl(var(--border))",
23 | input: "hsl(var(--input))",
24 | ring: "hsl(var(--ring))",
25 | background: "hsl(var(--background))",
26 | foreground: "hsl(var(--foreground))",
27 | primary: {
28 | DEFAULT: "hsl(var(--primary))",
29 | foreground: "hsl(var(--primary-foreground))",
30 | },
31 | secondary: {
32 | DEFAULT: "hsl(var(--secondary))",
33 | foreground: "hsl(var(--secondary-foreground))",
34 | },
35 | destructive: {
36 | DEFAULT: "hsl(var(--destructive))",
37 | foreground: "hsl(var(--destructive-foreground))",
38 | },
39 | muted: {
40 | DEFAULT: "hsl(var(--muted))",
41 | foreground: "hsl(var(--muted-foreground))",
42 | },
43 | accent: {
44 | DEFAULT: "hsl(var(--accent))",
45 | foreground: "hsl(var(--accent-foreground))",
46 | },
47 | popover: {
48 | DEFAULT: "hsl(var(--popover))",
49 | foreground: "hsl(var(--popover-foreground))",
50 | },
51 | card: {
52 | DEFAULT: "hsl(var(--card))",
53 | foreground: "hsl(var(--card-foreground))",
54 | },
55 | },
56 | borderRadius: {
57 | lg: "var(--radius)",
58 | md: "calc(var(--radius) - 2px)",
59 | sm: "calc(var(--radius) - 4px)",
60 | },
61 | keyframes: {
62 | "accordion-down": {
63 | from: { height: "0" },
64 | to: { height: "var(--radix-accordion-content-height)" },
65 | },
66 | "accordion-up": {
67 | from: { height: "var(--radix-accordion-content-height)" },
68 | to: { height: "0" },
69 | },
70 | },
71 | animation: {
72 | "accordion-down": "accordion-down 0.2s ease-out",
73 | "accordion-up": "accordion-up 0.2s ease-out",
74 | },
75 | },
76 | },
77 | plugins: [require("tailwindcss-animate")],
78 | } satisfies Config;
79 |
80 | export default config;
81 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | /* Base Options: */
4 | "esModuleInterop": true,
5 | "skipLibCheck": true,
6 | "target": "es2022",
7 | "allowJs": true,
8 | "resolveJsonModule": true,
9 | "moduleDetection": "force",
10 | "isolatedModules": true,
11 |
12 | /* Strictness */
13 | "strict": true,
14 | "noUncheckedIndexedAccess": true,
15 | "checkJs": true,
16 |
17 | /* Bundled projects */
18 | "lib": ["dom", "dom.iterable", "ES2022"],
19 | "noEmit": true,
20 | "module": "ESNext",
21 | "moduleResolution": "Bundler",
22 | "jsx": "preserve",
23 | "plugins": [{ "name": "next" }],
24 | "incremental": true,
25 |
26 | /* Path Aliases */
27 | "baseUrl": ".",
28 | "paths": {
29 | "~/*": ["./src/*"]
30 | }
31 | },
32 | "include": [
33 | ".eslintrc.cjs",
34 | "next-env.d.ts",
35 | "**/*.ts",
36 | "**/*.tsx",
37 | "**/*.cjs",
38 | "**/*.js",
39 | ".next/types/**/*.ts"
40 | ],
41 | "exclude": ["node_modules"]
42 | }
43 |
--------------------------------------------------------------------------------