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

style changes

Browse Source
This commit is contained in:
Ishaan Dey 2024-04-11 03:34:58 -04:00
parent 0d42bc6734
commit 135b8268bf
5 changed files with 33 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/code/[id]/page.tsx
View File

@ -1,4 +1,7 @@
"use client"
import Navbar from "@/components/navbar"
import { useClerk } from "@clerk/nextjs"
import dynamic from "next/dynamic"
const CodeEditor = dynamic(() => import("@/components/editor"), {
@ -6,11 +9,13 @@ const CodeEditor = dynamic(() => import("@/components/editor"), {
})
export default function CodePage() {
const clerk = useClerk()
return (
<div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background">
<Navbar />
<div className="w-screen flex grow">
<CodeEditor />
{clerk.loaded ? <CodeEditor /> : null}
</div>
</div>
)

BIN
assets/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 90 KiB

41
assets/logo.svg
View File

@ -1,22 +1,27 @@
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="512" height="512" rx="100" fill="url(#paint0_linear_1_21)"/>
<rect x="8" y="8" width="496" height="496" rx="94" fill="url(#paint1_linear_1_21)"/>
<path d="M150.5 388.5H339.5C346.661 388.5 353.528 385.655 358.592 380.592C363.655 375.529 366.5 368.661 366.5 361.5V186L299 118.5H177.5C170.339 118.5 163.472 121.345 158.408 126.408C153.345 131.472 150.5 138.339 150.5 145.5V199.5" stroke="white" stroke-width="16.2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M285.5 118.5V172.5C285.5 179.661 288.345 186.528 293.408 191.592C298.472 196.655 305.339 199.5 312.5 199.5H366.5" stroke="white" stroke-width="16.2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M150.5 253.5C146.92 253.5 143.486 254.922 140.954 257.454C138.422 259.986 137 263.42 137 267V280.5C137 284.08 135.578 287.514 133.046 290.046C130.514 292.578 127.08 294 123.5 294C127.08 294 130.514 295.422 133.046 297.954C135.578 300.486 137 303.92 137 307.5V321C137 324.58 138.422 328.014 140.954 330.546C143.486 333.078 146.92 334.5 150.5 334.5" stroke="white" stroke-width="16.2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M204.5 334.5C208.08 334.5 211.514 333.078 214.046 330.546C216.578 328.014 218 324.58 218 321V307.5C218 303.92 219.422 300.486 221.954 297.954C224.486 295.422 227.92 294 231.5 294C227.92 294 224.486 292.578 221.954 290.046C219.422 287.514 218 284.08 218 280.5V267C218 263.42 216.578 259.986 214.046 257.454C211.514 254.922 208.08 253.5 204.5 253.5" stroke="white" stroke-width="16.2" stroke-linecap="round" stroke-linejoin="round"/>
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="64" height="64" rx="14" fill="#14532D"/>
<g filter="url(#filter0_i_1_21)">
<rect x="2" y="2" width="60" height="60" rx="12" fill="url(#paint0_linear_1_21)"/>
<path d="M20.3125 46.6875H41.3125C42.1082 46.6875 42.8712 46.3714 43.4338 45.8088C43.9964 45.2462 44.3125 44.4832 44.3125 43.6875V24.1875L36.8125 16.6875H23.3125C22.5169 16.6875 21.7538 17.0036 21.1912 17.5662C20.6286 18.1288 20.3125 18.8919 20.3125 19.6875V25.6875" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M35.3125 16.6875V22.6875C35.3125 23.4832 35.6286 24.2462 36.1912 24.8088C36.7538 25.3714 37.5169 25.6875 38.3125 25.6875H44.3125" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20.3125 31.6875C19.9147 31.6875 19.5331 31.8455 19.2518 32.1268C18.9705 32.4081 18.8125 32.7897 18.8125 33.1875V34.6875C18.8125 35.0853 18.6545 35.4669 18.3732 35.7482C18.0919 36.0295 17.7103 36.1875 17.3125 36.1875C17.7103 36.1875 18.0919 36.3455 18.3732 36.6268C18.6545 36.9081 18.8125 37.2897 18.8125 37.6875V39.1875C18.8125 39.5853 18.9705 39.9669 19.2518 40.2482C19.5331 40.5295 19.9147 40.6875 20.3125 40.6875" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M26.3125 40.6875C26.7103 40.6875 27.0919 40.5295 27.3732 40.2482C27.6545 39.9669 27.8125 39.5853 27.8125 39.1875V37.6875C27.8125 37.2897 27.9705 36.9081 28.2518 36.6268C28.5331 36.3455 28.9147 36.1875 29.3125 36.1875C28.9147 36.1875 28.5331 36.0295 28.2518 35.7482C27.9705 35.4669 27.8125 35.0853 27.8125 34.6875V33.1875C27.8125 32.7897 27.6545 32.4081 27.3732 32.1268C27.0919 31.8455 26.7103 31.6875 26.3125 31.6875" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<linearGradient id="paint0_linear_1_21" x1="423.5" y1="-1.73873e-05" x2="169" y2="497" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="0.075" stop-color="#5F5F5F"/>
<stop offset="0.89" stop-color="#3F3F3F"/>
<stop offset="1" stop-color="#6A6A6A"/>
</linearGradient>
<linearGradient id="paint1_linear_1_21" x1="418.266" y1="7.99999" x2="256" y2="504" gradientUnits="userSpaceOnUse">
<stop stop-color="#393939"/>
<stop offset="0.08" stop-color="#282828"/>
<stop offset="0.5" stop-color="#191919"/>
<stop offset="1" stop-color="#0D0D0D"/>
<filter id="filter0_i_1_21" x="2" y="2" width="60" height="60" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_innerShadow_1_21"/>
<feOffset dy="3"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.52549 0 0 0 0 0.937255 0 0 0 0 0.67451 0 0 0 0.5 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow_1_21"/>
</filter>
<linearGradient id="paint0_linear_1_21" x1="32" y1="2.96774" x2="32" y2="62" gradientUnits="userSpaceOnUse">
<stop stop-color="#16A34A"/>
<stop offset="0.595" stop-color="#14532D"/>
</linearGradient>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

4
components/navbar/index.tsx
View File

@ -2,6 +2,7 @@ import Image from "next/image"
import Logo from "@/assets/logo.svg"
import { Input } from "../ui/input"
import { Pencil } from "lucide-react"
import { UserButton } from "@clerk/nextjs"
export default function Navbar() {
return (
@ -12,11 +13,12 @@ export default function Navbar() {
</button>
<div className="text-sm font-medium flex items-center">
My React Project{" "}
<div className="h-7 w-7 ml-1 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">
<Pencil className="w-4 h-4" />
</div>
</div>
</div>
<UserButton />
</div>
)
}

2
middleware.ts
View File

@ -5,5 +5,5 @@ export default authMiddleware({
})
export const config = {
matcher: ["/((?!.+.[w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
}