Skip to content

Commit 803904b

Browse files
AshutoshDM1AshutoshDM1
committed
workspace v0.8.0
1 parent 34bc643 commit 803904b

19 files changed

Lines changed: 762 additions & 105 deletions

‎app/layout.tsx‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import type { Metadata } from "next";
22
import "./globals.css";
33
import { Providers } from "./providers";
4-
import { ThemeProvider } from "next-themes";
5-
64

75
export const metadata: Metadata = {
86
title: "CodeGen",
@@ -20,14 +18,7 @@ export default function RootLayout({
2018
return (
2119
<html lang="en" suppressHydrationWarning>
2220
<body suppressHydrationWarning>
23-
<ThemeProvider
24-
attribute="class"
25-
defaultTheme="dark"
26-
enableSystem={true}
27-
disableTransitionOnChange
28-
>
29-
<Providers>{children}</Providers>
30-
</ThemeProvider>
21+
<Providers>{children}</Providers>
3122
</body>
3223
</html>
3324
);

‎app/page.tsx‎

Lines changed: 17 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,23 @@
1-
"use client";
2-
import ReactMarkdown from "react-markdown";
3-
import remarkGfm from "remark-gfm";
4-
import { useChatStore } from "./store/chatStore";
1+
import Scene from "@/components/3d-sence";
2+
import HeroSection from "@/components/HeroSection";
3+
import Navbar from "@/components/Navbar";
54

65
export default function Home() {
7-
const { messages, addMessage } = useChatStore();
8-
9-
const fetchData = async () => {
10-
try {
11-
const response = await fetch("http://localhost:4000/chat");
12-
const reader = response.body?.getReader();
13-
14-
if (!reader) {
15-
throw new Error("Failed to get reader from response");
16-
}
17-
18-
while (true) {
19-
const { done, value } = await reader.read();
20-
if (done) break;
21-
const chunk = new TextDecoder().decode(value);
22-
addMessage(chunk);
23-
}
24-
} catch (error) {
25-
console.error("Error fetching data:", error);
26-
}
27-
};
28-
296
return (
30-
<div className="p-4">
31-
<button
32-
className="bg-blue-500 hover:bg-blue-700 text-white p-2 rounded-md"
33-
onClick={fetchData}
7+
<>
8+
<main
9+
style={{
10+
background:
11+
"linear-gradient(160deg, rgba(0,255,252,1) 0%, rgba(0,157,155,1) 0%, rgba(0,59,58,1) 12%, rgba(0,0,0,1) 17%, rgba(0,0,0,1) 36%, rgba(0,0,0,1) 59%, rgba(0,0,0,1) 83%, rgba(20,112,60,1) 92%, rgba(23,128,68,1) 94%, rgba(29,164,87,1) 100%, rgba(45,253,135,1) 100%)",
12+
}}
13+
className="w-full flex flex-col bg-black"
3414
>
35-
Start Chat
36-
</button>
37-
<div className="mt-4 space-y-2 text-white bg-gray-700 p-4 rounded-md">
38-
<ReactMarkdown remarkPlugins={[remarkGfm]}>
39-
{messages.join("")}
40-
</ReactMarkdown>
41-
</div>
42-
</div>
15+
<Navbar />
16+
<div className="h-[95vh] w-full flex justify-center items-center overflow-hidden relative z-[10]">
17+
<HeroSection />
18+
<Scene />
19+
</div>
20+
</main>
21+
</>
4322
);
4423
}

‎app/providers.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
"use client";
22
import React from "react";
33
import { SessionProvider } from "next-auth/react";
4+
import { ThemeProvider } from "next-themes";
45
export const Providers = ({ children }: { children: React.ReactNode }) => {
5-
return <SessionProvider>{children}</SessionProvider>;
6+
return (
7+
<ThemeProvider
8+
attribute="class"
9+
defaultTheme="dark"
10+
>
11+
<SessionProvider>{children}</SessionProvider>
12+
</ThemeProvider>
13+
);
614
};

‎app/workspace/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import CodeEditor from "@/components/worspace/codeEditor";
66

77
const Dashboard = () => {
88
return (
9-
<div className="h-screen w-full">
9+
<div className="h-screen w-full ">
1010
<ResizablePanelGroup direction="horizontal" className="min-h-screen">
1111
{/* # This is the Sidebar */}
1212
<Sidebar />

‎components/3d-sence.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import Spline from "@splinetool/react-spline/next";
2+
export default function Scene() {
3+
return (
4+
<>
5+
<main>
6+
<Spline
7+
className="min-h-[90vh] w-full hidden 2xl:block absolute top-[3.5rem] right-0 z-[0] overflow-hidden"
8+
scene="https://prod.spline.design/M9ss7sIDs3HbL4gy/scene.splinecode"
9+
/>
10+
</main>
11+
</>
12+
);
13+
}

‎components/FileExplorer.tsx‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { ChevronRight, ChevronDown, File, Folder } from "lucide-react";
22
import { useState } from "react";
3+
import { motion, AnimatePresence } from "framer-motion";
34

45
interface FileItem {
56
name: string;
@@ -36,10 +37,21 @@ const FileTree = ({ item, depth = 0 }: FileTreeProps) => {
3637
{item.name}
3738
</span>
3839
</div>
39-
{isOpen &&
40-
item.children?.map((child, index) => (
41-
<FileTree key={index} item={child} depth={depth + 1} />
42-
))}
40+
<AnimatePresence initial={false}>
41+
{isOpen && item.children && (
42+
<motion.div
43+
initial={{ height: 0, opacity: 0 }}
44+
animate={{ height: "auto", opacity: 1 }}
45+
exit={{ height: 0, opacity: 0 }}
46+
transition={{ duration: 0.2 }}
47+
style={{ overflow: "hidden" }}
48+
>
49+
{item.children.map((child, index) => (
50+
<FileTree key={index} item={child} depth={depth + 1} />
51+
))}
52+
</motion.div>
53+
)}
54+
</AnimatePresence>
4355
</div>
4456
);
4557
};
@@ -61,9 +73,9 @@ const FileExplorer = () => {
6173
];
6274

6375
return (
64-
<div className="text-white h-full select-none ">
65-
<div className="p-2 px-3 text-sm text-neutral-400 border-b-[1.5px] border-border mb-2 ">
66-
Files
76+
<div className="text-white h-full select-none">
77+
<div className="p-2 px-3 text-sm text-neutral-200 border-b-[1.5px] border-border mb-2 ">
78+
File Explorer
6779
</div>
6880
{files.map((item, index) => (
6981
<FileTree key={index} item={item} />

‎components/HeroSection.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ const HeroSection: React.FC = () => {
1717
};
1818

1919
return (
20-
<div className="w-full flex flex-col justify-between items-center">
21-
<div className="text-center font-bold text-[40px] md:text-[55px] mt-5 md:mt-0 flex flex-col justify-between items-center text-white ">
20+
<div className="flex flex-col justify-between items-center relative z-[10] pointer-events-none ">
21+
<div className="text-center font-bold text-[40px] md:text-[85px] mt-5 md:mt-0 flex flex-col justify-between items-center text-white ">
2222
<div className="py-12 space-y-2">
2323
<h1>
2424
Your{" "}
@@ -46,7 +46,7 @@ const HeroSection: React.FC = () => {
4646
<div className="flex flex-wrap justify-center gap-4 mt-8">
4747
<button
4848
onClick={onClick}
49-
className="px-6 text-black h-12 flex justify-center items-center text-center font-sans font-medium text-[18px] bg-white/90 rounded-[20px] cursor-pointer hover:bg-white transition"
49+
className="px-6 text-black h-12 flex justify-center items-center text-center font-sans font-medium text-[18px] bg-white/90 rounded-[20px] cursor-pointer hover:bg-white transition pointer-events-auto"
5050
>
5151
{isLoading ? (
5252
<div className="w-4 h-4 border-2 border-[#121212] border-t-transparent rounded-full animate-spin" />
@@ -55,10 +55,7 @@ const HeroSection: React.FC = () => {
5555
)}
5656
</button>
5757

58-
<button
59-
onClick={() => router.push("/features")}
60-
className="px-6 h-12 flex justify-center items-center text-center font-sans font-medium text-[18px] border-2 border-white/20 text-white rounded-[20px] cursor-pointer hover:bg-white/10 transition"
61-
>
58+
<button className="px-6 h-12 flex justify-center items-center text-center font-sans font-medium text-[18px] border-2 border-white/20 text-white rounded-[20px] cursor-pointer pointer-events-auto hover:bg-white/10 transition">
6259
Explore Features
6360
</button>
6461
</div>

‎components/Navbar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ const Navbar: React.FC = () => {
2020
console.log(session?.user?.name);
2121
return (
2222
<>
23-
<div className="h-[4.5vh] w-full flex justify-center items-center select-none mt-5">
24-
<div className="h-full max-w-[43rem] mx-auto w-full flex justify-between items-center px-1 py-1 bg-[#000] text-white rounded-[25px] ">
23+
<div className="h-[4vh] w-full flex justify-center items-center select-none mt-[1vh] relative z-[10] ">
24+
<div className="h-full max-w-[43rem] mx-auto w-full flex justify-between items-center px-1 py-1 text-white rounded-[25px] backdrop-blur-sm ">
2525
<div className="font-[500] text-[20px] font-[Mona Sans] flex justify-center items-center gap-1 pl-2 cursor-pointer">
2626
<Image
2727
className="object-cover w-[33px] "

‎components/Toggle.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
"use client";
2+
import * as React from "react";
3+
import { Moon, Sun } from "lucide-react";
4+
import { useTheme } from "next-themes";
5+
import { Switch } from "@/components/ui/switch";
6+
7+
export function ToggleMode() {
8+
const { theme, setTheme } = useTheme();
9+
const [mounted, setMounted] = React.useState(false);
10+
11+
React.useEffect(() => {
12+
setMounted(true);
13+
}, []);
14+
15+
if (!mounted) return null;
16+
17+
const isDarkMode =
18+
theme === "dark" ||
19+
(theme === "system" &&
20+
window.matchMedia("(prefers-color-scheme: dark)").matches);
21+
22+
return (
23+
<div className="flex items-center md:gap-2 gap-0.5">
24+
<Sun
25+
className={`h-5 w-5 ${isDarkMode ? "text-primary" : "text-primary"}`}
26+
/>
27+
<Switch
28+
checked={isDarkMode}
29+
onCheckedChange={(checked) => setTheme(checked ? "dark" : "light")}
30+
/>
31+
<Moon
32+
className={`h-5 w-5 ${isDarkMode ? "text-primary" : "text-primary"}`}
33+
/>
34+
</div>
35+
);
36+
}

‎components/ai-code.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
"use client";
2+
import { useChatStore } from "@/app/store/chatStore";
3+
import ReactMarkdown from "react-markdown";
4+
import remarkGfm from "remark-gfm";
5+
6+
export default function Home() {
7+
const { messages, addMessage } = useChatStore();
8+
9+
const fetchData = async () => {
10+
try {
11+
const response = await fetch("http://localhost:4000/chat");
12+
const reader = response.body?.getReader();
13+
14+
if (!reader) {
15+
throw new Error("Failed to get reader from response");
16+
}
17+
18+
while (true) {
19+
const { done, value } = await reader.read();
20+
if (done) break;
21+
const chunk = new TextDecoder().decode(value);
22+
addMessage(chunk);
23+
}
24+
} catch (error) {
25+
console.error("Error fetching data:", error);
26+
}
27+
};
28+
29+
return (
30+
<div className="p-4">
31+
<button
32+
className="bg-blue-500 hover:bg-blue-700 text-white p-2 rounded-md"
33+
onClick={fetchData}
34+
>
35+
Start Chat
36+
</button>
37+
<div className="mt-4 space-y-2 text-white bg-gray-700 p-4 rounded-md">
38+
<ReactMarkdown remarkPlugins={[remarkGfm]}>
39+
{messages.join("")}
40+
</ReactMarkdown>
41+
</div>
42+
</div>
43+
);
44+
}

0 commit comments

Comments
 (0)