-
Notifications
You must be signed in to change notification settings - Fork 120
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Sparkle
committed
Jul 20, 2024
1 parent
38f8250
commit c20a15b
Showing
9 changed files
with
3,344 additions
and
1,331 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import { FC } from 'react'; | ||
|
|
||
| const Plugins: FC = () => { | ||
| return <div className="p-4 h-full">Plugins</div>; | ||
| }; | ||
|
|
||
| export default Plugins; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,124 @@ | ||
| import { FC, ReactNode } from 'react'; | ||
| import { PiWarningCircleBold, PiCodeThin } from 'react-icons/pi'; | ||
| import { VscPreview } from 'react-icons/vsc'; | ||
|
|
||
| import { | ||
| Select, | ||
| SelectContent, | ||
| SelectItem, | ||
| SelectTrigger, | ||
| SelectValue, | ||
| } from '@/components/ui/select'; | ||
| import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'; | ||
| import { Menu, MenuItem } from '@/components/menu'; | ||
|
|
||
| const Settings: FC = () => { | ||
| const titleStyle = 'my-2 font-bold'; | ||
|
|
||
| return ( | ||
| <div className="p-4 h-full"> | ||
| <div>Settings</div> | ||
| <div> | ||
| <div className={titleStyle}>WEBCONTAINERS</div> | ||
| <div className="flex items-center text-sm text-gray-400 my-1"> | ||
| <span className="mr-2">Compile trigger</span> | ||
| <TooltipProvider delayDuration={500}> | ||
| <Tooltip> | ||
| <TooltipTrigger> | ||
| <PiWarningCircleBold /> | ||
| </TooltipTrigger> | ||
| <TooltipContent className="bg-gray-800 text-white" side={'right'}> | ||
| <p>Controls when edited files are synced tothe WebContainers filesystem.</p> | ||
| </TooltipContent> | ||
| </Tooltip> | ||
| </TooltipProvider> | ||
| </div> | ||
| <CompileSelector /> | ||
| </div> | ||
| <div> | ||
| <div className={titleStyle}>EDITOR SETTINGS</div> | ||
| <EditorSettings /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const CompileSelector: FC = () => { | ||
| const selectOptions = [ | ||
| { | ||
| text: 'Edit(auto)', | ||
| id: 0, | ||
| }, | ||
| { | ||
| text: 'Save', | ||
| id: 1, | ||
| }, | ||
| { | ||
| text: 'KeyStroke', | ||
| id: 2, | ||
| }, | ||
| ]; | ||
|
|
||
| return ( | ||
| <Select defaultValue="Edit(auto)"> | ||
| <SelectTrigger className="w-[180px]"> | ||
| <SelectValue placeholder="Theme" /> | ||
| </SelectTrigger> | ||
| <SelectContent> | ||
| {selectOptions.map((option) => ( | ||
| <SelectItem value={option.text} key={option.id}> | ||
| {option.text} | ||
| </SelectItem> | ||
| ))} | ||
| </SelectContent> | ||
| </Select> | ||
| ); | ||
| }; | ||
|
|
||
| const EditorSettings: FC = () => { | ||
| interface settingOption { | ||
| text: string; | ||
| id: number; | ||
| icon: ReactNode; | ||
| } | ||
|
|
||
| const editorSettingOptions: Array<settingOption> = [ | ||
| { | ||
| text: 'User settings', | ||
| id: 0, | ||
| icon: <VscPreview />, | ||
| }, | ||
| { | ||
| text: 'Workspace settings', | ||
| id: 1, | ||
| icon: <VscPreview />, | ||
| }, | ||
| { | ||
| text: 'User snippets', | ||
| id: 2, | ||
| icon: <PiCodeThin />, | ||
| }, | ||
| { | ||
| text: 'Workspace snippets', | ||
| id: 3, | ||
| icon: <PiCodeThin />, | ||
| }, | ||
| ]; | ||
|
|
||
| return ( | ||
| <div> | ||
| <Menu> | ||
| {editorSettingOptions.map((option) => ( | ||
| <MenuItem> | ||
| <div className="flex items-center"> | ||
| <span className="mx-2">{option.icon}</span> | ||
| <span> {option.text}</span> | ||
| </div> | ||
| </MenuItem> | ||
| ))} | ||
| </Menu> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Settings; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,153 @@ | ||
| 'use client'; | ||
|
|
||
| import * as React from 'react'; | ||
| import * as SelectPrimitive from '@radix-ui/react-select'; | ||
| import { Check, ChevronDown, ChevronUp } from 'lucide-react'; | ||
|
|
||
| import { cn } from '@/utils'; | ||
|
|
||
| const Select = SelectPrimitive.Root; | ||
|
|
||
| const SelectGroup = SelectPrimitive.Group; | ||
|
|
||
| const SelectValue = SelectPrimitive.Value; | ||
|
|
||
| const SelectTrigger = React.forwardRef< | ||
| React.ElementRef<typeof SelectPrimitive.Trigger>, | ||
| React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> | ||
| >(({ className, children, ...props }, ref) => ( | ||
| <SelectPrimitive.Trigger | ||
| ref={ref} | ||
| className={cn( | ||
| 'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1', | ||
| className, | ||
| )} | ||
| {...props} | ||
| > | ||
| {children} | ||
| <SelectPrimitive.Icon asChild> | ||
| <ChevronDown className="h-4 w-4 opacity-50" /> | ||
| </SelectPrimitive.Icon> | ||
| </SelectPrimitive.Trigger> | ||
| )); | ||
| SelectTrigger.displayName = SelectPrimitive.Trigger.displayName; | ||
|
|
||
| const SelectScrollUpButton = React.forwardRef< | ||
| React.ElementRef<typeof SelectPrimitive.ScrollUpButton>, | ||
| React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton> | ||
| >(({ className, ...props }, ref) => ( | ||
| <SelectPrimitive.ScrollUpButton | ||
| ref={ref} | ||
| className={cn('flex cursor-default items-center justify-center py-1', className)} | ||
| {...props} | ||
| > | ||
| <ChevronUp className="h-4 w-4" /> | ||
| </SelectPrimitive.ScrollUpButton> | ||
| )); | ||
| SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName; | ||
|
|
||
| const SelectScrollDownButton = React.forwardRef< | ||
| React.ElementRef<typeof SelectPrimitive.ScrollDownButton>, | ||
| React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton> | ||
| >(({ className, ...props }, ref) => ( | ||
| <SelectPrimitive.ScrollDownButton | ||
| ref={ref} | ||
| className={cn('flex cursor-default items-center justify-center py-1', className)} | ||
| {...props} | ||
| > | ||
| <ChevronDown className="h-4 w-4" /> | ||
| </SelectPrimitive.ScrollDownButton> | ||
| )); | ||
| SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName; | ||
|
|
||
| const SelectContent = React.forwardRef< | ||
| React.ElementRef<typeof SelectPrimitive.Content>, | ||
| React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> | ||
| >(({ className, children, position = 'popper', ...props }, ref) => ( | ||
| <SelectPrimitive.Portal> | ||
| <SelectPrimitive.Content | ||
| ref={ref} | ||
| className={cn( | ||
| 'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', | ||
| position === 'popper' && | ||
| 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', | ||
| className, | ||
| )} | ||
| position={position} | ||
| {...props} | ||
| > | ||
| <SelectScrollUpButton /> | ||
| <SelectPrimitive.Viewport | ||
| className={cn( | ||
| 'p-1', | ||
| position === 'popper' && | ||
| 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]', | ||
| )} | ||
| > | ||
| {children} | ||
| </SelectPrimitive.Viewport> | ||
| <SelectScrollDownButton /> | ||
| </SelectPrimitive.Content> | ||
| </SelectPrimitive.Portal> | ||
| )); | ||
| SelectContent.displayName = SelectPrimitive.Content.displayName; | ||
|
|
||
| const SelectLabel = React.forwardRef< | ||
| React.ElementRef<typeof SelectPrimitive.Label>, | ||
| React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> | ||
| >(({ className, ...props }, ref) => ( | ||
| <SelectPrimitive.Label | ||
| ref={ref} | ||
| className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)} | ||
| {...props} | ||
| /> | ||
| )); | ||
| SelectLabel.displayName = SelectPrimitive.Label.displayName; | ||
|
|
||
| const SelectItem = React.forwardRef< | ||
| React.ElementRef<typeof SelectPrimitive.Item>, | ||
| React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> | ||
| >(({ className, children, ...props }, ref) => ( | ||
| <SelectPrimitive.Item | ||
| ref={ref} | ||
| className={cn( | ||
| 'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', | ||
| className, | ||
| )} | ||
| {...props} | ||
| > | ||
| <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> | ||
| <SelectPrimitive.ItemIndicator> | ||
| <Check className="h-4 w-4" /> | ||
| </SelectPrimitive.ItemIndicator> | ||
| </span> | ||
|
|
||
| <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText> | ||
| </SelectPrimitive.Item> | ||
| )); | ||
| SelectItem.displayName = SelectPrimitive.Item.displayName; | ||
|
|
||
| const SelectSeparator = React.forwardRef< | ||
| React.ElementRef<typeof SelectPrimitive.Separator>, | ||
| React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> | ||
| >(({ className, ...props }, ref) => ( | ||
| <SelectPrimitive.Separator | ||
| ref={ref} | ||
| className={cn('-mx-1 my-1 h-px bg-muted', className)} | ||
| {...props} | ||
| /> | ||
| )); | ||
| SelectSeparator.displayName = SelectPrimitive.Separator.displayName; | ||
|
|
||
| export { | ||
| Select, | ||
| SelectGroup, | ||
| SelectValue, | ||
| SelectTrigger, | ||
| SelectContent, | ||
| SelectLabel, | ||
| SelectItem, | ||
| SelectSeparator, | ||
| SelectScrollUpButton, | ||
| SelectScrollDownButton, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| 'use client'; | ||
|
|
||
| import * as React from 'react'; | ||
| import * as TooltipPrimitive from '@radix-ui/react-tooltip'; | ||
|
|
||
| import { cn } from '@/utils'; | ||
|
|
||
| const TooltipProvider = TooltipPrimitive.Provider; | ||
|
|
||
| const Tooltip = TooltipPrimitive.Root; | ||
|
|
||
| const TooltipTrigger = TooltipPrimitive.Trigger; | ||
|
|
||
| const TooltipContent = React.forwardRef< | ||
| React.ElementRef<typeof TooltipPrimitive.Content>, | ||
| React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> | ||
| >(({ className, sideOffset = 4, ...props }, ref) => ( | ||
| <TooltipPrimitive.Content | ||
| ref={ref} | ||
| sideOffset={sideOffset} | ||
| className={cn( | ||
| 'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', | ||
| className, | ||
| )} | ||
| {...props} | ||
| /> | ||
| )); | ||
| TooltipContent.displayName = TooltipPrimitive.Content.displayName; | ||
|
|
||
| export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }; |