srizan/archived-spongebin
1
0
Fork 0
mirror of https://github.com/SrIzan10/spongebin.git synced 2026-05-01 11:05:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: make mobile experience better

Browse Source
This commit is contained in:
DuroCodes
2025-04-21 11:05:29 -04:00
parent 26d38488d6
commit 06f4f01f1a
5 changed files with 30 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
bun.lock
View File

@@ -6,6 +6,7 @@
"dependencies": {
"@monaco-editor/react": "^4.7.0",
"@neondatabase/serverless": "^1.0.0",
"@radix-ui/react-collapsible": "^1.1.7",
"@radix-ui/react-dialog": "^1.1.10",
"@radix-ui/react-dropdown-menu": "^2.1.7",
"@radix-ui/react-popover": "^1.1.10",
@@ -179,6 +180,8 @@
"@radix-ui/react-arrow": ["@radix-ui/react-arrow@1.1.4", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-qz+fxrqgNxG0dYew5l7qR3c7wdgRu1XVUHGnGYX7rg5HM4p9SWaRmJwfgR3J0SgyUKayLmzQIun+N6rWRgiRKw=="],
"@radix-ui/react-collapsible": ["@radix-ui/react-collapsible@1.1.7", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-presence": "1.1.3", "@radix-ui/react-primitive": "2.1.0", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-zGFsPcFJNdQa/UNd6MOgF40BS054FIGj32oOWBllixz42f+AkQg3QJ1YT9pw7vs+Ai+EgWkh839h69GEK8oH2A=="],
"@radix-ui/react-collection": ["@radix-ui/react-collection@1.1.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.0", "@radix-ui/react-slot": "1.2.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-cv4vSf7HttqXilDnAnvINd53OTl1/bjUYVZrkFnA7nwmY9Ob2POUy0WY0sfqBAe1s5FyKsyceQlqiEGPYNTadg=="],
"@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg=="],

1
package.json
View File

@@ -11,6 +11,7 @@
"dependencies": {
"@monaco-editor/react": "^4.7.0",
"@neondatabase/serverless": "^1.0.0",
"@radix-ui/react-collapsible": "^1.1.7",
"@radix-ui/react-dialog": "^1.1.10",
"@radix-ui/react-dropdown-menu": "^2.1.7",
"@radix-ui/react-popover": "^1.1.10",

23
src/components/header.tsx
View File

@@ -11,20 +11,29 @@ export function Header() {
const { language, theme, content, setLanguage, setTheme } = useEditor();
return (
<div className="flex justify-between items-center px-4 py-2">
<div className="flex gap-2">
<Button variant="outline" onClick={() => (location.href = "/")}>
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2 px-4 py-2">
<div className="grid grid-cols-2 gap-2 w-full sm:flex sm:w-auto">
<Button
variant="outline"
onClick={() => (location.href = "/")}
className="w-full sm:w-auto"
>
new
</Button>
<SaveButton content={content} language={language} theme={theme} />
<SaveButton
content={content}
language={language}
theme={theme}
className="w-full sm:w-auto"
/>
</div>
<div className="flex gap-2">
<div className="grid grid-cols-2 gap-2 w-full sm:flex sm:flex-row sm:w-auto">
<SearchableSelect
options={LANGUAGES.map((l) => ({ value: l, label: l }))}
placeholder="language"
value={language}
onValueChange={setLanguage}
className="w-40"
className="w-full sm:w-40"
/>
<SearchableSelect
options={Object.keys(THEME_MAP).map((t) => ({
@@ -34,7 +43,7 @@ export function Header() {
placeholder="theme"
value={theme}
onValueChange={setTheme}
className="w-53"
className="w-full sm:w-52"
/>
</div>
</div>

4
src/components/monaco-editor.tsx
View File

@@ -50,7 +50,7 @@ export function MonacoEditor() {
};
return (
<div className="relative w-full h-100vh">
<div className="relative w-full h-[calc(100vh-6rem)] sm:h-[calc(100vh-3.25rem)]">
{isLoading && (
<div className="absolute inset-0 flex items-center justify-center bg-background z-10">
<div className="flex flex-col items-center gap-2">
@@ -61,7 +61,7 @@ export function MonacoEditor() {
)}
<Editor
height="100vh"
className="h-[calc(100vh-6rem)] sm:h-calc(100vh-3.25rem)]"
theme={theme}
language={language}
value={content}

10
src/components/save-button.tsx
View File

@@ -9,9 +9,15 @@ interface SaveButtonProps {
content: string;
language: string;
theme: string;
className?: string;
}
export function SaveButton({ content, language, theme }: SaveButtonProps) {
export function SaveButton({
content,
language,
theme,
className,
}: SaveButtonProps) {
const router = useRouter();
const handleSave = async () => {
@@ -33,7 +39,7 @@ export function SaveButton({ content, language, theme }: SaveButtonProps) {
};
return (
<Button variant="outline" onClick={handleSave}>
<Button variant="outline" onClick={handleSave} className={className}>
save
</Button>
);