feat: snippet details added

convex/snippets.ts

@@ -70,7 +70,29 @@ export const getSnippetStarCount = query({
   }
 })
 
+export const getSnippetById = query({
+  args: { snippetId: v.id("snippets") },
+  handler: async (ctx, args) => {
+    const snippet = await ctx.db.get(args.snippetId);
+    if (!snippet) throw new Error("Snippet not found");
+
+    return snippet;
+  },
+});
 
+export const getComments = query({
+  args: { snippetId: v.id("snippets") },
+  handler: async (ctx, args) => {
+    const comments = await ctx.db
+      .query("snippetComments")
+      .withIndex("by_snippet_id")
+      .filter((q) => q.eq(q.field("snippetId"), args.snippetId))
+      .order("desc")
+      .collect();
+
+    return comments;
+  },
+});
 
 export const deleteSnippet = mutation({
   args: {

src/app/snippets/[id]/_components/SnippetDetailPageSkeleton.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function SnippetDetailPageSkeleton() {
+  return (
+    <div>SnippetDetailPageSkeleton</div>
+  )
+}
+
+export default SnippetDetailPageSkeleton

src/app/snippets/[id]/page.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { useQuery } from 'convex/react';
+import { useParams } from 'next/navigation';
+import React from 'react'
+import { api } from '../../../../convex/_generated/api';
+import { Id } from '../../../../convex/_generated/dataModel';
+import SnippetDetailPageSkeleton from './_components/SnippetDetailPageSkeleton';
+
+function SnippetDetailPage() {
+  const snippetId = useParams().id;
+
+  const snippet = useQuery(api.snippets.getSnippetById, { snippetId : snippetId as Id<"snippets"> });
+
+    if (snippet === undefined) {
+        return <SnippetDetailPageSkeleton />;
+    }
+
+
+    return (
+    <div>SnippetDetailPage</div>
+  )
+}
+
+export default SnippetDetailPage