feat: added a check and a callout, only prisma or drizzle can be sele…

…cted

www/src/components/docs/exampleOptionForm.astro

@@ -4,7 +4,7 @@ const options = {
  prisma: "Prisma",
  tailwind: "Tailwind CSS",
  trpc: "tRPC",
- drizzle: "drizzle",
+ drizzle: "drizzle"
 };
 ---
 
@@ -24,7 +24,7 @@ const options = {
  "version": "1.0.0",
  "description": "My Next.js app",
  "scripts":{
- "dev": " echo 'y' | npx create-t3-app example-app --CI ${checkedInputs} && cd ./my-app && rm ../package.json " }
+ "dev": " echo 'y' | npx create-t3-app example-app --CI ${checkedInputs} && cd ./example-app && rm ../package.json " }
  }`,
  },
  settings: {
@@ -43,7 +43,7 @@ const options = {
  console.error("Error", error);
  }
  }
-
+ 
  function handleFormSubmit(e: Event) {
  e.preventDefault();
 
@@ -60,6 +60,20 @@ const options = {
 
  const form = document.getElementById("componentForm") as HTMLFormElement;
 
+ const prismaInput = document.getElementById('prisma') as HTMLInputElement;
+ const drizzleInput = document.getElementById('drizzle') as HTMLInputElement;
+
+ function handleCheckboxChange(e: Event) {
+ if (e.target === prismaInput && drizzleInput.checked) {
+ drizzleInput.checked = false;
+ } else if (e.target === drizzleInput && prismaInput.checked) {
+ prismaInput.checked = false;
+ }
+ }
+
+ prismaInput.addEventListener("change", handleCheckboxChange);
+ drizzleInput.addEventListener("change", handleCheckboxChange);
+
  form.addEventListener("submit", handleFormSubmit);
 </script>
 
@@ -75,7 +89,6 @@ const options = {
  id={code}
  type="checkbox"
  name={name}
- checked
  value={code}
  class="h-4 w-4"
  />

www/src/pages/en/examples.mdx

@@ -6,9 +6,13 @@ lang: en
 isMdx: true
 ---
 
-
+import Callout from "../../components/docs/callout.tsx";
 import Form from "../../components/docs/exampleOptionForm.astro";
 
 You can try out different combinations of technologies that create-t3-app offers. 
 
 <Form />
+
+<Callout type="info">
+ You cannot select `prisma` and `drizzle` at the same time.
+</Callout>