refactor folder
This commit is contained in:
Ishaan Dey
99
frontend/components/dashboard/index.tsx
Normal file
99
frontend/components/dashboard/index.tsx
Normal file
@ -0,0 +1,99 @@
|
||||
"use client"
|
||||
|
||||
import CustomButton from "@/components/ui/customButton"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Bolt,
|
||||
Clock,
|
||||
Code2,
|
||||
FolderDot,
|
||||
FolderOpenDot,
|
||||
Globe,
|
||||
HelpCircle,
|
||||
Plus,
|
||||
Settings,
|
||||
User,
|
||||
Users,
|
||||
} from "lucide-react"
|
||||
import { useState } from "react"
|
||||
import { Card } from "../ui/card"
|
||||
import ProjectCard from "./projectCard"
|
||||
|
||||
type TScreen = "projects" | "shared" | "settings" | "search"
|
||||
|
||||
export default function Dashboard() {
|
||||
const [screen, setScreen] = useState<TScreen>("projects")
|
||||
|
||||
const activeScreen = (s: TScreen) => {
|
||||
if (screen === s) return "justify-start"
|
||||
else return "justify-start font-normal text-muted-foreground"
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex grow w-full">
|
||||
<div className="w-56 shrink-0 border-r border-border p-4 justify-between flex flex-col">
|
||||
<div className="flex flex-col">
|
||||
<CustomButton className="mb-4">
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
New Project
|
||||
</CustomButton>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => setScreen("projects")}
|
||||
className={activeScreen("projects")}
|
||||
>
|
||||
<FolderDot className="w-4 h-4 mr-2" />
|
||||
My Projects
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => setScreen("shared")}
|
||||
className={activeScreen("shared")}
|
||||
>
|
||||
<Users className="w-4 h-4 mr-2" />
|
||||
Shared Rooms
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => setScreen("settings")}
|
||||
className={activeScreen("settings")}
|
||||
>
|
||||
<Settings className="w-4 h-4 mr-2" />
|
||||
Settings
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="justify-start font-normal text-muted-foreground"
|
||||
>
|
||||
<Code2 className="w-4 h-4 mr-2" />
|
||||
GitHub Repository
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="justify-start font-normal text-muted-foreground"
|
||||
>
|
||||
<HelpCircle className="w-4 h-4 mr-2" />
|
||||
About
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grow p-4 grid lg:grid-cols-4 xl:grid-cols-5 md:grid-cols-3 gap-4">
|
||||
<ProjectCard>
|
||||
<div className="font-medium flex items-center whitespace-nowrap w-full text-ellipsis overflow-hidden">
|
||||
React Project 1
|
||||
</div>
|
||||
<div className="flex flex-col text-muted-foreground space-y-0.5 text-sm">
|
||||
<div className="flex items-center">
|
||||
<Globe className="w-3 h-3 mr-2" /> Public
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Clock className="w-3 h-3 mr-2" /> 3d ago
|
||||
</div>
|
||||
</div>
|
||||
</ProjectCard>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
37
frontend/components/dashboard/navbar/index.tsx
Normal file
37
frontend/components/dashboard/navbar/index.tsx
Normal file
@ -0,0 +1,37 @@
|
||||
"use client"
|
||||
|
||||
import { UserButton } from "@clerk/nextjs"
|
||||
import { dark } from "@clerk/themes"
|
||||
import Image from "next/image"
|
||||
import Link from "next/link"
|
||||
import Logo from "@/assets/logo.svg"
|
||||
import { Input } from "../../ui/input"
|
||||
import { Search } from "lucide-react"
|
||||
import { Suspense, useCallback, useEffect, useState } from "react"
|
||||
import { useRouter, useSearchParams } from "next/navigation"
|
||||
import DashboardNavbarSearch from "./search"
|
||||
|
||||
export default function DashboardNavbar() {
|
||||
return (
|
||||
<div className="h-16 px-4 w-full flex items-center justify-between border-b border-border">
|
||||
<div className="flex items-center space-x-4">
|
||||
<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} />
|
||||
</Link>
|
||||
<div className="text-sm font-medium flex items-center">Sandbox</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<DashboardNavbarSearch />
|
||||
<UserButton
|
||||
appearance={{
|
||||
baseTheme: dark,
|
||||
}}
|
||||
afterSignOutUrl="/"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
36
frontend/components/dashboard/navbar/search.tsx
Normal file
36
frontend/components/dashboard/navbar/search.tsx
Normal file
@ -0,0 +1,36 @@
|
||||
"use client"
|
||||
|
||||
import { Input } from "../../ui/input"
|
||||
import { Search } from "lucide-react"
|
||||
import { useCallback, useEffect, useState } from "react"
|
||||
import { useRouter, useSearchParams } from "next/navigation"
|
||||
|
||||
export default function DashboardNavbarSearch() {
|
||||
const [search, setSearch] = useState("")
|
||||
const router = useRouter()
|
||||
|
||||
useEffect(() => {
|
||||
const delayDebounceFn = setTimeout(() => {
|
||||
console.log("SEARCH", search)
|
||||
if (search) {
|
||||
router.push(`/dashboard?q=${search}`)
|
||||
} else {
|
||||
router.push(`/dashboard`)
|
||||
}
|
||||
}, 300)
|
||||
|
||||
return () => clearTimeout(delayDebounceFn)
|
||||
}, [search])
|
||||
|
||||
return (
|
||||
<div className="relative h-9 w-44 flex items-center justify-start">
|
||||
<Search className="w-4 h-4 absolute left-2 text-muted-foreground" />
|
||||
<Input
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
placeholder="Search projects..."
|
||||
className="pl-8"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
22
frontend/components/dashboard/projectCard.tsx
Normal file
22
frontend/components/dashboard/projectCard.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
export default function ProjectCard({
|
||||
children,
|
||||
className,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
className?: string
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
tabIndex={0}
|
||||
className={cn(
|
||||
"rounded-lg border bg-card text-card-foreground shadow h-48 p-[1px] gradient-project-card-bg cursor-pointer transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
)}
|
||||
>
|
||||
<div className="rounded-[7px] p-4 h-full flex flex-col justify-between gradient-project-card">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
146
frontend/components/editor/index.tsx
Normal file
146
frontend/components/editor/index.tsx
Normal file
@ -0,0 +1,146 @@
|
||||
"use client"
|
||||
|
||||
import Editor, { OnMount } from "@monaco-editor/react"
|
||||
import monaco from "monaco-editor"
|
||||
import { useRef, useState } from "react"
|
||||
import theme from "./theme.json"
|
||||
|
||||
import {
|
||||
ResizableHandle,
|
||||
ResizablePanel,
|
||||
ResizablePanelGroup,
|
||||
} from "@/components/ui/resizable"
|
||||
import { Button } from "../ui/button"
|
||||
import {
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
RotateCcw,
|
||||
RotateCw,
|
||||
Terminal,
|
||||
TerminalSquare,
|
||||
X,
|
||||
} from "lucide-react"
|
||||
import Tab from "../ui/tab"
|
||||
import Sidebar from "./sidebar"
|
||||
|
||||
export default function CodeEditor() {
|
||||
const editorRef = useRef<null | monaco.editor.IStandaloneCodeEditor>(null)
|
||||
const [code, setCode] = useState([
|
||||
{
|
||||
language: "css",
|
||||
name: "style.css",
|
||||
value: `body { background-color: #282c34; color: white; }`,
|
||||
},
|
||||
{
|
||||
language: "html",
|
||||
name: "index.html",
|
||||
value: `<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello, world!</h1>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>`,
|
||||
},
|
||||
{
|
||||
language: "javascript",
|
||||
name: "script.js",
|
||||
value: `console.log("Hello, world!")`,
|
||||
},
|
||||
])
|
||||
|
||||
const handleEditorMount: OnMount = (editor, monaco) => {
|
||||
editorRef.current = editor
|
||||
|
||||
// import("monaco-themes/themes/Blackboard.json").then((data) => {
|
||||
// monaco.editor.defineTheme(
|
||||
// "Blackboard",
|
||||
// data as monaco.editor.IStandaloneThemeData
|
||||
// )
|
||||
// })
|
||||
// monaco.editor.setTheme("Blackboard")
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Sidebar />
|
||||
<ResizablePanelGroup direction="horizontal">
|
||||
<ResizablePanel
|
||||
className="p-2 flex flex-col"
|
||||
maxSize={75}
|
||||
minSize={30}
|
||||
defaultSize={60}
|
||||
>
|
||||
<div className="h-10 w-full flex gap-2">
|
||||
<Tab>index.html</Tab>
|
||||
<Tab>style.css</Tab>
|
||||
</div>
|
||||
<div className="grow w-full overflow-hidden rounded-md">
|
||||
<Editor
|
||||
height="100%"
|
||||
defaultLanguage="typescript"
|
||||
onMount={handleEditorMount}
|
||||
options={{
|
||||
minimap: {
|
||||
enabled: false,
|
||||
},
|
||||
padding: {
|
||||
bottom: 4,
|
||||
top: 4,
|
||||
},
|
||||
scrollBeyondLastLine: false,
|
||||
}}
|
||||
theme="vs-dark"
|
||||
/>
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
<ResizableHandle />
|
||||
<ResizablePanel defaultSize={40}>
|
||||
<ResizablePanelGroup direction="vertical">
|
||||
<ResizablePanel
|
||||
defaultSize={50}
|
||||
minSize={20}
|
||||
className="p-2 flex flex-col"
|
||||
>
|
||||
<div className="h-10 select-none w-full flex gap-2">
|
||||
<div className="h-8 rounded-md px-3 text-xs bg-secondary flex items-center w-full justify-between">
|
||||
Preview
|
||||
<div className="flex space-x-1 translate-x-1">
|
||||
<div className="p-0.5 h-5 w-5 ml-0.5 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm">
|
||||
<TerminalSquare className="w-4 h-4" />
|
||||
</div>
|
||||
<div className="p-0.5 h-5 w-5 ml-0.5 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm">
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
</div>
|
||||
<div className="p-0.5 h-5 w-5 ml-0.5 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm">
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</div>
|
||||
<div className="p-0.5 h-5 w-5 ml-0.5 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm">
|
||||
<RotateCw className="w-3 h-3" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full grow rounded-md bg-foreground"></div>
|
||||
</ResizablePanel>
|
||||
<ResizableHandle />
|
||||
<ResizablePanel
|
||||
defaultSize={50}
|
||||
minSize={20}
|
||||
className="p-2 flex flex-col"
|
||||
>
|
||||
<div className="h-10 w-full flex gap-2">
|
||||
<Tab>Node</Tab>
|
||||
<Tab>Console</Tab>
|
||||
</div>
|
||||
<div className="w-full grow rounded-md bg-secondary"></div>
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</>
|
||||
)
|
||||
}
|
||||
33
frontend/components/editor/navbar/index.tsx
Normal file
33
frontend/components/editor/navbar/index.tsx
Normal file
@ -0,0 +1,33 @@
|
||||
import Image from "next/image"
|
||||
import Logo from "@/assets/logo.svg"
|
||||
import { Pencil } from "lucide-react"
|
||||
import { UserButton } from "@clerk/nextjs"
|
||||
import Link from "next/link"
|
||||
import { dark } from "@clerk/themes"
|
||||
|
||||
export default function Navbar() {
|
||||
return (
|
||||
<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">
|
||||
<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} />
|
||||
</Link>
|
||||
<div className="text-sm font-medium flex items-center">
|
||||
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">
|
||||
<Pencil className="w-4 h-4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<UserButton
|
||||
appearance={{
|
||||
baseTheme: dark,
|
||||
}}
|
||||
afterSignOutUrl="/"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
20
frontend/components/editor/sidebar/file.tsx
Normal file
20
frontend/components/editor/sidebar/file.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
"use client"
|
||||
|
||||
import Image from "next/image"
|
||||
import { getIconForFile } from "vscode-icons-js"
|
||||
import { TFile } from "./types"
|
||||
|
||||
export default function SidebarFile({ data }: { data: TFile }) {
|
||||
return (
|
||||
<div className="w-full flex items-center h-7 px-1 transition-colors hover:bg-secondary rounded-sm cursor-pointer">
|
||||
<Image
|
||||
src={`/icons/${getIconForFile(data.name)}`}
|
||||
alt="File Icon"
|
||||
width={18}
|
||||
height={18}
|
||||
className="mr-2"
|
||||
/>
|
||||
{data.name}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
46
frontend/components/editor/sidebar/folder.tsx
Normal file
46
frontend/components/editor/sidebar/folder.tsx
Normal file
@ -0,0 +1,46 @@
|
||||
"use client"
|
||||
|
||||
import Image from "next/image"
|
||||
import { useState } from "react"
|
||||
import { getIconForFolder, getIconForOpenFolder } from "vscode-icons-js"
|
||||
import { TFolder } from "./types"
|
||||
import SidebarFile from "./file"
|
||||
|
||||
export default function SidebarFolder({ data }: { data: TFolder }) {
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
const folder = isOpen
|
||||
? getIconForOpenFolder(data.name)
|
||||
: getIconForFolder(data.name)
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
onClick={() => setIsOpen((prev) => !prev)}
|
||||
className="w-full flex items-center h-7 px-1 transition-colors hover:bg-secondary rounded-sm cursor-pointer"
|
||||
>
|
||||
<Image
|
||||
src={`/icons/${folder}`}
|
||||
alt="Folder icon"
|
||||
width={18}
|
||||
height={18}
|
||||
className="mr-2"
|
||||
/>
|
||||
{data.name}
|
||||
</div>
|
||||
{isOpen ? (
|
||||
<div className="flex w-full items-stretch">
|
||||
<div className="w-[1px] bg-border mx-2 h-full"></div>
|
||||
<div className="flex flex-col grow">
|
||||
{data.children.map((child) =>
|
||||
child.type === "file" ? (
|
||||
<SidebarFile key={child.id} data={child} />
|
||||
) : (
|
||||
<SidebarFolder key={child.id} data={child} />
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
)
|
||||
}
|
||||
95
frontend/components/editor/sidebar/index.tsx
Normal file
95
frontend/components/editor/sidebar/index.tsx
Normal file
@ -0,0 +1,95 @@
|
||||
import { FilePlus, FolderPlus, Search } from "lucide-react"
|
||||
import SidebarFile from "./file"
|
||||
import SidebarFolder from "./folder"
|
||||
import { TFile, TFolder } from "./types"
|
||||
|
||||
const data: (TFile | TFolder)[] = [
|
||||
{
|
||||
id: "index.tsx",
|
||||
type: "file",
|
||||
name: "index.tsx",
|
||||
},
|
||||
{
|
||||
id: "components",
|
||||
type: "folder",
|
||||
name: "components",
|
||||
children: [
|
||||
{
|
||||
id: "navbar.tsx",
|
||||
type: "file",
|
||||
name: "navbar.tsx",
|
||||
},
|
||||
{
|
||||
id: "ui",
|
||||
type: "folder",
|
||||
name: "ui",
|
||||
children: [
|
||||
{
|
||||
id: "Button.tsx",
|
||||
type: "file",
|
||||
name: "Button.tsx",
|
||||
},
|
||||
{
|
||||
id: "Input.tsx",
|
||||
type: "file",
|
||||
name: "Input.tsx",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "App.tsx",
|
||||
type: "file",
|
||||
name: "App.tsx",
|
||||
},
|
||||
{
|
||||
id: "styles",
|
||||
type: "folder",
|
||||
name: "styles",
|
||||
children: [
|
||||
{
|
||||
id: "style.css",
|
||||
type: "file",
|
||||
name: "style.css",
|
||||
},
|
||||
{
|
||||
id: "index.css",
|
||||
type: "file",
|
||||
name: "index.css",
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
export default function Sidebar() {
|
||||
return (
|
||||
<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="text-muted-foreground">EXPLORER</div>
|
||||
<div className="flex space-x-1">
|
||||
<div className="h-6 w-6 text-muted-foreground ml-0.5 flex items-center justify-center translate-x-1 transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm">
|
||||
<FilePlus className="w-4 h-4" />
|
||||
</div>
|
||||
<div className="h-6 w-6 text-muted-foreground ml-0.5 flex items-center justify-center translate-x-1 transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm">
|
||||
<FolderPlus className="w-4 h-4" />
|
||||
</div>
|
||||
<div className="h-6 w-6 text-muted-foreground ml-0.5 flex items-center justify-center translate-x-1 transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm">
|
||||
<Search className="w-4 h-4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full mt-1 flex flex-col">
|
||||
{/* <SidebarFile name="index.tsx" />
|
||||
<SidebarFolder name="styles" /> */}
|
||||
{data.map((child) =>
|
||||
child.type === "file" ? (
|
||||
<SidebarFile key={child.id} data={child} />
|
||||
) : (
|
||||
<SidebarFolder key={child.id} data={child} />
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
12
frontend/components/editor/sidebar/types.ts
Normal file
12
frontend/components/editor/sidebar/types.ts
Normal file
@ -0,0 +1,12 @@
|
||||
export type TFolder = {
|
||||
id: string
|
||||
type: "folder"
|
||||
name: string
|
||||
children: (TFile | TFolder)[]
|
||||
}
|
||||
|
||||
export type TFile = {
|
||||
id: string
|
||||
type: "file"
|
||||
name: string
|
||||
}
|
||||
697
frontend/components/editor/theme.json
Normal file
697
frontend/components/editor/theme.json
Normal file
@ -0,0 +1,697 @@
|
||||
{
|
||||
"inherit": true,
|
||||
"base": "vs-dark",
|
||||
"colors": {
|
||||
"editor.background": "101010",
|
||||
"editor.foreground": "FFFFFF",
|
||||
"editor.selectionBackground": "FFFFFF25",
|
||||
"editor.selectionHighlightBackground": "FFFFFF25",
|
||||
"editorLineNumber.foreground": "505050",
|
||||
"editorWidget.background": "101010",
|
||||
"editorWarning.foreground": "FFC799",
|
||||
"editorError.foreground": "FF8080",
|
||||
"editorOverviewRuler.border": "101010",
|
||||
"editorGutter.addedBackground": "99FFE4",
|
||||
"editorGutter.deletedBackground": "FF8080",
|
||||
"editorGutter.modifiedBackground": "FFC799",
|
||||
"diffEditor.insertedTextBackground": "99FFE440",
|
||||
"diffEditor.insertedLineBackground": "99FFE440",
|
||||
"diffEditor.removedTextBackground": "FF808040",
|
||||
"diffEditor.removedLineBackground": "FF808040",
|
||||
"sideBar.background": "101010",
|
||||
"sideBarTitle.foreground": "A0A0A0",
|
||||
"sideBarSectionHeader.foreground": "A0A0A0",
|
||||
"sideBarSectionHeader.background": "101010",
|
||||
"activityBar.background": "101010",
|
||||
"activityBar.foreground": "A0A0A0",
|
||||
"activityBarBadge.background": "FFC799",
|
||||
"activityBarBadge.foreground": "000",
|
||||
"titleBar.activeBackground": "101010",
|
||||
"titleBar.inactiveBackground": "101010",
|
||||
"titleBar.activeForeground": "7E7E7E",
|
||||
"titleBar.inactiveForeground": "707070",
|
||||
"tab.activeBorderTop": "FFC799",
|
||||
"statusBar.debuggingForeground": "FFFFFF",
|
||||
"statusBar.debuggingBackground": "FF7300",
|
||||
"statusBar.background": "101010",
|
||||
"statusBar.foreground": "A0A0A0",
|
||||
"statusBarItem.remoteBackground": "FFC799",
|
||||
"statusBarItem.remoteForeground": "000",
|
||||
"list.activeSelectionForeground": "FFC799",
|
||||
"list.inactiveSelectionBackground": "232323",
|
||||
"badge.background": "FFC799",
|
||||
"badge.foreground": "000",
|
||||
"button.background": "FFC799",
|
||||
"button.hoverBackground": "FFCFA8",
|
||||
"button.foreground": "000",
|
||||
"focusBorder": "FFC799",
|
||||
"icon.foreground": "A0A0A0",
|
||||
"input.background": "1C1C1C",
|
||||
"list.activeSelectionBackground": "232323",
|
||||
"list.hoverBackground": "282828",
|
||||
"list.errorForeground": "FF8080",
|
||||
"list.highlightForeground": "FFC799",
|
||||
"selection.background": "666",
|
||||
"editorBracketHighlight.foreground1": "A0A0A0",
|
||||
"editorBracketHighlight.foreground2": "A0A0A0",
|
||||
"editorBracketHighlight.foreground3": "A0A0A0",
|
||||
"editorBracketHighlight.foreground4": "A0A0A0",
|
||||
"editorBracketHighlight.foreground5": "A0A0A0",
|
||||
"editorBracketHighlight.foreground6": "A0A0A0",
|
||||
"editorBracketHighlight.unexpectedBracket.foreground": "FF8080",
|
||||
"textLink.foreground": "FFC799",
|
||||
"textLink.activeForeground": "FFCFA8",
|
||||
"editorHoverWidget.background": "161616",
|
||||
"editorHoverWidget.border": "282828",
|
||||
"scrollbarSlider.background": "34343480",
|
||||
"scrollbarSlider.hoverBackground": "343434",
|
||||
"gitDecoration.addedResourceForeground": "99FFE4",
|
||||
"gitDecoration.untrackedResourceForeground": "99FFE4",
|
||||
"gitDecoration.modifiedResourceForeground": "FFC799",
|
||||
"gitDecoration.deletedResourceForeground": "FF8080",
|
||||
"gitDecoration.ignoredResourceForeground": "595959",
|
||||
"gitDecoration.conflictingResourceForeground": "FF8080",
|
||||
"gitDecoration.submoduleResourceForeground": "A0A0A0",
|
||||
"settings.modifiedItemIndicator": "FFC799",
|
||||
"terminal.ansiBlack": "101010",
|
||||
"terminal.ansiBlue": "FFC799",
|
||||
"terminal.ansiBrightBlack": "101010",
|
||||
"terminal.ansiBrightBlue": "FFC799",
|
||||
"terminal.ansiBrightCyan": "99FFE4",
|
||||
"terminal.ansiBrightGreen": "99FFE4",
|
||||
"terminal.ansiBrightMagenta": "FBADFF",
|
||||
"terminal.ansiBrightRed": "FF8080",
|
||||
"terminal.ansiBrightWhite": "f8f8f2",
|
||||
"terminal.ansiBrightYellow": "FFC799",
|
||||
"terminal.ansiCyan": "99FFE4",
|
||||
"terminal.ansiGreen": "99FFE4",
|
||||
"terminal.ansiMagenta": "FBADFF",
|
||||
"terminal.ansiRed": "FF8080",
|
||||
"terminal.ansiWhite": "e3e3dd",
|
||||
"terminal.ansiYellow": "FFC799",
|
||||
"terminal.background": "101010",
|
||||
"editorGroup.border": "FFC799",
|
||||
"editorGroupHeader.tabsBackground": "101010",
|
||||
"tab.inactiveBackground": "1C1C1C",
|
||||
"tab.border": "1C1C1C"
|
||||
},
|
||||
"rules": [
|
||||
{
|
||||
"foreground": "595959",
|
||||
"token": "comment"
|
||||
},
|
||||
{
|
||||
"foreground": "595959",
|
||||
"token": "punctuation.definition.comment"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "variable"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "string constant.other.placeholder"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "entity.name.tag"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "constant.other.color"
|
||||
},
|
||||
{
|
||||
"foreground": "FF8080",
|
||||
"token": "invalid"
|
||||
},
|
||||
{
|
||||
"foreground": "FF8080",
|
||||
"token": "invalid.illegal"
|
||||
},
|
||||
{
|
||||
"foreground": "FBADFF",
|
||||
"token": "keyword"
|
||||
},
|
||||
{
|
||||
"foreground": "FBADFF",
|
||||
"token": "storage.modifier"
|
||||
},
|
||||
{
|
||||
"foreground": "FBADFF",
|
||||
"token": "keyword.control"
|
||||
},
|
||||
{
|
||||
"foreground": "FBADFF",
|
||||
"token": "constant.other.color"
|
||||
},
|
||||
{
|
||||
"foreground": "FBADFF",
|
||||
"token": "punctuation.separator.inheritance.php"
|
||||
},
|
||||
{
|
||||
"foreground": "FBADFF",
|
||||
"token": "punctuation.definition.tag.html"
|
||||
},
|
||||
{
|
||||
"foreground": "FBADFF",
|
||||
"token": "punctuation.definition.tag.begin.html"
|
||||
},
|
||||
{
|
||||
"foreground": "FBADFF",
|
||||
"token": "punctuation.definition.tag.end.html"
|
||||
},
|
||||
{
|
||||
"foreground": "FBADFF",
|
||||
"token": "punctuation.section.embedded"
|
||||
},
|
||||
{
|
||||
"foreground": "FBADFF",
|
||||
"token": "keyword.other.template"
|
||||
},
|
||||
{
|
||||
"foreground": "FBADFF",
|
||||
"token": "keyword.other.rust"
|
||||
},
|
||||
{
|
||||
"foreground": "FBADFF",
|
||||
"token": "keyword.other.fn.rust"
|
||||
},
|
||||
{
|
||||
"foreground": "FBADFF",
|
||||
"token": "keyword.other.substitution"
|
||||
},
|
||||
{
|
||||
"foreground": "FBADFF",
|
||||
"token": "storage.type"
|
||||
},
|
||||
{
|
||||
"foreground": "FBADFF",
|
||||
"token": "keyword.other.import.java"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "storage.modifier.import.java"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "entity.name.tag"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "meta.tag.sgml"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "markup.deleted.git_gutter"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "entity.name.function"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "variable.function"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "support.function"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "keyword.other.special-method"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "meta.block variable.other"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "support.other.variable"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "string.other.link"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "constant.numeric"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "support.constant"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "constant.character"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "constant.escape"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "keyword.other.unit"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "keyword.other"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "constant.language.boolean"
|
||||
},
|
||||
{
|
||||
"foreground": "99FFE4",
|
||||
"token": "string"
|
||||
},
|
||||
{
|
||||
"foreground": "99FFE4",
|
||||
"token": "constant.other.symbol"
|
||||
},
|
||||
{
|
||||
"foreground": "99FFE4",
|
||||
"token": "constant.other.key"
|
||||
},
|
||||
{
|
||||
"foreground": "99FFE4",
|
||||
"token": "keyword.other.fn.rust"
|
||||
},
|
||||
{
|
||||
"foreground": "99FFE4",
|
||||
"token": "meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "entity.name"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "support.type"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "support.class"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "support.other.namespace.use.php"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "meta.use.php"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "support.other.namespace.php"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "markup.changed.git_gutter"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "support.type.sys-types"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "source.css support.type.property-name"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "source.sass support.type.property-name"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "source.scss support.type.property-name"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "source.less support.type.property-name"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "source.stylus support.type.property-name"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "source.postcss support.type.property-name"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "source.postcss support.type.property-name"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "support.type.vendored.property-name.css"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "source.css.scss entity.name.tag"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "variable.parameter.keyframe-list.css"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "meta.property-name.css"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "variable.parameter.url.scss"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "meta.property-value.scss"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "meta.property-value.css"
|
||||
},
|
||||
{
|
||||
"foreground": "FF8080",
|
||||
"token": "entity.name.module.js"
|
||||
},
|
||||
{
|
||||
"foreground": "FF8080",
|
||||
"token": "variable.import.parameter.js"
|
||||
},
|
||||
{
|
||||
"foreground": "FF8080",
|
||||
"token": "variable.other.class.js"
|
||||
},
|
||||
{
|
||||
"foreground": "99FFE4",
|
||||
"token": "variable.other.constant"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "variable.language"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "entity.name.method.js"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "meta.class-method.js entity.name.function.js"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "variable.function.constructor"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "entity.other.attribute-name"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "meta.property-list.scss"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "meta.attribute-selector.scss"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "meta.property-value.css"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "entity.other.keyframe-offset.css"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "meta.selector.css"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "entity.name.tag.reference.scss"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "entity.name.tag.nesting.css"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "punctuation.separator.key-value.css"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "text.html.basic entity.other.attribute-name.html"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "text.html.basic entity.other.attribute-name"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "entity.other.attribute-name.class"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "entity.other.attribute-name.id"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "meta.attribute-selector.scss"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "variable.parameter.misc.css"
|
||||
},
|
||||
{
|
||||
"foreground": "99FFE4",
|
||||
"token": "source.sass keyword.control"
|
||||
},
|
||||
{
|
||||
"foreground": "99FFE4",
|
||||
"token": "meta.attribute-selector.scss"
|
||||
},
|
||||
{
|
||||
"foreground": "99FFE4",
|
||||
"token": "markup.inserted"
|
||||
},
|
||||
{
|
||||
"foreground": "FF8080",
|
||||
"token": "markup.deleted"
|
||||
},
|
||||
{
|
||||
"foreground": "A0A0A0",
|
||||
"token": "markup.changed"
|
||||
},
|
||||
{
|
||||
"foreground": "A0A0A0",
|
||||
"token": "string.regexp"
|
||||
},
|
||||
{
|
||||
"foreground": "A0A0A0",
|
||||
"token": "constant.character.escape"
|
||||
},
|
||||
{
|
||||
"fontStyle": "underline",
|
||||
"token": "*url*"
|
||||
},
|
||||
{
|
||||
"fontStyle": "underline",
|
||||
"token": "*link*"
|
||||
},
|
||||
{
|
||||
"fontStyle": "underline",
|
||||
"token": "*uri*"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "tag.decorator.js entity.name.tag.js"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "tag.decorator.js punctuation.definition.tag.js"
|
||||
},
|
||||
{
|
||||
"fontStyle": "italic",
|
||||
"foreground": "FF8080",
|
||||
"token": "source.js constant.other.object.key.js string.unquoted.label.js"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "source.json meta.structure.dictionary.json support.type.property-name.json"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "text.html.markdown"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "punctuation.definition.list_item.markdown"
|
||||
},
|
||||
{
|
||||
"foreground": "A0A0A0",
|
||||
"token": "text.html.markdown markup.inline.raw.markdown"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "markdown.heading"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "markup.heading | markup.heading entity.name"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "markup.heading.markdown punctuation.definition.heading.markdown"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "markup.heading"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "markup.inserted.git_gutter"
|
||||
},
|
||||
{
|
||||
"fontStyle": "italic",
|
||||
"foreground": "FFFFFF",
|
||||
"token": "markup.italic"
|
||||
},
|
||||
{
|
||||
"fontStyle": "bold",
|
||||
"foreground": "FFFFFF",
|
||||
"token": "markup.bold"
|
||||
},
|
||||
{
|
||||
"fontStyle": "bold",
|
||||
"foreground": "FFFFFF",
|
||||
"token": "markup.bold string"
|
||||
},
|
||||
{
|
||||
"fontStyle": "bold",
|
||||
"foreground": "FFFFFF",
|
||||
"token": "markup.bold markup.italic"
|
||||
},
|
||||
{
|
||||
"fontStyle": "bold",
|
||||
"foreground": "FFFFFF",
|
||||
"token": "markup.italic markup.bold"
|
||||
},
|
||||
{
|
||||
"fontStyle": "bold",
|
||||
"foreground": "FFFFFF",
|
||||
"token": "markup.quote markup.bold"
|
||||
},
|
||||
{
|
||||
"fontStyle": "bold",
|
||||
"foreground": "FFFFFF",
|
||||
"token": "markup.bold markup.italic string"
|
||||
},
|
||||
{
|
||||
"fontStyle": "bold",
|
||||
"foreground": "FFFFFF",
|
||||
"token": "markup.italic markup.bold string"
|
||||
},
|
||||
{
|
||||
"fontStyle": "bold",
|
||||
"foreground": "FFFFFF",
|
||||
"token": "markup.quote markup.bold string"
|
||||
},
|
||||
{
|
||||
"fontStyle": "underline",
|
||||
"foreground": "FFC799",
|
||||
"token": "markup.underline"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "markup.quote punctuation.definition.blockquote.markdown"
|
||||
},
|
||||
{
|
||||
"foreground": "99FFE4",
|
||||
"token": "markup.quote"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "string.other.link.title.markdown"
|
||||
},
|
||||
{
|
||||
"foreground": "A0A0A0",
|
||||
"token": "string.other.link.description.title.markdown"
|
||||
},
|
||||
{
|
||||
"foreground": "FFC799",
|
||||
"token": "constant.other.reference.link.markdown"
|
||||
},
|
||||
{
|
||||
"foreground": "A0A0A0",
|
||||
"token": "markup.raw.block"
|
||||
},
|
||||
{
|
||||
"foreground": "00000050",
|
||||
"token": "markup.raw.block.fenced.markdown"
|
||||
},
|
||||
{
|
||||
"foreground": "00000050",
|
||||
"token": "punctuation.definition.fenced.markdown"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "markup.raw.block.fenced.markdown"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "variable.language.fenced.markdown"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "punctuation.section.class.end"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "variable.language.fenced.markdown"
|
||||
},
|
||||
{
|
||||
"fontStyle": "bold",
|
||||
"foreground": "65737E",
|
||||
"token": "meta.separator"
|
||||
},
|
||||
{
|
||||
"foreground": "FFFFFF",
|
||||
"token": "markup.table"
|
||||
}
|
||||
],
|
||||
"encodedTokensColors": []
|
||||
}
|
||||
9
frontend/components/layout/themeProvider.tsx
Normal file
9
frontend/components/layout/themeProvider.tsx
Normal file
@ -0,0 +1,9 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { ThemeProvider as NextThemesProvider } from "next-themes"
|
||||
import { type ThemeProviderProps } from "next-themes/dist/types"
|
||||
|
||||
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
|
||||
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
|
||||
}
|
||||
57
frontend/components/ui/button.tsx
Normal file
57
frontend/components/ui/button.tsx
Normal file
@ -0,0 +1,57 @@
|
||||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"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",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
|
||||
destructive:
|
||||
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
|
||||
outline:
|
||||
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
|
||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-4 py-2",
|
||||
sm: "h-8 rounded-md px-3 text-xs",
|
||||
lg: "h-10 rounded-md px-8",
|
||||
icon: "h-9 w-9",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
export interface ButtonProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||
VariantProps<typeof buttonVariants> {
|
||||
asChild?: boolean
|
||||
}
|
||||
|
||||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({ className, variant, size, asChild = false, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
return (
|
||||
<Comp
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
)
|
||||
Button.displayName = "Button"
|
||||
|
||||
export { Button, buttonVariants }
|
||||
76
frontend/components/ui/card.tsx
Normal file
76
frontend/components/ui/card.tsx
Normal file
@ -0,0 +1,76 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Card = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"rounded-xl border bg-card text-card-foreground shadow",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
Card.displayName = "Card"
|
||||
|
||||
const CardHeader = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("flex flex-col space-y-1.5 p-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
CardHeader.displayName = "CardHeader"
|
||||
|
||||
const CardTitle = React.forwardRef<
|
||||
HTMLParagraphElement,
|
||||
React.HTMLAttributes<HTMLHeadingElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<h3
|
||||
ref={ref}
|
||||
className={cn("font-semibold leading-none tracking-tight", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
CardTitle.displayName = "CardTitle"
|
||||
|
||||
const CardDescription = React.forwardRef<
|
||||
HTMLParagraphElement,
|
||||
React.HTMLAttributes<HTMLParagraphElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<p
|
||||
ref={ref}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
CardDescription.displayName = "CardDescription"
|
||||
|
||||
const CardContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
|
||||
))
|
||||
CardContent.displayName = "CardContent"
|
||||
|
||||
const CardFooter = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("flex items-center p-6 pt-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
CardFooter.displayName = "CardFooter"
|
||||
|
||||
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
|
||||
30
frontend/components/ui/customButton.tsx
Normal file
30
frontend/components/ui/customButton.tsx
Normal file
@ -0,0 +1,30 @@
|
||||
import * as React from "react"
|
||||
import { Plus } from "lucide-react"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Button = ({
|
||||
children,
|
||||
className,
|
||||
onClick,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
className?: string
|
||||
onClick?: () => void
|
||||
}) => {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
className={cn(
|
||||
className,
|
||||
"gradient-button-bg p-[1px] inline-flex group rounded-md text-sm font-medium focus-visible:ring-offset-1 focus-visible:ring-offset-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
|
||||
)}
|
||||
>
|
||||
<div className="rounded-[6px] w-full gradient-button flex items-center justify-center whitespace-nowrap px-4 py-2 h-9">
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
New Project
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
export default Button
|
||||
25
frontend/components/ui/input.tsx
Normal file
25
frontend/components/ui/input.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
export interface InputProps
|
||||
extends React.InputHTMLAttributes<HTMLInputElement> {}
|
||||
|
||||
const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||
({ className, type, ...props }, ref) => {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
className={cn(
|
||||
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
)
|
||||
Input.displayName = "Input"
|
||||
|
||||
export { Input }
|
||||
45
frontend/components/ui/resizable.tsx
Normal file
45
frontend/components/ui/resizable.tsx
Normal file
@ -0,0 +1,45 @@
|
||||
"use client"
|
||||
|
||||
import { DragHandleDots2Icon } from "@radix-ui/react-icons"
|
||||
import * as ResizablePrimitive from "react-resizable-panels"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const ResizablePanelGroup = ({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
|
||||
<ResizablePrimitive.PanelGroup
|
||||
className={cn(
|
||||
"flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
|
||||
const ResizablePanel = ResizablePrimitive.Panel
|
||||
|
||||
const ResizableHandle = ({
|
||||
withHandle,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
|
||||
withHandle?: boolean
|
||||
}) => (
|
||||
<ResizablePrimitive.PanelResizeHandle
|
||||
className={cn(
|
||||
"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{withHandle && (
|
||||
<div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
|
||||
<DragHandleDots2Icon className="h-2.5 w-2.5" />
|
||||
</div>
|
||||
)}
|
||||
</ResizablePrimitive.PanelResizeHandle>
|
||||
)
|
||||
|
||||
export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
|
||||
31
frontend/components/ui/tab.tsx
Normal file
31
frontend/components/ui/tab.tsx
Normal file
@ -0,0 +1,31 @@
|
||||
"use client"
|
||||
|
||||
import { X } from "lucide-react"
|
||||
import { Button } from "./button"
|
||||
|
||||
export default function Tab({
|
||||
children,
|
||||
onClick,
|
||||
onClose,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
onClick?: () => void
|
||||
onClose?: () => void
|
||||
}) {
|
||||
return (
|
||||
<Button
|
||||
onClick={onClick ?? undefined}
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
className="group select-none"
|
||||
>
|
||||
{children}
|
||||
<div
|
||||
onClick={onClose ?? undefined}
|
||||
className="h-5 w-5 ml-0.5 flex items-center justify-center translate-x-1 transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-sm"
|
||||
>
|
||||
<X className="w-3 h-3" />
|
||||
</div>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user