@tanstack/create 0.49.1

package/src/frameworks/react/add-ons/shadcn/assets/src/lib/utils.ts

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

package/src/frameworks/react/add-ons/shadcn/assets/src/styles.css

@@ -0,0 +1,138 @@
+@import 'tailwindcss';
+
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
+body {
+  @apply m-0;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family:
+    source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.871 0.006 286.286);
+  --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);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.871 0.006 286.286);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.141 0.005 285.823);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.141 0.005 285.823);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.274 0.006 286.033);
+  --input: oklch(0.274 0.006 286.033);
+  --ring: oklch(0.442 0.017 285.786);
+  --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.21 0.006 285.885);
+  --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.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.274 0.006 286.033);
+  --sidebar-ring: oklch(0.442 0.017 285.786);
+}
+
+@theme inline {
+  --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-destructive-foreground: var(--destructive-foreground);
+  --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);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --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);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/src/frameworks/react/add-ons/shadcn/info.json

@@ -0,0 +1,11 @@
+{
+  "name": "Shadcn",
+  "description": "Add Shadcn UI to your application.",
+  "phase": "add-on",
+  "modes": ["file-router", "code-router"],
+  "link": "https://ui.shadcn.com/",
+  "type": "add-on",
+  "category": "styling",
+  "color": "#000000",
+  "priority": 30
+}

package/src/frameworks/react/add-ons/shadcn/package.json

@@ -0,0 +1,9 @@
+{
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.561.0",
+    "tailwind-merge": "^3.0.2",
+    "tw-animate-css": "^1.3.6"
+  }
+}

package/src/frameworks/react/add-ons/shadcn/small-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="none" d="M0 0h256v256H0z"/><path fill="none" stroke="#fff" stroke-width="25" stroke-linecap="round" d="M208 128l-80 80M192 40L40 192"/></svg>

package/src/frameworks/react/add-ons/start/assets/_dot_gitignore.append

@@ -0,0 +1,3 @@
+.output
+.vinxi
+todos.json

package/src/frameworks/react/add-ons/start/assets/src/data/demo.punk-songs.ts

@@ -0,0 +1,13 @@
+import { createServerFn } from "@tanstack/react-start";
+
+export const getPunkSongs = createServerFn({
+  method: "GET",
+}).handler(async () => [
+  { id: 1, name: "Teenage Dirtbag", artist: "Wheatus" },
+  { id: 2, name: "Smells Like Teen Spirit", artist: "Nirvana" },
+  { id: 3, name: "The Middle", artist: "Jimmy Eat World" },
+  { id: 4, name: "My Own Worst Enemy", artist: "Lit" },
+  { id: 5, name: "Fat Lip", artist: "Sum 41" },
+  { id: 6, name: "All the Small Things", artist: "blink-182" },
+  { id: 7, name: "Beverly Hills", artist: "Weezer" },
+]);

package/src/frameworks/react/add-ons/start/assets/src/router.tsx.ejs

@@ -0,0 +1,77 @@
+import { createRouter } from '@tanstack/react-router'<% if (addOnEnabled['tanstack-query']) { %>
+import { setupRouterSsrQueryIntegration } from '@tanstack/react-router-ssr-query'
+import * as TanstackQuery from "./integrations/tanstack-query/root-provider";
+<% } %><% if (addOnEnabled['apollo-client']) { %>
+import {
+  routerWithApolloClient,
+  ApolloClient,
+  InMemoryCache,
+} from "@apollo/client-integration-tanstack-start";
+import { HttpLink } from "@apollo/client";
+<% } %>
+<% if (addOnEnabled.sentry) { %>
+import * as Sentry from "@sentry/tanstackstart-react";
+<% } %><% if (addOnEnabled.paraglide) { %>
+import { deLocalizeUrl, localizeUrl } from "./paraglide/runtime";
+<% } %>
+
+// Import the generated route tree
+import { routeTree } from './routeTree.gen'
+
+// Create a new router instance
+export const getRouter = () => {
+<% if (addOnEnabled['apollo-client']) { %>
+  // Configure Apollo Client
+  const apolloClient = new ApolloClient({
+    cache: new InMemoryCache(),
+    link: new HttpLink({
+      uri: import.meta.env.VITE_GRAPHQL_ENDPOINT || "https://countries.trevorblades.com/"
+    }),
+  });
+<% } %>
+<% if (addOnEnabled['tanstack-query']) { %>
+  const rqContext = TanstackQuery.getContext();
+<% } %>
+
+  const router = createRouter({
+    routeTree,
+    context: {
+<% if (addOnEnabled['apollo-client']) { %>
+      ...routerWithApolloClient.defaultContext,
+<% } %>
+<% if (addOnEnabled['tanstack-query']) { %>
+      ...rqContext,
+<% } %>
+    },
+<% if (addOnEnabled.paraglide) { %>
+    // Paraglide URL rewrite docs: https://github.com/TanStack/router/tree/main/examples/react/i18n-paraglide#rewrite-url
+    rewrite: {
+      input: ({ url }) => deLocalizeUrl(url),
+      output: ({ url }) => localizeUrl(url),
+    },
+<% } %>
+<% if (addOnEnabled['tanstack-query'] || addOnEnabled['apollo-client']) { %>
+    defaultPreload: "intent",
+<% } else { %>
+    scrollRestoration: true,
+    defaultPreloadStaleTime: 0,
+<% } %>
+  })
+
+<% if (addOnEnabled['tanstack-query']) { %>
+  setupRouterSsrQueryIntegration({router, queryClient: rqContext.queryClient})
+<% } %>
+
+<% if (addOnEnabled.sentry) { %>
+  if (!router.isServer) {
+    Sentry.init({
+      dsn: import.meta.env.VITE_SENTRY_DSN,
+      integrations: [],
+      tracesSampleRate: 1.0,
+      sendDefaultPii: true,
+    });
+  }
+<% } %>
+
+  return <% if (addOnEnabled['apollo-client']) { %>routerWithApolloClient(router, apolloClient)<% } else { %>router<% } %>;
+}

package/src/frameworks/react/add-ons/start/assets/src/routes/demo/api.names.ts

@@ -0,0 +1,10 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { json } from '@tanstack/react-start'
+
+export const Route = createFileRoute('/demo/api/names')({
+  server: {
+    handlers: {
+      GET: () => json(['Alice', 'Bob', 'Charlie']),
+    },
+  },
+})

package/src/frameworks/react/add-ons/start/assets/src/routes/demo/api.tq-todos.ts.ejs

@@ -0,0 +1,35 @@
+<% if (!addOnEnabled['tanstack-query']) { ignoreFile() } %>import { createFileRoute } from '@tanstack/react-router'
+
+const todos = [
+  {
+    id: 1,
+    name: 'Buy groceries',
+  },
+  {
+    id: 2,
+    name: 'Buy mobile phone',
+  },
+  {
+    id: 3,
+    name: 'Buy laptop',
+  },
+]
+
+export const Route = createFileRoute('/demo/api/tq-todos')({
+  server: {
+    handlers: {
+      GET: () => {
+        return Response.json(todos)
+      },
+      POST: async ({ request }) => {
+        const name = await request.json()
+        const todo = {
+          id: todos.length + 1,
+          name,
+        }
+        todos.push(todo)
+        return Response.json(todo)
+      },
+    },
+  },
+})

package/src/frameworks/react/add-ons/start/assets/src/routes/demo/start.api-request.tsx.ejs

@@ -0,0 +1,68 @@
+<% if (addOnEnabled['tanstack-query']) { %>
+import { useQuery } from '@tanstack/react-query'
+<% } else { %>
+import { useEffect, useState } from 'react'
+<% } %>
+import { createFileRoute } from '@tanstack/react-router'<% if (!tailwind) { %>
+import './start.css'
+<% } %>
+
+function getNames() {
+  return fetch('/demo/api/names').then((res) => res.json() as Promise<string[]>)
+}
+
+export const Route = createFileRoute('/demo/start/api-request')({
+  component: Home,
+})
+
+function Home() {
+  <% if (addOnEnabled['tanstack-query']) { %>
+    const { data: names = [] } = useQuery({
+      queryKey: ['names'],
+      queryFn: getNames,
+    })
+  <% } else { %>
+    const [names, setNames] = useState<Array<string>>([])
+      
+    useEffect(() => {
+      getNames().then(setNames)
+    }, [])
+  <% } %>
+  return (
+<% if (tailwind) { %>
+    <div
+      className="flex items-center justify-center min-h-screen p-4 text-white"
+      style={{
+        backgroundColor: '#000',
+        backgroundImage:
+          'radial-gradient(ellipse 60% 60% at 0% 100%, #444 0%, #222 60%, #000 100%)',
+      }}
+    >
+      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
+        <h1 className="text-2xl mb-4">Start API Request Demo - Names List</h1>
+        <ul className="mb-4 space-y-2">
+          {names.map((name) => (
+            <li
+              key={name}
+              className="bg-white/10 border border-white/20 rounded-lg p-3 backdrop-blur-sm shadow-md"
+            >
+              <span className="text-lg text-white">{name}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+<% } else { %>
+    <div className="api-page">
+      <div className="content">
+        <h1>Start API Request Demo - Names List</h1>
+        <ul>
+          {names.map((name) => (
+            <li key={name}>{name}</li>
+          ))}
+        </ul>
+      </div>
+    </div>
+<% } %>
+  )
+}

package/src/frameworks/react/add-ons/start/assets/src/routes/demo/start.css.ejs

@@ -0,0 +1,43 @@
+<% if (tailwind) { ignoreFile() } %>.api-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 1rem;
+  color: #fff;
+}
+
+.api-page .content {
+  width: 100%;
+  max-width: 2xl;
+  padding: 8rem;
+  border-radius: 1rem;
+  backdrop-filter: blur(1rem);
+  background-color: rgba(0, 0, 0, 0.5);
+  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.1);
+  border: 0.5rem solid rgba(0, 0, 0, 0.1);
+}
+
+.api-page .content h1 {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+}
+
+.api-page .content ul {
+  margin-bottom: 1rem;
+  list-style: none;
+  padding: 0;
+}
+
+.api-page .content li {
+  background-color: rgba(255, 255, 255, 0.1);
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(0.5rem);
+  box-shadow: 0 0 0.5rem 0 rgba(255, 255, 255, 0.1);
+}
+
+.api-page .content li span {
+  font-size: 1.2rem;
+}

package/src/frameworks/react/add-ons/start/assets/src/routes/demo/start.server-funcs.tsx.ejs

@@ -0,0 +1,183 @@
+<% if (addOnEnabled.cloudflare) { %>import { useState } from "react";
+import { createFileRoute } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+
+const getCurrentServerTime = createServerFn({
+  method: "GET",
+}).handler(async () => await new Date().toISOString());
+
+export const Route = createFileRoute("/demo/start/server-funcs")({
+  component: Home,
+  loader: async () => await getCurrentServerTime(),
+});
+
+function Home() {
+  const originalTime = Route.useLoaderData();
+  const [time, setTime] = useState(originalTime);
+
+  return (
+    <div
+      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-zinc-800 to-black p-4 text-white"
+      style={{
+        backgroundImage:
+          "radial-gradient(50% 50% at 20% 60%, #23272a 0%, #18181b 50%, #000000 100%)",
+      }}
+    >
+      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
+        <h1 className="text-2xl mb-4">Start Server Functions - Server Time</h1>
+        <div className="flex flex-col gap-2">
+          <div className="text-xl">Starting Time: {originalTime}</div>
+          <div className="text-xl">Current Time: {time}</div>
+          <button
+            className="bg-blue-500 hover:bg-blue-600 disabled:bg-blue-500/50 disabled:cursor-not-allowed text-white font-bold py-3 px-4 rounded-lg transition-colors"
+            onClick={async () => setTime(await getCurrentServerTime())}
+          >
+            Refresh
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+<% } else { %>import fs from 'node:fs'
+import { useCallback, useState } from 'react'
+import { createFileRoute, useRouter } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'<% if (!tailwind) { %>
+import './start.css'
+<% } %>
+
+/*
+const loggingMiddleware = createMiddleware().server(
+  async ({ next, request }) => {
+    console.log("Request:", request.url);
+    return next();
+  }
+);
+const loggedServerFunction = createServerFn({ method: "GET" }).middleware([
+  loggingMiddleware,
+]);
+*/
+
+const TODOS_FILE = 'todos.json'
+
+async function readTodos() {
+  return JSON.parse(
+    await fs.promises.readFile(TODOS_FILE, 'utf-8').catch(() =>
+      JSON.stringify(
+        [
+          { id: 1, name: 'Get groceries' },
+          { id: 2, name: 'Buy a new phone' },
+        ],
+        null,
+        2,
+      ),
+    ),
+  )
+}
+
+const getTodos = createServerFn({
+  method: 'GET',
+}).handler(async () => await readTodos())
+
+const addTodo = createServerFn({ method: 'POST' })
+  .inputValidator((d: string) => d)
+  .handler(async ({ data }) => {
+    const todos = await readTodos()
+    todos.push({ id: todos.length + 1, name: data })
+    await fs.promises.writeFile(TODOS_FILE, JSON.stringify(todos, null, 2))
+    return todos
+  })
+
+export const Route = createFileRoute('/demo/start/server-funcs')({
+  component: Home,
+  loader: async () => await getTodos(),
+})
+
+function Home() {
+  const router = useRouter()
+  let todos = Route.useLoaderData()
+
+  const [todo, setTodo] = useState('')
+
+  const submitTodo = useCallback(async () => {
+    todos = await addTodo({ data: todo })
+    setTodo('')
+    router.invalidate()
+  }, [addTodo, todo])
+
+  return (
+<% if (tailwind) { %>
+    <div
+      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-zinc-800 to-black p-4 text-white"
+      style={{
+        backgroundImage:
+          'radial-gradient(50% 50% at 20% 60%, #23272a 0%, #18181b 50%, #000000 100%)',
+      }}
+    >
+      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
+        <h1 className="text-2xl mb-4">Start Server Functions - Todo Example</h1>
+        <ul className="mb-4 space-y-2">
+          {todos?.map((t) => (
+            <li
+              key={t.id}
+              className="bg-white/10 border border-white/20 rounded-lg p-3 backdrop-blur-sm shadow-md"
+            >
+              <span className="text-lg text-white">{t.name}</span>
+            </li>
+          ))}
+        </ul>
+        <div className="flex flex-col gap-2">
+          <input
+            type="text"
+            value={todo}
+            onChange={(e) => setTodo(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                submitTodo()
+              }
+            }}
+            placeholder="Enter a new todo..."
+            className="w-full px-4 py-3 rounded-lg border border-white/20 bg-white/10 backdrop-blur-sm text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent"
+          />
+          <button
+            disabled={todo.trim().length === 0}
+            onClick={submitTodo}
+            className="bg-blue-500 hover:bg-blue-600 disabled:bg-blue-500/50 disabled:cursor-not-allowed text-white font-bold py-3 px-4 rounded-lg transition-colors"
+          >
+            Add todo
+          </button>
+        </div>
+      </div>
+    </div>
+<% } else { %>
+    <div>
+      <h1>Start Server Functions - Todo Example</h1>
+      <ul>
+        {todos?.map((t) => (
+          <li key={t.id}>{t.name}</li>
+        ))}
+      </ul>
+      <div className="flex flex-col gap-2">
+      <input
+        type="text"
+        value={todo}
+        onChange={(e) => setTodo(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            submitTodo()
+          }
+        }}
+        placeholder="Enter a new todo..."
+      />
+      <button
+        disabled={todo.trim().length === 0}
+        onClick={submitTodo}
+      >
+        Add todo
+      </button>
+    </div>
+</div>
+<% } %>
+  )
+}
+<% } %>

package/src/frameworks/react/add-ons/start/assets/src/routes/demo/start.ssr.data-only.tsx.ejs

@@ -0,0 +1,55 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { getPunkSongs } from "@/data/demo.punk-songs";
+
+export const Route = createFileRoute("/demo/start/ssr/data-only")({
+  ssr: "data-only",
+  component: RouteComponent,
+  loader: async () => await getPunkSongs(),
+});
+
+function RouteComponent() {
+  const punkSongs = Route.useLoaderData();
+<% if (tailwind) { %>
+  return (
+    <div
+      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-zinc-800 to-black p-4 text-white"
+      style={{
+        backgroundImage:
+          "radial-gradient(50% 50% at 20% 60%, #1a1a1a 0%, #0a0a0a 50%, #000000 100%)",
+      }}
+    >
+      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
+        <h1 className="text-3xl font-bold mb-6 text-pink-400">
+          Data Only SSR - Punk Songs
+        </h1>
+        <ul className="space-y-3">
+          {punkSongs.map((song) => (
+            <li
+              key={song.id}
+              className="bg-white/10 border border-white/20 rounded-lg p-4 backdrop-blur-sm shadow-md"
+            >
+              <span className="text-lg text-white font-medium">
+                {song.name}
+              </span>
+              <span className="text-white/60"> - {song.artist}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+<% } else { %>
+  return (
+    <div>
+      <h1>Data Only SSR - Punk Songs</h1>
+      <ul>
+        {punkSongs.map((song) => (
+          <li key={song.id}>
+            {song.name} - {song.artist}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+<% } %>
+}