Spaces:

osanseviero
/

gemini-coder

Running

App Files Files Community

osanseviero commited on 11 days ago

Commit

63c7991

•

1 Parent(s): 44edc3e

Upload 54 files

Browse files

This view is limited to 50 files because it contains too many changes. See raw diff

Files changed (50) hide show

.gitattributes +1 -0
Dockerfile +20 -0
LICENSE +21 -0
README.md +26 -10
app/(main)/layout.tsx +31 -0
app/(main)/page.tsx +268 -0
app/api/generateCode/route.ts +102 -0
app/api/og/route.tsx +34 -0
app/favicon.ico +0 -0
app/globals.css +24 -0
app/layout.tsx +44 -0
app/robots.txt +1 -0
app/share/[id]/layout.tsx +3 -0
app/share/[id]/page.tsx +52 -0
components/Footer.tsx +57 -0
components/Header.tsx +25 -0
components/code-viewer.css +7 -0
components/code-viewer.tsx +157 -0
components/github-icon.tsx +19 -0
components/loading-dots.module.css +69 -0
components/loading-dots.tsx +17 -0
hooks/use-scroll-to.ts +24 -0
lib/prisma.ts +10 -0
next-env.d.ts +5 -0
next.config.mjs +4 -0
package-lock.json +0 -0
package.json +45 -0
postcss.config.mjs +8 -0
prisma/migrations/20240808195804_first/migration.sql +13 -0
prisma/migrations/migration_lock.toml +3 -0
prisma/schema.prisma +18 -0
public/Aeonik/Aeonik-Bold.ttf +0 -0
public/Aeonik/Aeonik-Medium.ttf +0 -0
public/Aeonik/Aeonik-Regular.ttf +0 -0
public/Aeonik/AeonikFono-Bold.otf +0 -0
public/Aeonik/AeonikFono-Regular.otf +0 -0
public/Aeonik/AeonikMono-Regular.otf +0 -0
public/cssIcon.png +0 -0
public/favicon.ico +0 -0
public/halo.png +3 -0
public/logo.svg +10 -0
tailwind.config.ts +25 -0
tsconfig.json +26 -0
utils/domain.ts +10 -0
utils/shadcn-docs/avatar.tsx +12 -0
utils/shadcn-docs/button.tsx +14 -0
utils/shadcn-docs/card.tsx +27 -0
utils/shadcn-docs/checkbox.tsx +9 -0
utils/shadcn-docs/index.ts +23 -0
utils/shadcn-docs/input.tsx +9 -0

.gitattributes CHANGED Viewed

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+public/halo.png filter=lfs diff=lfs merge=lfs -text

Dockerfile ADDED Viewed

	@@ -0,0 +1,20 @@

+# Use Node 22 as the base image
+FROM node:22-alpine
+# Set the working directory inside the container
+WORKDIR /app
+# Copy package.json and package-lock.json (if you have one)
+COPY package*.json ./
+# Install dependencies
+RUN npm install
+# Copy the rest of the application code
+COPY . .
+# Expose the port your React app runs on
+EXPOSE 7860
+# Command to run the application
+CMD ["npm", "run", "dev"]

LICENSE ADDED Viewed

	@@ -0,0 +1,21 @@

+MIT License
+Copyright (c) 2024 Hassan El Mghari
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md CHANGED Viewed

@@ -1,10 +1,26 @@
----
-title: Gemini Coder
-emoji: 🦀
-colorFrom: yellow
-colorTo: green
-sdk: docker
-pinned: false
----
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

+<a href="https://www.geminicoder.io">
+  <img alt="Gemini Coder" src="./public/logo.svg">
+  <h1 align="center">Gemini Coder</h1>
+</a>
+<p align="center">
+  Generate small apps with one prompt. Powered by the Gemini API.
+</p>
+This project is fully based on [llamacoder](https://github.com/Nutlope/llamacoder). Please follow [Nutlope](https://github.com/Nutlope) and give them a star..
+## Tech stack
+- [Gemini API](https://ai.google.dev/gemini-api/docs) to use Gemini 1.5 Pro, Gemini 1.5 Flash, and Gemini 2.0 Flash Experimental
+- [Sandpack](https://sandpack.codesandbox.io/) for the code sandbox
+- Next.js app router with Tailwind
+You can also experiment with Gemini in [Google AI Studio](https://aistudio.google.com/).
+## Cloning & running
+1. Clone the repo: `git clone https://github.com/osanseviero/geminicoder`
+2. Create a `.env` file and add your [Google AI Studio API key](https://aistudio.google.com/app/apikey): `GOOGLE_AI_API_KEY=`
+3. Run `npm install` and `npm run dev` to install dependencies and run locally
+**This is a personal project and not a Google official project**

app/(main)/layout.tsx ADDED Viewed

	@@ -0,0 +1,31 @@

+import Image from "next/image";
+import bgImg from "@/public/halo.png";
+import Footer from "@/components/Footer";
+import Header from "@/components/Header";
+export default function Layout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <body className="bg-brand antialiased">
+      <div className="absolute inset-x-0 flex justify-center">
+        <Image
+          src={bgImg}
+          alt=""
+          className="w-full max-w-[1200px] mix-blend-screen"
+          priority
+        />
+      </div>
+      <div className="isolate">
+        <div className="mx-auto flex min-h-screen max-w-7xl flex-col items-center justify-center py-2">
+          <Header />
+          {children}
+          <Footer />
+        </div>
+      </div>
+    </body>
+  );
+}

app/(main)/page.tsx ADDED Viewed

	@@ -0,0 +1,268 @@

+"use client";
+import CodeViewer from "@/components/code-viewer";
+import { useScrollTo } from "@/hooks/use-scroll-to";
+import { CheckIcon } from "@heroicons/react/16/solid";
+import { ArrowLongRightIcon, ChevronDownIcon } from "@heroicons/react/20/solid";
+import { ArrowUpOnSquareIcon } from "@heroicons/react/24/outline";
+import * as Select from "@radix-ui/react-select";
+import * as Switch from "@radix-ui/react-switch";
+import { AnimatePresence, motion } from "framer-motion";
+import { FormEvent, useEffect, useState } from "react";
+import LoadingDots from "../../components/loading-dots";
+function removeCodeFormatting(code: string): string {
+  return code.replace(/```(?:typescript|javascript|tsx)?\n([\s\S]*?)```/g, '$1').trim();
+}
+export default function Home() {
+  let [status, setStatus] = useState<
+    "initial" | "creating" | "created" | "updating" | "updated"
+  >("initial");
+  let [prompt, setPrompt] = useState("");
+  let models = [
+    {
+      label: "gemini-2.0-flash-exp",
+      value: "gemini-2.0-flash-exp",
+    },
+    {
+      label: "gemini-1.5-pro",
+      value: "gemini-1.5-pro",
+    },
+    {
+      label: "gemini-1.5-flash",
+      value: "gemini-1.5-flash",
+    }
+  ];
+  let [model, setModel] = useState(models[0].value);
+  let [shadcn, setShadcn] = useState(false);
+  let [modification, setModification] = useState("");
+  let [generatedCode, setGeneratedCode] = useState("");
+  let [initialAppConfig, setInitialAppConfig] = useState({
+    model: "",
+    shadcn: true,
+  });
+  let [ref, scrollTo] = useScrollTo();
+  let [messages, setMessages] = useState<{ role: string; content: string }[]>(
+    [],
+  );
+  let loading = status === "creating" || status === "updating";
+  async function createApp(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    if (status !== "initial") {
+      scrollTo({ delay: 0.5 });
+    }
+    setStatus("creating");
+    setGeneratedCode("");
+    let res = await fetch("/api/generateCode", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        model,
+        shadcn,
+        messages: [{ role: "user", content: prompt }],
+      }),
+    });
+    if (!res.ok) {
+      throw new Error(res.statusText);
+    }
+    if (!res.body) {
+      throw new Error("No response body");
+    }
+    const reader = res.body.getReader();
+    let receivedData = "";
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) {
+        break;
+      }
+      receivedData += new TextDecoder().decode(value);
+      const cleanedData = removeCodeFormatting(receivedData);
+      setGeneratedCode(cleanedData);
+    }
+    setMessages([{ role: "user", content: prompt }]);
+    setInitialAppConfig({ model, shadcn });
+    setStatus("created");
+  }
+  useEffect(() => {
+    let el = document.querySelector(".cm-scroller");
+    if (el && loading) {
+      let end = el.scrollHeight - el.clientHeight;
+      el.scrollTo({ top: end });
+    }
+  }, [loading, generatedCode]);
+  return (
+    <main className="mt-12 flex w-full flex-1 flex-col items-center px-4 text-center sm:mt-1">
+      <a
+        className="mb-4 inline-flex h-7 shrink-0 items-center gap-[9px] rounded-[50px] border-[0.5px] border-solid border-[#E6E6E6] bg-[rgba(234,238,255,0.65)] bg-gray-100 px-7 py-5 shadow-[0px_1px_1px_0px_rgba(0,0,0,0.25)]"
+        href="https://ai.google.dev/gemini-api/docs"
+        target="_blank"
+      >
+        <span className="text-center">
+          Powered by <span className="font-medium">Gemini API</span>
+        </span>
+      </a>
+      <h1 className="my-6 max-w-3xl text-4xl font-bold text-gray-800 sm:text-6xl">
+        Turn your <span className="text-blue-600">idea</span>
+        <br /> into an <span className="text-blue-600">app</span>
+      </h1>
+      <form className="w-full max-w-xl" onSubmit={createApp}>
+        <fieldset disabled={loading} className="disabled:opacity-75">
+          <div className="relative mt-5">
+            <div className="absolute -inset-2 rounded-[32px] bg-gray-300/50" />
+            <div className="relative flex rounded-3xl bg-white shadow-sm">
+              <div className="relative flex flex-grow items-stretch focus-within:z-10">
+                <textarea
+                  rows={3}
+                  required
+                  value={prompt}
+                  onChange={(e) => setPrompt(e.target.value)}
+                  name="prompt"
+                  className="w-full resize-none rounded-l-3xl bg-transparent px-6 py-5 text-lg focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-500"
+                  placeholder="Build me a calculator app..."
+                />
+              </div>
+              <button
+                type="submit"
+                disabled={loading}
+                className="relative -ml-px inline-flex items-center gap-x-1.5 rounded-r-3xl px-3 py-2 text-sm font-semibold text-blue-500 hover:text-blue-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-500 disabled:text-gray-900"
+              >
+                {status === "creating" ? (
+                  <LoadingDots color="black" style="large" />
+                ) : (
+                  <ArrowLongRightIcon className="-ml-0.5 size-6" />
+                )}
+              </button>
+            </div>
+          </div>
+          <div className="mt-6 flex flex-col justify-center gap-4 sm:flex-row sm:items-center sm:gap-8">
+            <div className="flex items-center justify-between gap-3 sm:justify-center">
+              <p className="text-gray-500 sm:text-xs">Model:</p>
+              <Select.Root
+                name="model"
+                disabled={loading}
+                value={model}
+                onValueChange={(value) => setModel(value)}
+              >
+                <Select.Trigger className="group flex w-60 max-w-xs items-center rounded-2xl border-[6px] border-gray-300 bg-white px-4 py-2 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-500">
+                  <Select.Value />
+                  <Select.Icon className="ml-auto">
+                    <ChevronDownIcon className="size-6 text-gray-300 group-focus-visible:text-gray-500 group-enabled:group-hover:text-gray-500" />
+                  </Select.Icon>
+                </Select.Trigger>
+                <Select.Portal>
+                  <Select.Content className="overflow-hidden rounded-md bg-white shadow-lg">
+                    <Select.Viewport className="p-2">
+                      {models.map((model) => (
+                        <Select.Item
+                          key={model.value}
+                          value={model.value}
+                          className="flex cursor-pointer items-center rounded-md px-3 py-2 text-sm data-[highlighted]:bg-gray-100 data-[highlighted]:outline-none"
+                        >
+                          <Select.ItemText asChild>
+                            <span className="inline-flex items-center gap-2 text-gray-500">
+                              <div className="size-2 rounded-full bg-green-500" />
+                              {model.label}
+                            </span>
+                          </Select.ItemText>
+                          <Select.ItemIndicator className="ml-auto">
+                            <CheckIcon className="size-5 text-blue-600" />
+                          </Select.ItemIndicator>
+                        </Select.Item>
+                      ))}
+                    </Select.Viewport>
+                    <Select.ScrollDownButton />
+                    <Select.Arrow />
+                  </Select.Content>
+                </Select.Portal>
+              </Select.Root>
+            </div>
+            <div className="flex h-full items-center justify-between gap-3 sm:justify-center">
+              <label className="text-gray-500 sm:text-xs" htmlFor="shadcn">
+                shadcn/ui:
+              </label>
+              <Switch.Root
+                className="group flex w-20 max-w-xs items-center rounded-2xl border-[6px] border-gray-300 bg-white p-1.5 text-sm shadow-inner transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-500 data-[state=checked]:bg-blue-500"
+                id="shadcn"
+                name="shadcn"
+                checked={shadcn}
+                onCheckedChange={(value) => setShadcn(value)}
+              >
+                <Switch.Thumb className="size-7 rounded-lg bg-gray-200 shadow-[0_1px_2px] shadow-gray-400 transition data-[state=checked]:translate-x-7 data-[state=checked]:bg-white data-[state=checked]:shadow-gray-600" />
+              </Switch.Root>
+            </div>
+          </div>
+        </fieldset>
+      </form>
+      <hr className="border-1 mb-20 h-px bg-gray-700 dark:bg-gray-700" />
+      {status !== "initial" && (
+        <motion.div
+          initial={{ height: 0 }}
+          animate={{
+            height: "auto",
+            overflow: "hidden",
+            transitionEnd: { overflow: "visible" },
+          }}
+          transition={{ type: "spring", bounce: 0, duration: 0.5 }}
+          className="w-full pb-[25vh] pt-1"
+          onAnimationComplete={() => scrollTo()}
+          ref={ref}
+        >
+          <div className="relative mt-8 w-full overflow-hidden">
+            <div className="isolate">
+              <CodeViewer code={generatedCode} showEditor />
+            </div>
+            <AnimatePresence>
+              {loading && (
+                <motion.div
+                  initial={status === "updating" ? { x: "100%" } : undefined}
+                  animate={status === "updating" ? { x: "0%" } : undefined}
+                  exit={{ x: "100%" }}
+                  transition={{
+                    type: "spring",
+                    bounce: 0,
+                    duration: 0.85,
+                    delay: 0.5,
+                  }}
+                  className="absolute inset-x-0 bottom-0 top-1/2 flex items-center justify-center rounded-r border border-gray-400 bg-gradient-to-br from-gray-100 to-gray-300 md:inset-y-0 md:left-1/2 md:right-0"
+                >
+                  <p className="animate-pulse text-3xl font-bold">
+                    {status === "creating"
+                      ? "Building your app..."
+                      : "Updating your app..."}
+                  </p>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+        </motion.div>
+      )}
+    </main>
+  );
+}
+async function minDelay<T>(promise: Promise<T>, ms: number) {
+  let delay = new Promise((resolve) => setTimeout(resolve, ms));
+  let [p] = await Promise.all([promise, delay]);
+  return p;
+}

app/api/generateCode/route.ts ADDED Viewed

	@@ -0,0 +1,102 @@

+import shadcnDocs from "@/utils/shadcn-docs";
+import dedent from "dedent";
+import { z } from "zod";
+import { GoogleGenerativeAI } from "@google/generative-ai";
+const apiKey = process.env.GOOGLE_AI_API_KEY || "";
+const genAI = new GoogleGenerativeAI(apiKey);
+export async function POST(req: Request) {
+  let json = await req.json();
+  let result = z
+    .object({
+      model: z.string(),
+      shadcn: z.boolean().default(false),
+      messages: z.array(
+        z.object({
+          role: z.enum(["user", "assistant"]),
+          content: z.string(),
+        }),
+      ),
+    })
+    .safeParse(json);
+  if (result.error) {
+    return new Response(result.error.message, { status: 422 });
+  }
+  let { model, messages, shadcn } = result.data;
+  let systemPrompt = getSystemPrompt(shadcn);
+  const geminiModel = genAI.getGenerativeModel({model: model});
+  const geminiStream = await geminiModel.generateContentStream(
+    messages[0].content + systemPrompt + "\nPlease ONLY return code, NO backticks or language names. Don't start with \`\`\`typescript or \`\`\`javascript or \`\`\`tsx or \`\`\`."
+  );
+  const readableStream = new ReadableStream({
+    async start(controller) {
+      for await (const chunk of geminiStream.stream) {
+        const chunkText = chunk.text();
+        controller.enqueue(new TextEncoder().encode(chunkText));
+      }
+      controller.close();
+    },
+  });
+  return new Response(readableStream);
+}
+function getSystemPrompt(shadcn: boolean) {
+  let systemPrompt =
+`You are an expert frontend React engineer who is also a great UI/UX designer. Follow the instructions carefully, I will tip you $1 million if you do a good job:
+- Think carefully step by step.
+- Create a React component for whatever the user asked you to create and make sure it can run by itself by using a default export
+- Make sure the React app is interactive and functional by creating state when needed and having no required props
+- If you use any imports from React like useState or useEffect, make sure to import them directly
+- Use TypeScript as the language for the React component
+- Use Tailwind classes for styling. DO NOT USE ARBITRARY VALUES (e.g. \`h-[600px]\`). Make sure to use a consistent color palette.
+- Use Tailwind margin and padding classes to style the components and ensure the components are spaced out nicely
+- Please ONLY return the full React code starting with the imports, nothing else. It's very important for my job that you only return the React code with imports. DO NOT START WITH \`\`\`typescript or \`\`\`javascript or \`\`\`tsx or \`\`\`.
+- ONLY IF the user asks for a dashboard, graph or chart, the recharts library is available to be imported, e.g. \`import { LineChart, XAxis, ... } from "recharts"\` & \`<LineChart ...><XAxis dataKey="name"> ...\`. Please only use this when needed.
+- For placeholder images, please use a <div className="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
+  `;
+  // - The lucide-react library is also available to be imported IF NECCESARY ONLY FOR THE FOLLOWING ICONS: Heart, Shield, Clock, Users, Play, Home, Search, Menu, User, Settings, Mail, Bell, Calendar, Clock, Heart, Star, Upload, Download, Trash, Edit, Plus, Minus, Check, X, ArrowRight.
+  // - Here's an example of importing and using one: import { Heart } from "lucide-react"\` & \`<Heart className=""  />\`.
+  // - PLEASE ONLY USE THE ICONS LISTED ABOVE IF AN ICON IS NEEDED IN THE USER'S REQUEST. Please DO NOT use the lucide-react library if it's not needed.
+  if (shadcn) {
+    systemPrompt += `
+    There are some prestyled components available for use. Please use your best judgement to use any of these components if the app calls for one.
+    Here are the components that are available, along with how to import them, and how to use them:
+    ${shadcnDocs
+      .map(
+        (component) => `
+          <component>
+          <name>
+          ${component.name}
+          </name>
+          <import-instructions>
+          ${component.importDocs}
+          </import-instructions>
+          <usage-instructions>
+          ${component.usageDocs}
+          </usage-instructions>
+          </component>
+        `,
+      )
+      .join("\n")}
+    `;
+  }
+  systemPrompt += `
+    NO OTHER LIBRARIES (e.g. zod, hookform) ARE INSTALLED OR ABLE TO BE IMPORTED.
+  `;
+  return dedent(systemPrompt);
+}
+export const runtime = "edge";

app/api/og/route.tsx ADDED Viewed

	@@ -0,0 +1,34 @@

+import { ImageResponse } from "next/og";
+import { domain } from "@/utils/domain";
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const prompt = searchParams.get("prompt");
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          backgroundImage: `url(${domain}/dynamic-og.png)`,
+          backgroundSize: "1200px 630px",
+          backgroundRepeat: "no-repeat",
+          backgroundPosition: "center center",
+          fontSize: 50,
+          color: "black",
+          background: "white",
+          width: "100%",
+          height: "100%",
+          padding: "50px 200px",
+          textAlign: "center",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        {prompt && prompt.length > 100 ? prompt.slice(0, 97) + "..." : prompt}
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 630,
+    },
+  );
+}

app/favicon.ico ADDED Viewed

app/globals.css ADDED Viewed

	@@ -0,0 +1,24 @@

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@font-face {
+  font-family: "Aeonik";
+  src: url("/Aeonik/Aeonik-Regular.ttf");
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Aeonik";
+  src: url("/Aeonik/Aeonik-Medium.ttf");
+  font-weight: 500;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Aeonik";
+  src: url("/Aeonik/Aeonik-Bold.ttf");
+  font-weight: 700;
+  font-style: normal;
+}

app/layout.tsx ADDED Viewed

	@@ -0,0 +1,44 @@

+import type { Metadata } from "next";
+import "./globals.css";
+let title = "Gemini Coder – AI Code Generator";
+let description = "Generate your next app with Gemini";
+let url = "https://llamacoder.io/";
+let ogimage = "https://www.gstatic.com/lamda/images/gemini_sparkle_v002_d4735304ff6292a690345.svg";
+let sitename = "geminicoder.io";
+export const metadata: Metadata = {
+  metadataBase: new URL(url),
+  title,
+  description,
+  icons: {
+    icon: "/favicon.ico",
+  },
+  openGraph: {
+    images: [ogimage],
+    title,
+    description,
+    url: url,
+    siteName: sitename,
+    locale: "en_US",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    images: [ogimage],
+    title,
+    description,
+  },
+};
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className="h-full">
+      {children}
+    </html>
+  );
+}

app/robots.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ Allow: /api/og/*

app/share/[id]/layout.tsx ADDED Viewed

	@@ -0,0 +1,3 @@

+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <body className="flex min-h-full flex-col">{children}</body>;
+}

app/share/[id]/page.tsx ADDED Viewed

	@@ -0,0 +1,52 @@

+import { notFound } from "next/navigation";
+import CodeViewer from "@/components/code-viewer";
+import client from "@/lib/prisma";
+import type { Metadata } from "next";
+import { cache } from "react";
+export async function generateMetadata({
+  params,
+}: {
+  params: { id: string };
+}): Promise<Metadata> {
+  const generatedApp = await getGeneratedAppByID(params.id);
+  let prompt = generatedApp?.prompt;
+  if (typeof prompt !== "string") {
+    notFound();
+  }
+  let searchParams = new URLSearchParams();
+  searchParams.set("prompt", prompt);
+  return {
+    title: "An app generated on LlamaCoder.io",
+    description: `Prompt: ${generatedApp?.prompt}`,
+    openGraph: {
+      images: [`/api/og?${searchParams}`],
+    },
+  };
+}
+export default async function Page({ params }: { params: { id: string } }) {
+  // if process.env.DATABASE_URL is not set, throw an error
+  if (typeof params.id !== "string") {
+    notFound();
+  }
+  const generatedApp = await getGeneratedAppByID(params.id);
+  if (!generatedApp) {
+    return <div>App not found</div>;
+  }
+  return <CodeViewer code={generatedApp.code} />;
+}
+const getGeneratedAppByID = cache(async (id: string) => {
+  return client.generatedApp.findUnique({
+    where: {
+      id,
+    },
+  });
+});

components/Footer.tsx ADDED Viewed

	@@ -0,0 +1,57 @@

+import Link from "next/link";
+export default function Footer() {
+  return (
+    <footer className="mb-3 mt-5 flex h-16 w-full flex-col items-center justify-between space-y-3 px-3 pt-4 text-center sm:mb-0 sm:h-20 sm:flex-row sm:pt-2">
+      <div>
+        <div className="font-medium">
+          Built with{" "}
+          <a
+            href="https://ai.google.dev/gemini-api/docs"
+            className="font-semibold text-blue-600 underline-offset-4 transition hover:text-gray-700 hover:underline"
+            target="_blank"
+          >
+            Gemini API
+          </a>{" "}
+          and{" "}
+          <a
+            href="https://github.com/nutlope/llamacoder"
+            className="font-semibold text-blue-600 underline-offset-4 transition hover:text-gray-700 hover:underline"
+            target="_blank"
+          >
+            Inspired on Llamacoder
+          </a>
+          .
+        </div>
+      </div>
+      <div className="flex space-x-4 pb-4 sm:pb-0">
+        <Link
+          href="https://twitter.com/osanseviero"
+          className="group"
+          aria-label=""
+          target="_blank"
+        >
+          <svg
+            aria-hidden="true"
+            className="h-6 w-6 fill-gray-500 group-hover:fill-gray-700"
+          >
+            <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0 0 22 5.92a8.19 8.19 0 0 1-2.357.646 4.118 4.118 0 0 0 1.804-2.27 8.224 8.224 0 0 1-2.605.996 4.107 4.107 0 0 0-6.993 3.743 11.65 11.65 0 0 1-8.457-4.287 4.106 4.106 0 0 0 1.27 5.477A4.073 4.073 0 0 1 2.8 9.713v.052a4.105 4.105 0 0 0 3.292 4.022 4.093 4.093 0 0 1-1.853.07 4.108 4.108 0 0 0 3.834 2.85A8.233 8.233 0 0 1 2 18.407a11.615 11.615 0 0 0 6.29 1.84" />
+          </svg>
+        </Link>
+        <Link
+          href="https://github.com/osanseviero/geminicoder"
+          className="group"
+          aria-label="TaxPal on GitHub"
+          target="_blank"
+        >
+          <svg
+            aria-hidden="true"
+            className="h-6 w-6 fill-slate-500 group-hover:fill-slate-700"
+          >
+            <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2Z" />
+          </svg>
+        </Link>
+      </div>
+    </footer>
+  );
+}

components/Header.tsx ADDED Viewed

	@@ -0,0 +1,25 @@

+import Image from "next/image";
+import Link from "next/link";
+import logo from "../public/logo.svg";
+import GithubIcon from "./github-icon";
+export default function Header() {
+  return (
+    <header className="relative mx-auto mt-5 flex w-full items-center justify-center px-2 pb-7 sm:px-4">
+      <Link href="/" className="absolute flex items-center gap-2">
+        <Image alt="header text" src={logo} className="h-5 w-5" />
+        <h1 className="text-xl tracking-tight">
+          <span className="text-blue-600">Gemini</span>Coder
+        </h1>
+      </Link>
+      <a
+        href="https://github.com/osanseviero/geminicoder"
+        target="_blank"
+        className="ml-auto hidden items-center gap-3 rounded-2xl bg-white px-6 py-2 sm:flex"
+      >
+        <GithubIcon className="h-4 w-4" />
+        <span>GitHub Repo</span>
+      </a>
+    </header>
+  );
+}

components/code-viewer.css ADDED Viewed

	@@ -0,0 +1,7 @@

+.sp-preview-container {
+  @apply flex h-full w-full grow flex-col justify-center;
+}
+.sp-preview-iframe {
+  @apply grow;
+}

components/code-viewer.tsx ADDED Viewed

	@@ -0,0 +1,157 @@

+"use client";
+import * as shadcnComponents from "@/utils/shadcn";
+import { Sandpack } from "@codesandbox/sandpack-react";
+import {
+  SandpackPreview,
+  SandpackProvider,
+} from "@codesandbox/sandpack-react/unstyled";
+import { dracula as draculaTheme } from "@codesandbox/sandpack-themes";
+import dedent from "dedent";
+import "./code-viewer.css";
+export default function CodeViewer({
+  code,
+  showEditor = false,
+}: {
+  code: string;
+  showEditor?: boolean;
+}) {
+  return showEditor ? (
+    <Sandpack
+      options={{
+        showNavigator: true,
+        editorHeight: "80vh",
+        showTabs: false,
+        ...sharedOptions,
+      }}
+      files={{
+        "App.tsx": code,
+        ...sharedFiles,
+      }}
+      {...sharedProps}
+    />
+  ) : (
+    <SandpackProvider
+      files={{
+        "App.tsx": code,
+        ...sharedFiles,
+      }}
+      className="flex h-full w-full grow flex-col justify-center"
+      options={{ ...sharedOptions }}
+      {...sharedProps}
+    >
+      <SandpackPreview
+        className="flex h-full w-full grow flex-col justify-center p-4 md:pt-16"
+        showOpenInCodeSandbox={false}
+        showRefreshButton={false}
+      />
+    </SandpackProvider>
+  );
+}
+let sharedProps = {
+  template: "react-ts",
+  theme: draculaTheme,
+  customSetup: {
+    dependencies: {
+      "lucide-react": "latest",
+      recharts: "2.9.0",
+      "react-router-dom": "latest",
+      "@radix-ui/react-accordion": "^1.2.0",
+      "@radix-ui/react-alert-dialog": "^1.1.1",
+      "@radix-ui/react-aspect-ratio": "^1.1.0",
+      "@radix-ui/react-avatar": "^1.1.0",
+      "@radix-ui/react-checkbox": "^1.1.1",
+      "@radix-ui/react-collapsible": "^1.1.0",
+      "@radix-ui/react-dialog": "^1.1.1",
+      "@radix-ui/react-dropdown-menu": "^2.1.1",
+      "@radix-ui/react-hover-card": "^1.1.1",
+      "@radix-ui/react-label": "^2.1.0",
+      "@radix-ui/react-menubar": "^1.1.1",
+      "@radix-ui/react-navigation-menu": "^1.2.0",
+      "@radix-ui/react-popover": "^1.1.1",
+      "@radix-ui/react-progress": "^1.1.0",
+      "@radix-ui/react-radio-group": "^1.2.0",
+      "@radix-ui/react-select": "^2.1.1",
+      "@radix-ui/react-separator": "^1.1.0",
+      "@radix-ui/react-slider": "^1.2.0",
+      "@radix-ui/react-slot": "^1.1.0",
+      "@radix-ui/react-switch": "^1.1.0",
+      "@radix-ui/react-tabs": "^1.1.0",
+      "@radix-ui/react-toast": "^1.2.1",
+      "@radix-ui/react-toggle": "^1.1.0",
+      "@radix-ui/react-toggle-group": "^1.1.0",
+      "@radix-ui/react-tooltip": "^1.1.2",
+      "class-variance-authority": "^0.7.0",
+      clsx: "^2.1.1",
+      "date-fns": "^3.6.0",
+      "embla-carousel-react": "^8.1.8",
+      "react-day-picker": "^8.10.1",
+      "tailwind-merge": "^2.4.0",
+      "tailwindcss-animate": "^1.0.7",
+      vaul: "^0.9.1",
+    },
+  },
+} as const;
+let sharedOptions = {
+  externalResources: [
+    "https://unpkg.com/@tailwindcss/ui/dist/tailwind-ui.min.css",
+  ],
+};
+let sharedFiles = {
+  "/lib/utils.ts": shadcnComponents.utils,
+  "/components/ui/accordion.tsx": shadcnComponents.accordian,
+  "/components/ui/alert-dialog.tsx": shadcnComponents.alertDialog,
+  "/components/ui/alert.tsx": shadcnComponents.alert,
+  "/components/ui/avatar.tsx": shadcnComponents.avatar,
+  "/components/ui/badge.tsx": shadcnComponents.badge,
+  "/components/ui/breadcrumb.tsx": shadcnComponents.breadcrumb,
+  "/components/ui/button.tsx": shadcnComponents.button,
+  "/components/ui/calendar.tsx": shadcnComponents.calendar,
+  "/components/ui/card.tsx": shadcnComponents.card,
+  "/components/ui/carousel.tsx": shadcnComponents.carousel,
+  "/components/ui/checkbox.tsx": shadcnComponents.checkbox,
+  "/components/ui/collapsible.tsx": shadcnComponents.collapsible,
+  "/components/ui/dialog.tsx": shadcnComponents.dialog,
+  "/components/ui/drawer.tsx": shadcnComponents.drawer,
+  "/components/ui/dropdown-menu.tsx": shadcnComponents.dropdownMenu,
+  "/components/ui/input.tsx": shadcnComponents.input,
+  "/components/ui/label.tsx": shadcnComponents.label,
+  "/components/ui/menubar.tsx": shadcnComponents.menuBar,
+  "/components/ui/navigation-menu.tsx": shadcnComponents.navigationMenu,
+  "/components/ui/pagination.tsx": shadcnComponents.pagination,
+  "/components/ui/popover.tsx": shadcnComponents.popover,
+  "/components/ui/progress.tsx": shadcnComponents.progress,
+  "/components/ui/radio-group.tsx": shadcnComponents.radioGroup,
+  "/components/ui/select.tsx": shadcnComponents.select,
+  "/components/ui/separator.tsx": shadcnComponents.separator,
+  "/components/ui/skeleton.tsx": shadcnComponents.skeleton,
+  "/components/ui/slider.tsx": shadcnComponents.slider,
+  "/components/ui/switch.tsx": shadcnComponents.switchComponent,
+  "/components/ui/table.tsx": shadcnComponents.table,
+  "/components/ui/tabs.tsx": shadcnComponents.tabs,
+  "/components/ui/textarea.tsx": shadcnComponents.textarea,
+  "/components/ui/toast.tsx": shadcnComponents.toast,
+  "/components/ui/toaster.tsx": shadcnComponents.toaster,
+  "/components/ui/toggle-group.tsx": shadcnComponents.toggleGroup,
+  "/components/ui/toggle.tsx": shadcnComponents.toggle,
+  "/components/ui/tooltip.tsx": shadcnComponents.tooltip,
+  "/components/ui/use-toast.tsx": shadcnComponents.useToast,
+  "/public/index.html": dedent`
+    <!DOCTYPE html>
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Document</title>
+        <script src="https://cdn.tailwindcss.com"></script>
+      </head>
+      <body>
+        <div id="root"></div>
+      </body>
+    </html>
+  `,
+};

components/github-icon.tsx ADDED Viewed

	@@ -0,0 +1,19 @@

+export default function GithubIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width={16}
+      height={16}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 0C3.582 0 0 3.672 0 8.203c0 3.623 2.292 6.699 5.471 7.783.4.075.546-.178.546-.396 0-.194-.007-.71-.01-1.394-2.226.495-2.696-1.1-2.696-1.1-.363-.948-.888-1.2-.888-1.2-.726-.508.055-.499.055-.499.803.058 1.225.845 1.225.845.714 1.253 1.873.891 2.328.682.074-.53.28-.891.509-1.096-1.776-.207-3.644-.911-3.644-4.054 0-.895.312-1.628.823-2.201-.082-.208-.357-1.042.079-2.17 0 0 .672-.222 2.2.84A7.485 7.485 0 018 3.967c.68.003 1.364.094 2.003.276 1.527-1.062 2.198-.841 2.198-.841.437 1.129.161 1.963.08 2.17.512.574.822 1.307.822 2.202 0 3.15-1.871 3.844-3.653 4.048.288.253.543.753.543 1.519 0 1.095-.01 1.98-.01 2.25 0 .219.144.474.55.394a8.031 8.031 0 003.96-2.989A8.337 8.337 0 0016 8.203C16 3.672 12.418 0 8 0z"
+        fill="#000"
+      />
+    </svg>
+  );
+}

components/loading-dots.module.css ADDED Viewed

	@@ -0,0 +1,69 @@

+.loading {
+  display: inline-flex;
+  align-items: center;
+}
+.loading .spacer {
+  margin-right: 2px;
+}
+.loading span {
+  animation-name: blink;
+  animation-duration: 1.4s;
+  animation-iteration-count: infinite;
+  animation-fill-mode: both;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  display: inline-block;
+  margin: 0 1px;
+}
+.loading span:nth-of-type(2) {
+  animation-delay: 0.2s;
+}
+.loading span:nth-of-type(3) {
+  animation-delay: 0.4s;
+}
+.loading2 {
+  display: inline-flex;
+  align-items: center;
+}
+.loading2 .spacer {
+  margin-right: 2px;
+}
+.loading2 span {
+  animation-name: blink;
+  animation-duration: 1.4s;
+  animation-iteration-count: infinite;
+  animation-fill-mode: both;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  display: inline-block;
+  margin: 0 1px;
+}
+.loading2 span:nth-of-type(2) {
+  animation-delay: 0.2s;
+}
+.loading2 span:nth-of-type(3) {
+  animation-delay: 0.4s;
+}
+@keyframes blink {
+  0% {
+    opacity: 0.2;
+  }
+  20% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.2;
+  }
+}

components/loading-dots.tsx ADDED Viewed

	@@ -0,0 +1,17 @@

+import styles from "./loading-dots.module.css";
+export default function LoadingDots({
+  color = "#000",
+  style = "small",
+}: {
+  color: string;
+  style: string;
+}) {
+  return (
+    <span className={style == "small" ? styles.loading2 : styles.loading}>
+      <span style={{ backgroundColor: color }} />
+      <span style={{ backgroundColor: color }} />
+      <span style={{ backgroundColor: color }} />
+    </span>
+  );
+}

hooks/use-scroll-to.ts ADDED Viewed

	@@ -0,0 +1,24 @@

+import { animate, ValueAnimationTransition } from "framer-motion";
+import { useRef } from "react";
+export function useScrollTo() {
+  let ref = useRef<HTMLDivElement>(null);
+  function scrollTo(options: ValueAnimationTransition = {}) {
+    if (!ref.current) return;
+    let defaultOptions: ValueAnimationTransition = {
+      type: "spring",
+      bounce: 0,
+      duration: 0.6,
+    };
+    animate(window.scrollY, ref.current.offsetTop, {
+      ...defaultOptions,
+      ...options,
+      onUpdate: (latest) => window.scrollTo({ top: latest }),
+    });
+  }
+  return [ref, scrollTo] as const;
+}

lib/prisma.ts ADDED Viewed

	@@ -0,0 +1,10 @@

+import { PrismaClient } from "@prisma/client";
+declare global {
+  var prisma: PrismaClient | undefined;
+}
+const client = globalThis.prisma || new PrismaClient();
+if (process.env.NODE_ENV !== "production") globalThis.prisma = client;
+export default client;

next-env.d.ts ADDED Viewed

	@@ -0,0 +1,5 @@

+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.mjs ADDED Viewed

	@@ -0,0 +1,4 @@

+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+export default nextConfig;

package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

package.json ADDED Viewed

	@@ -0,0 +1,45 @@

+{
+  "name": "llamacoder-new",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "prisma generate && prisma migrate deploy && next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@codesandbox/sandpack-react": "^2.18.2",
+    "@codesandbox/sandpack-themes": "^2.0.21",
+    "@conform-to/zod": "^1.1.5",
+    "@google/generative-ai": "^0.21.0",
+    "@heroicons/react": "^2.1.5",
+    "@prisma/client": "^5.18.0",
+    "@radix-ui/react-radio-group": "^1.2.0",
+    "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.2",
+    "@vercel/og": "^0.6.2",
+    "dedent": "^1.5.3",
+    "eventsource-parser": "^1.1.2",
+    "framer-motion": "^11.3.19",
+    "next": "14.2.5",
+    "react": "^18",
+    "react-dom": "^18",
+    "sonner": "^1.5.0",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.3",
+    "postcss": "^8",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.5",
+    "prisma": "^5.18.0",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs ADDED Viewed

	@@ -0,0 +1,8 @@

+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+export default config;

prisma/migrations/20240808195804_first/migration.sql ADDED Viewed

	@@ -0,0 +1,13 @@

+-- CreateTable
+CREATE TABLE "GeneratedApp" (
+    "id" TEXT NOT NULL,
+    "model" TEXT NOT NULL,
+    "prompt" TEXT NOT NULL,
+    "code" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    CONSTRAINT "GeneratedApp_pkey" PRIMARY KEY ("id")
+);
+-- CreateIndex
+CREATE INDEX "GeneratedApp_id_idx" ON "GeneratedApp"("id");

prisma/migrations/migration_lock.toml ADDED Viewed

	@@ -0,0 +1,3 @@

+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "postgresql"

prisma/schema.prisma ADDED Viewed

	@@ -0,0 +1,18 @@

+generator client {
+  provider = "prisma-client-js"
+}
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+model GeneratedApp {
+  id        String   @id @default(nanoid(5))
+  model     String
+  prompt    String
+  code      String
+  createdAt DateTime @default(now())
+  @@index([id])
+}

public/Aeonik/Aeonik-Bold.ttf ADDED Viewed

Binary file (101 kB). View file

public/Aeonik/Aeonik-Medium.ttf ADDED Viewed

Binary file (99.6 kB). View file

public/Aeonik/Aeonik-Regular.ttf ADDED Viewed

Binary file (98.7 kB). View file

public/Aeonik/AeonikFono-Bold.otf ADDED Viewed

Binary file (64.5 kB). View file

public/Aeonik/AeonikFono-Regular.otf ADDED Viewed

Binary file (62.1 kB). View file

public/Aeonik/AeonikMono-Regular.otf ADDED Viewed

Binary file (50.4 kB). View file

public/cssIcon.png ADDED Viewed

public/favicon.ico ADDED Viewed

public/halo.png ADDED Viewed

Git LFS Details

SHA256: aba99f79264171859234983993d1a0ccf0ff15e9ac7ecc90ebcc084107dc4d6f
Pointer size: 132 Bytes
Size of remote file: 2.57 MB

public/logo.svg ADDED Viewed

tailwind.config.ts ADDED Viewed

	@@ -0,0 +1,25 @@

+import type { Config } from "tailwindcss";
+import colors from "tailwindcss/colors";
+import defaultTheme from "tailwindcss/defaultTheme";
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        brand: "#E1E7EC",
+        gray: colors.slate,
+      },
+      fontFamily: {
+        sans: ['"Aeonik"', ...defaultTheme.fontFamily.sans],
+      },
+    },
+  },
+};
+export default config;

tsconfig.json ADDED Viewed

	@@ -0,0 +1,26 @@

+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

utils/domain.ts ADDED Viewed

	@@ -0,0 +1,10 @@

+export const domain =
+  process.env.NEXT_PUBLIC_VERCEL_ENV === "production"
+    ? "https://llamacoder.together.ai"
+    : process.env.VERCEL_BRANCH_URL
+      ? `https://${process.env.VERCEL_BRANCH_URL}`
+      : process.env.NEXT_PUBLIC_VERCEL_URL
+        ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
+        : process.env.NEXT_PUBLIC_DEVELOPMENT_URL
+          ? process.env.NEXT_PUBLIC_DEVELOPMENT_URL
+          : "http://localhost:3000";

utils/shadcn-docs/avatar.tsx ADDED Viewed

	@@ -0,0 +1,12 @@

+export const name = "Avatar";
+export const importDocs = `
+import { Avatar, AvatarFallback, AvatarImage } from "/components/ui/avatar";
+`;
+export const usageDocs = `
+<Avatar>
+  <AvatarImage src="https://github.com/nutlope.png" />
+  <AvatarFallback>CN</AvatarFallback>
+</Avatar>
+`;

utils/shadcn-docs/button.tsx ADDED Viewed

	@@ -0,0 +1,14 @@

+export const name = "Button";
+export const importDocs = `
+import { Button } from "/components/ui/button"
+`;
+export const usageDocs = `
+<Button>A normal button</Button>
+<Button variant='secondary'>Button</Button>
+<Button variant='destructive'>Button</Button>
+<Button variant='outline'>Button</Button>
+<Button variant='ghost'>Button</Button>
+<Button variant='link'>Button</Button>
+`;

utils/shadcn-docs/card.tsx ADDED Viewed

	@@ -0,0 +1,27 @@

+export const name = "Card";
+export const importDocs = `
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "/components/ui/card"
+ `;
+export const usageDocs = `
+<Card>
+  <CardHeader>
+    <CardTitle>Card Title</CardTitle>
+    <CardDescription>Card Description</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p>Card Content</p>
+  </CardContent>
+  <CardFooter>
+    <p>Card Footer</p>
+  </CardFooter>
+</Card>
+`;

utils/shadcn-docs/checkbox.tsx ADDED Viewed

	@@ -0,0 +1,9 @@

+export const name = "Checkbox";
+export const importDocs = `
+import { Checkbox } from "/components/ui/checkbox"
+`;
+export const usageDocs = `
+<Checkbox />
+`;

utils/shadcn-docs/index.ts ADDED Viewed

	@@ -0,0 +1,23 @@

+import * as Avatar from "./avatar";
+import * as Button from "./button";
+import * as Card from "./card";
+// import * as Checkbox from "./checkbox";
+import * as Input from "./input";
+import * as Label from "./label";
+import * as RadioGroup from "./radio-group";
+import * as Select from "./select";
+import * as Textarea from "./textarea";
+const shadcnDocs = [
+  Avatar,
+  Button,
+  Card,
+  // Checkbox,
+  Input,
+  Label,
+  RadioGroup,
+  Select,
+  Textarea,
+];
+export default shadcnDocs;

utils/shadcn-docs/input.tsx ADDED Viewed

	@@ -0,0 +1,9 @@

+export const name = "Input";
+export const importDocs = `
+import { Input } from "/components/ui/input"
+`;
+export const usageDocs = `
+<Input />
+`;