TNT-Flo/sandbox-web-ide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

landing

Browse Source
This commit is contained in:
Ishaan Dey 2024-04-11 05:14:10 -04:00
parent b49f49ca19
commit 3090176a88
10 changed files with 105 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/layout.tsx
View File

@ -1,14 +1,13 @@
import type { Metadata } from "next" import type { Metadata } from "next"
import { Inter } from "next/font/google" import { GeistSans } from "geist/font/sans"
import { GeistMono } from "geist/font/mono"
import "./globals.css" import "./globals.css"
import { ThemeProvider } from "@/components/layout/themeProvider" import { ThemeProvider } from "@/components/layout/themeProvider"
import { ClerkProvider } from "@clerk/nextjs" import { ClerkProvider } from "@clerk/nextjs"
const inter = Inter({ subsets: ["latin"] })
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Create Next App", title: "Sandbox",
description: "Generated by create next app", description: "A collaborative, AI-powered, auto-scaling code sandbox",
} }
export default function RootLayout({ export default function RootLayout({
@ -18,8 +17,8 @@ export default function RootLayout({
}>) { }>) {
return ( return (
<ClerkProvider> <ClerkProvider>
<html lang="en"> <html lang="en" className={`${GeistSans.variable} ${GeistMono.variable}`}>
<body className={inter.className}> <body>
<ThemeProvider <ThemeProvider
attribute="class" attribute="class"
defaultTheme="dark" defaultTheme="dark"

51
app/page.tsx
View File

@ -1,5 +1,54 @@
import Image from "next/image"
import Logo from "@/assets/logo.svg"
import XLogo from "@/assets/x.svg"
import { Button } from "@/components/ui/button"
import { ChevronRight } from "lucide-react"
import Link from "next/link"
export default function Home() { export default function Home() {
return ( return (
<div className="w-screen flex flex-col h-screen bg-background">test</div> <div className="w-screen h-screen flex justify-center overflow-hidden overscroll-none">
<div className="w-full max-w-screen-md px-8 flex flex-col items-center">
{/* <div className="w-full flex items-center justify-between py-8">
<div className="flex items-center font-medium">
<Image
src={Logo}
alt="Logo"
width={36}
height={36}
className="mr-2"
/>
</div>
<div className="flex items-center space-x-4">
<a href="https://www.x.com/ishaandey_" target="_blank">
<Image src={XLogo} alt="X Logo" width={20} height={20} />
</a>
</div>
</div> */}
<h1 className="text-2xl font-medium text-center mt-32">
A Collaborative, AI-Powered, Auto-Scaling Code Editor
</h1>
<div className="text-muted-foreground mt-4 text-center ">
Sandbox is an open-source cloud-based code editing environment with
custom AI code autocompletion and real-time collaboration. The
infrastructure runs on Docker and Kubernetes to scale automatically
based on resource usage.
</div>
<div className="mt-8 flex space-x-4">
<Link href="/sign-up">
<Button>Go To App</Button>
</Link>
<a
href="https://github.com/ishaan1013/sandbox"
target="_blank"
className="group h-9 px-4 py-2 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
>
GitHub Repository
<ChevronRight className="h-4 w-4 ml-1 transition-all group-hover:translate-x-1" />
</a>
</div>
<div className="aspect-video w-full rounded-lg bg-neutral-800 mt-12"></div>
</div>
</div>
) )
} }

3
assets/x.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="1200" height="1227" viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 430 B

2
components/editor/sidebar/index.tsx
View File

@ -64,7 +64,7 @@ const data: (TFile | TFolder)[] = [
export default function Sidebar() { export default function Sidebar() {
return ( return (
<div className="h-full w-56 flex flex-col text-sm items-start p-2"> <div className="h-full w-56 select-none flex flex-col text-sm items-start p-2">
<div className="flex w-full items-center justify-between h-8 mb-1 "> <div className="flex w-full items-center justify-between h-8 mb-1 ">
<div className="text-muted-foreground">EXPLORER</div> <div className="text-muted-foreground">EXPLORER</div>
<div className="flex space-x-1"> <div className="flex space-x-1">

17
components/navbar/index.tsx
View File

@ -1,16 +1,20 @@
import Image from "next/image" import Image from "next/image"
import Logo from "@/assets/logo.svg" import Logo from "@/assets/logo.svg"
import { Input } from "../ui/input"
import { Pencil } from "lucide-react" import { Pencil } from "lucide-react"
import { UserButton } from "@clerk/nextjs" import { UserButton } from "@clerk/nextjs"
import Link from "next/link"
import { dark } from "@clerk/themes"
export default function Navbar() { export default function Navbar() {
return ( return (
<div className="h-14 px-2 w-full flex items-center justify-between border-b border-border"> <div className="h-14 px-2 w-full flex items-center justify-between border-b border-border">
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
<button className="ring-offset-2 ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none rounded-sm"> <Link
href="/"
className="ring-offset-2 ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none rounded-sm"
>
<Image src={Logo} alt="Logo" width={36} height={36} /> <Image src={Logo} alt="Logo" width={36} height={36} />
</button> </Link>
<div className="text-sm font-medium flex items-center"> <div className="text-sm font-medium flex items-center">
My React Project{" "} My React Project{" "}
<div className="h-7 w-7 ml-2 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-md"> <div className="h-7 w-7 ml-2 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-md">
@ -18,7 +22,12 @@ export default function Navbar() {
</div> </div>
</div> </div>
</div> </div>
<UserButton /> <UserButton
appearance={{
baseTheme: dark,
}}
afterSignOutUrl="/"
/>
</div> </div>
) )
} }

3
middleware.ts
View File

@ -1,7 +1,8 @@
import { authMiddleware } from "@clerk/nextjs" import { authMiddleware } from "@clerk/nextjs"
export default authMiddleware({ export default authMiddleware({
// publicRoutes: (req) => !req.url.includes("/code"), publicRoutes: (req) =>
!req.url.includes("/dashboard") && !req.url.includes("/code"),
}) })
export const config = { export const config = {

12
next.config.mjs
View File

@ -1,4 +1,12 @@
/** @type {import('next').NextConfig} */ /** @type {import('next').NextConfig} */
const nextConfig = {}; const nextConfig = {
images: {
remotePatterns: [
{
hostname: "cdn.simpleicons.org",
},
],
},
}
export default nextConfig; export default nextConfig

9
package-lock.json generated
View File

@ -15,6 +15,7 @@
"@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-slot": "^1.0.2",
"class-variance-authority": "^0.7.0", "class-variance-authority": "^0.7.0",
"clsx": "^2.1.0", "clsx": "^2.1.0",
"geist": "^1.3.0",
"lucide-react": "^0.365.0", "lucide-react": "^0.365.0",
"monaco-themes": "^0.4.4", "monaco-themes": "^0.4.4",
"next": "14.1.3", "next": "14.1.3",
@ -1263,6 +1264,14 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/geist": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/geist/-/geist-1.3.0.tgz",
"integrity": "sha512-IoGBfcqVEYB4bEwsfHd35jF4+X9LHRPYZymHL4YOltHSs9LJa24DYs1Z7rEMQ/lsEvaAIc61Y9aUxgcJaQ8lrg==",
"peerDependencies": {
"next": ">=13.2.0 <15.0.0-0"
}
},
"node_modules/glob": { "node_modules/glob": {
"version": "10.3.10", "version": "10.3.10",
"resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz", "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",

1
package.json
View File

@ -16,6 +16,7 @@
"@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-slot": "^1.0.2",
"class-variance-authority": "^0.7.0", "class-variance-authority": "^0.7.0",
"clsx": "^2.1.0", "clsx": "^2.1.0",
"geist": "^1.3.0",
"lucide-react": "^0.365.0", "lucide-react": "^0.365.0",
"monaco-themes": "^0.4.4", "monaco-themes": "^0.4.4",
"next": "14.1.3", "next": "14.1.3",

12
tailwind.config.ts
View File

@ -3,10 +3,10 @@ import type { Config } from "tailwindcss"
const config = { const config = {
darkMode: ["class"], darkMode: ["class"],
content: [ content: [
'./pages/**/*.{ts,tsx}', "./pages/**/*.{ts,tsx}",
'./components/**/*.{ts,tsx}', "./components/**/*.{ts,tsx}",
'./app/**/*.{ts,tsx}', "./app/**/*.{ts,tsx}",
'./src/**/*.{ts,tsx}', "./src/**/*.{ts,tsx}",
], ],
prefix: "", prefix: "",
theme: { theme: {
@ -18,6 +18,10 @@ const config = {
}, },
}, },
extend: { extend: {
fontFamily: {
sans: ["var(--font-geist-sans)"],
mono: ["var(--font-geist-mono)"],
},
colors: { colors: {
border: "hsl(var(--border))", border: "hsl(var(--border))",
input: "hsl(var(--input))", input: "hsl(var(--input))",