diff --git a/www/package.json b/www/package.json index 8fefad4..03520d2 100644 --- a/www/package.json +++ b/www/package.json @@ -11,6 +11,7 @@ "dependencies": { "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-scroll-area": "^1.0.5", + "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-slot": "^1.0.2", "@tanstack/react-query": "^5.29.2", "@upstash/redis": "^1.30.0", diff --git a/www/src/app/page.tsx b/www/src/app/page.tsx index f53f40a..7f84701 100644 --- a/www/src/app/page.tsx +++ b/www/src/app/page.tsx @@ -242,9 +242,7 @@ export default async function Home() { id='api' className='w-full flex flex-col items-center mt-12 px-4'>

Make an API request

-
- -
+ diff --git a/www/src/components/Code.tsx b/www/src/components/Code.tsx index 4580efc..2873d06 100644 --- a/www/src/components/Code.tsx +++ b/www/src/components/Code.tsx @@ -1,11 +1,11 @@ 'use client' import { cn } from '@/lib/utils' -import { Highlight, themes } from 'prism-react-renderer' +import { Highlight, Language, themes } from 'prism-react-renderer' -const Code = ({ code }: { code: string }) => { +const Code = ({ code, language }: { code: string, language: Language }) => { return ( - + {({ className, style, tokens, getLineProps, getTokenProps }) => ( 
           {tokens.map((line, i) => {
diff --git a/www/src/components/CodeSection.tsx b/www/src/components/CodeSection.tsx
index ef45b75..229d551 100644
--- a/www/src/components/CodeSection.tsx
+++ b/www/src/components/CodeSection.tsx
@@ -1,22 +1,106 @@
-"use client"
+"use client";
 
-import Code from './Code'
-import { ScrollArea, ScrollBar } from './ui/scroll-area'
+import { Language } from "prism-react-renderer";
+import Code from "./Code";
+import { ScrollArea, ScrollBar } from "./ui/scroll-area";
+import { useState } from "react";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+const API_URL = 'https://vector.profanity.dev';
 
-const codeBlock = `const res = await fetch('https://vector.profanity.dev', {
-  method: 'POST',
-  headers: { 'Content-Type': 'application/json' },
-  body: JSON.stringify({ message }),
-})`
+const codeBlocks: Record = {
+  tsx: `const res = await fetch('${API_URL}', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ message }),
+  })`,
+  python: `import requests
 
-const CodeSection = () => {
-  return (
-    
-      
+res = requests.post(
+  '${API_URL}', 
+  json={'message': message}
+)`,
+  go: `import (
+  "bytes"
+  "encoding/json"
+  "net/http"
+  "log"
+)
 
-      
-    
-  )
+reqBody, err := json.Marshal(map[string]string{"message": message})
+if err != nil {
+  log.Fatal(err)
 }
 
-export default CodeSection
+res, err := http.Post(
+  '${API_URL}', 
+  "application/json", 
+  bytes.NewBuffer(reqBody)
+)
+
+if err != nil {
+  log.Fatal(err)
+}`,
+  java: `import java.net.URI;
+import java.net.http.HttpClient;
+import java.net.http.HttpRequest;
+import java.net.http.HttpResponse;
+import java.net.http.HttpRequest.BodyPublishers;
+
+HttpClient client = HttpClient.newHttpClient();
+HttpRequest request = HttpRequest.newBuilder()
+  .uri(URI.create('${API_URL}'))
+  .header("Content-Type", "application/json")
+  .POST(BodyPublishers.ofString("{\"message\": \"" + message + "\"}"))
+  .build();
+try {
+  HttpResponse response = client.send(
+    request, 
+    HttpResponse.BodyHandlers.ofString()
+  );
+} catch (Exception e) {
+  e.printStackTrace();
+}`,  
+};
+
+const CodeSection = () => {
+  const [language, setLanguage] = useState("tsx");
+  return (
+    <>
+      

+        
+      

+      

+        
+          {codeBlocks[language] !== undefined ? (	
+          
+          ) : (
+          
No code available for this language

+          )}
+          
+        
+      

+    
+  );
+};
+
+export default CodeSection;
diff --git a/www/src/components/ui/select.tsx b/www/src/components/ui/select.tsx
new file mode 100644
index 0000000..ac2a8f2
--- /dev/null
+++ b/www/src/components/ui/select.tsx
@@ -0,0 +1,164 @@
+"use client"
+
+import * as React from "react"
+import {
+  CaretSortIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+} from "@radix-ui/react-icons"
+import * as SelectPrimitive from "@radix-ui/react-select"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef,
+  React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+  span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    
+      
+    
+  
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef,
+  React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+  
+    
+  
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef,
+  React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+  
+    
+  
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef,
+  React.ComponentPropsWithoutRef
+>(({ className, children, position = "popper", ...props }, ref) => (
+  
+    
+      
+      
+        {children}
+      
+      
+    
+  
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef,
+  React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+  
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef,
+  React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+  
+    
+      
+        
+      
+    
+    {children}
+  
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef,
+  React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+  
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}