Skip to content

Commit 0cf5567

Browse files
charu1603charu1603
committed
initial setup done
0 parents  commit 0cf5567

18 files changed

+2319
-0
lines changed

‎codecanvas/.gitignore

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
.yarn/install-state.gz
8+
9+
# testing
10+
/coverage
11+
12+
# next.js
13+
/.next/
14+
/out/
15+
16+
# production
17+
/build
18+
19+
# misc
20+
.DS_Store
21+
*.pem
22+
23+
# debug
24+
npm-debug.log*
25+
yarn-debug.log*
26+
yarn-error.log*
27+
28+
# local env files
29+
.env*.local
30+
31+
# vercel
32+
.vercel
33+
34+
# typescript
35+
*.tsbuildinfo
36+
next-env.d.ts

‎codecanvas/README.md

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
2+
3+
## Getting Started
4+
5+
First, run the development server:
6+
7+
```bash
8+
npm run dev
9+
# or
10+
yarn dev
11+
# or
12+
pnpm dev
13+
# or
14+
bun dev
15+
```
16+
17+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18+
19+
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20+
21+
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
22+
23+
## Learn More
24+
25+
To learn more about Next.js, take a look at the following resources:
26+
27+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29+
30+
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
31+
32+
## Deploy on Vercel
33+
34+
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35+
36+
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

‎codecanvas/app/favicon.ico

25.3 KB
Binary file not shown.

‎codecanvas/app/fonts/GeistMonoVF.woff

66.3 KB
Binary file not shown.

‎codecanvas/app/fonts/GeistVF.woff

64.7 KB
Binary file not shown.

‎codecanvas/app/globals.css

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
body {
6+
background-color: #0d0d0d;
7+
color: #848484;
8+
}
9+
.code-editor{
10+
width: 100%;;
11+
12+
}
13+
.ace_scrollbar {
14+
display: none !important;
15+
}
16+
.ace_editor {
17+
background-color: rgba(0, 0, 0, 0.5);
18+
border-bottom-left-radius: 0.5rem;
19+
border-bottom-right-radius: 0.5rem;
20+
box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.2);
21+
22+
border: 2px solid rgba(249, 249, 249, 0.08);
23+
border-top: none;
24+
25+
font-weight: 500 !important;
26+
font-size: 17px !important;
27+
line-height: 1.5rem !important;
28+
}
29+
.ace_content {
30+
width: 100% !important;
31+
top: 12px !important;
32+
left: 12px !important;
33+
}
34+
35+
.ace_scroller {
36+
width: 100% !important;
37+
}

‎codecanvas/app/layout.tsx

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import type { Metadata } from "next";
2+
import localFont from "next/font/local";
3+
import "./globals.css";
4+
5+
const geistSans = localFont({
6+
src: "./fonts/GeistVF.woff",
7+
variable: "--font-geist-sans",
8+
weight: "100 900",
9+
});
10+
const geistMono = localFont({
11+
src: "./fonts/GeistMonoVF.woff",
12+
variable: "--font-geist-mono",
13+
weight: "100 900",
14+
});
15+
16+
export const metadata: Metadata = {
17+
title: "CodeCanvas",
18+
description: "Convert your code to images",
19+
};
20+
21+
export default function RootLayout({
22+
children,
23+
}: Readonly<{
24+
children: React.ReactNode;
25+
}>) {
26+
return (
27+
<html lang="en">
28+
<body
29+
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
30+
>
31+
{children}
32+
</body>
33+
</html>
34+
);
35+
}

‎codecanvas/app/page.tsx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
"use client"
2+
import Image from "next/image";
3+
import Canvas from '../components/Canvas';
4+
import { Languages } from "next/dist/lib/metadata/types/alternative-urls-types";
5+
import { useState } from "react";
6+
import SelectLanguage from "@/components/SelectLanguage";
7+
import { languages } from "@/utils/utility";
8+
export default function Home() {
9+
const [language , setlanguage] = useState(languages[0].name);
10+
11+
return (
12+
<main className="flex w-full ">
13+
<div className="w-[22%] bg-[#191919] text-white">
14+
<SelectLanguage />
15+
</div>
16+
<div className="w-[78%] ">
17+
<Canvas language={language}/>
18+
</div>
19+
</main>
20+
21+
);
22+
}

‎codecanvas/components/Canvas.tsx

+147
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
"use client"
2+
import React,{useState, useEffect} from 'react'
3+
import { Resizable } from 're-resizable'
4+
import AceEditor from 'react-ace';
5+
import "ace-builds/src-noconflict/theme-monokai";
6+
import "ace-builds/src-noconflict/theme-terminal";
7+
import "ace-builds/src-noconflict/theme-twilight";
8+
import "ace-builds/src-noconflict/mode-javascript";
9+
import "ace-builds/src-noconflict/mode-html";
10+
import "ace-builds/src-noconflict/mode-css";
11+
import "ace-builds/src-noconflict/mode-python";
12+
import "ace-builds/src-noconflict/mode-java";
13+
import "ace-builds/src-noconflict/mode-typescript";
14+
interface CanvasProps {
15+
language: string;
16+
theme: string;
17+
icon: string;
18+
background?: string;
19+
currentPadding?: string;
20+
21+
}
22+
function Canvas({
23+
24+
theme,
25+
language,
26+
icon,
27+
background,
28+
currentPadding,
29+
}: CanvasProps) {
30+
31+
const [width, setWidth] = React.useState(1000);
32+
const [height, setHeight] = React.useState<number | null>(500);
33+
const [title, setTitle] = React.useState("App");
34+
35+
36+
const [extension, setExtension] = React.useState(".js");
37+
38+
39+
40+
41+
const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
42+
// Extract the title without the extension
43+
const newTitle = e.target.value.split(".")[0];
44+
setTitle(newTitle);
45+
};
46+
47+
// @ts-ignore
48+
const handleResize = (evt, direction, ref, pos) => {
49+
const newHeight = ref.style.height;
50+
setHeight(parseInt(newHeight, 10));
51+
};
52+
53+
const updateSize = () => {
54+
setWidth(window.innerWidth);
55+
};
56+
57+
useEffect(() => {
58+
window.addEventListener("resize", updateSize);
59+
updateSize();
60+
return () => window.removeEventListener("resize", updateSize);
61+
}, []);
62+
63+
return (
64+
<Resizable minHeight={466} minWidth={510} maxHeight={1000} defaultSize={{
65+
width: width,
66+
height: height || 500,
67+
}}
68+
onResize={handleResize}
69+
className="resize-container relative"
70+
style={{
71+
background: background,
72+
}}>
73+
<div
74+
className="code-block"
75+
style={{
76+
padding: currentPadding,
77+
}}
78+
>
79+
80+
<div className="handle handle-top absolute left-1/2 translate-x-[-50%] top-[-4px] w-2 h-2
81+
rounded-full bg-slate-300 hover:bg-slate-50"
82+
></div>
83+
<div
84+
className="handle handle-bottom absolute left-1/2 bottom-[-4px] w-2 h-2 rounded-full
85+
bg-slate-300 hover:bg-slate-50 "
86+
></div>
87+
<div
88+
className="handle handle-left absolute left-[-4px] top-1/2 w-2 h-2 rounded-full
89+
bg-slate-300 hover:bg-slate-50 "
90+
></div>
91+
<div
92+
className="handle handle-right absolute right-[-4px] top-1/2 w-2 h-2 rounded-full
93+
bg-slate-300 hover:bg-slate-50 "
94+
></div>
95+
96+
<div
97+
className="
98+
code-title h-[52px] px-4 flex items-center justify-between
99+
bg-black bg-opacity-80"
100+
>
101+
<div className="dots flex items-center gap-1">
102+
<div className="w-3 h-3 rounded-full bg-[#ff5656]"></div>
103+
<div className="w-3 h-3 rounded-full bg-[#ffbc6a] "></div>
104+
<div className="w-3 h-3 rounded-full bg-[#67f772] "></div>
105+
</div>
106+
107+
<div className="input-contol w-full">
108+
<input
109+
type="text"
110+
value={`${title}${extension}`}
111+
onChange={(e) => handleTitleChange(e)}
112+
className="w-full text-[hsla(0,0%,100%,.6)] outline-none font-medium
113+
text-center bg-transparent"
114+
style={{
115+
lineHeight: "1.8rem",
116+
}}
117+
/>
118+
</div>
119+
120+
<div
121+
className="icon flex justify-center items-center p-1 bg-black
122+
bg-opacity-30 rounded-sm"
123+
>
124+
<img src={icon} className="w-[33px]" alt="" />
125+
</div>
126+
</div>
127+
<AceEditor
128+
value={"hello"}
129+
name="UNIQUE_ID_OF_DIV"
130+
fontSize={16}
131+
theme={theme}
132+
mode={language.toLocaleLowerCase()}
133+
showGutter={false}
134+
wrapEnabled={true}
135+
height={`calc(${height}px - ${currentPadding} - ${currentPadding} - 52px)`}
136+
showPrintMargin={false}
137+
highlightActiveLine={false}
138+
editorProps={{ $blockScrolling: true }}
139+
className="ace-editor-container"
140+
141+
/>
142+
</div>
143+
</Resizable>
144+
)
145+
}
146+
147+
export default Canvas

‎codecanvas/components/Footer.tsx

Whitespace-only changes.

‎codecanvas/components/SelectLanguage.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
2+
"use client";
3+
import React from "react";
4+
import { ChevronDown } from "lucide-react";
5+
import { languages } from "@/utils/utility";
6+
7+
interface SelectLanguageProps {
8+
language: string;
9+
setLanguage: (language: string) => void;
10+
seActiveIcon: (icon: string) => void;
11+
}
12+
const SelectLanguage = () => {
13+
return (
14+
<div>SelectLanguage</div>
15+
)
16+
}
17+
18+
export default SelectLanguage

‎codecanvas/next.config.mjs

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/** @type {import('next').NextConfig} */
2+
const nextConfig = {};
3+
4+
export default nextConfig;

0 commit comments

Comments
 (0)