mirror of
https://github.com/Dokploy/templates
synced 2025-06-26 18:16:07 +00:00
Merge pull request #8 from zaaakher/ui/loading
chore(ui): improve search UI
This commit is contained in:
Mauricio Siu
GitHub
commit
96ee890079
@ -38,7 +38,8 @@
|
||||
"tailwind-merge": "^3.0.2",
|
||||
"tailwindcss": "^4.0.12",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"vite-plugin-static-copy": "2.3.0"
|
||||
"vite-plugin-static-copy": "2.3.0",
|
||||
"zustand": "^5.0.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^20.8.2",
|
||||
|
||||
@ -1,14 +1,17 @@
|
||||
import TemplateGrid from "./components/TemplateGrid";
|
||||
import Navigation from "./components/Navigation";
|
||||
import Search from "./components/Search";
|
||||
import { useStore } from "./store";
|
||||
import "./App.css";
|
||||
|
||||
function App() {
|
||||
const view = useStore((state) => state.view);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Navigation />
|
||||
<Search />
|
||||
<TemplateGrid />
|
||||
<TemplateGrid view={view} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { Input } from "./ui/input";
|
||||
import { useStore } from "../store";
|
||||
import { SearchIcon, XIcon } from "lucide-react";
|
||||
import { Badge } from "./ui/badge";
|
||||
import { Grid, List, SearchIcon, XIcon } from "lucide-react";
|
||||
import { Button } from "./ui/button";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
|
||||
import {
|
||||
@ -15,14 +14,16 @@ import {
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Check, ChevronsUpDown } from "lucide-react";
|
||||
import React from "react";
|
||||
|
||||
import { Tabs, TabsList, TabsTrigger } from "./ui/tabs";
|
||||
import SelectedTags from "./SelectedTags";
|
||||
const Search = () => {
|
||||
const { templates, searchQuery, setSearchQuery } = useStore();
|
||||
const { templates, searchQuery, setSearchQuery, setView } = useStore();
|
||||
const selectedTags = useStore((state) => state.selectedTags);
|
||||
const addSelectedTag = useStore((state) => state.addSelectedTag);
|
||||
const removeSelectedTag = useStore((state) => state.removeSelectedTag);
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const [tagSearch, setTagSearch] = React.useState("");
|
||||
const view = useStore((state) => state.view);
|
||||
|
||||
// Get all unique tags, safely handle empty templates
|
||||
const uniqueTags = React.useMemo(() => {
|
||||
@ -41,31 +42,44 @@ const Search = () => {
|
||||
}, [uniqueTags, tagSearch]);
|
||||
|
||||
return (
|
||||
<div className="max-w-xl mx-auto p-12">
|
||||
<div className=" mx-auto p-12 border-b w-full">
|
||||
<h1 className="text-2xl md:text-3xl xl:text-4xl font-bold text-center mb-8">
|
||||
Available Templates ({templates?.length || 0})
|
||||
</h1>
|
||||
<div className="max-w-xl mx-auto">
|
||||
<div className="flex flex-row gap-2">
|
||||
<div className="relative w-full">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search templates..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full"
|
||||
/>
|
||||
{searchQuery.length > 0 ? (
|
||||
<div
|
||||
className="cursor-pointer"
|
||||
onClick={() => setSearchQuery("")}
|
||||
>
|
||||
<XIcon className="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
|
||||
</div>
|
||||
) : (
|
||||
<SearchIcon className="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
|
||||
)}
|
||||
</div>
|
||||
<div className="max-w-xl mx-auto flex flex-col gap-2">
|
||||
<div className="relative w-full">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search templates..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full p-6"
|
||||
/>
|
||||
{searchQuery.length > 0 ? (
|
||||
<div className="cursor-pointer" onClick={() => setSearchQuery("")}>
|
||||
<XIcon className="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
|
||||
</div>
|
||||
) : (
|
||||
<SearchIcon className="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-row gap-2 justify-between">
|
||||
<Tabs
|
||||
defaultValue={view}
|
||||
onValueChange={(value) => {
|
||||
setView(value as "grid" | "rows");
|
||||
}}
|
||||
>
|
||||
<TabsList>
|
||||
<TabsTrigger value="grid">
|
||||
<Grid /> <span className="text-xs p-1">Grid</span>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="rows">
|
||||
<List /> <span className="text-xs p-1">List</span>
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
@ -118,25 +132,7 @@ const Search = () => {
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
{selectedTags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mt-4">
|
||||
{selectedTags.map((tag) => (
|
||||
<Badge
|
||||
key={tag}
|
||||
variant="default"
|
||||
className="cursor-pointer pr-1 flex items-center gap-1"
|
||||
>
|
||||
{tag}
|
||||
<div
|
||||
className="hover:bg-primary-foreground/20 rounded-full p-1"
|
||||
onClick={() => removeSelectedTag(tag)}
|
||||
>
|
||||
<XIcon className="h-3 w-3" />
|
||||
</div>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{selectedTags.length > 0 && <SelectedTags />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
30
app/src/components/SelectedTags.tsx
Normal file
30
app/src/components/SelectedTags.tsx
Normal file
@ -0,0 +1,30 @@
|
||||
import { XIcon } from "lucide-react";
|
||||
import { useStore } from "../store";
|
||||
import { Badge } from "./ui/badge";
|
||||
|
||||
const SelectedTags = () => {
|
||||
const selectedTags = useStore((state) => state.selectedTags);
|
||||
const removeSelectedTag = useStore((state) => state.removeSelectedTag);
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap gap-2 mt-4 border-t pt-4">
|
||||
{selectedTags.map((tag) => (
|
||||
<Badge
|
||||
key={tag}
|
||||
variant="default"
|
||||
className="cursor-pointer pr-1 flex items-center gap-1"
|
||||
>
|
||||
{tag}
|
||||
<div
|
||||
className="hover:bg-primary-foreground/20 rounded-full p-1"
|
||||
onClick={() => removeSelectedTag(tag)}
|
||||
>
|
||||
<XIcon className="h-3 w-3" />
|
||||
</div>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SelectedTags;
|
||||
@ -22,6 +22,8 @@ import { useStore } from "../store";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
|
||||
import { Label } from "./ui/label";
|
||||
import { Clipboard } from "lucide-react";
|
||||
import { Skeleton } from "./ui/skeleton";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface Template {
|
||||
id: string;
|
||||
@ -42,11 +44,17 @@ interface TemplateFiles {
|
||||
config: string | null;
|
||||
}
|
||||
|
||||
const TemplateGrid: React.FC = () => {
|
||||
interface TemplateGridProps {
|
||||
view: "grid" | "rows";
|
||||
}
|
||||
|
||||
const TemplateGrid: React.FC<TemplateGridProps> = ({ view }) => {
|
||||
const { templates, setTemplates } = useStore();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const { addSelectedTag, searchQuery, selectedTags } = useStore();
|
||||
const searchQuery = useStore((state) => state.searchQuery);
|
||||
const selectedTags = useStore((state) => state.selectedTags);
|
||||
const { addSelectedTag } = useStore();
|
||||
|
||||
const [selectedTemplate, setSelectedTemplate] = useState<Template | null>(
|
||||
null
|
||||
@ -133,9 +141,23 @@ const TemplateGrid: React.FC = () => {
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<h1 className="text-4xl font-bold text-center text-gray-900 mb-8">
|
||||
Loading templates...
|
||||
</h1>
|
||||
<div
|
||||
className={cn("", {
|
||||
"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6":
|
||||
view === "grid",
|
||||
"grid grid-cols-1 gap-4": view === "rows",
|
||||
})}
|
||||
>
|
||||
{[1, 2, 3].map((item) => (
|
||||
<Skeleton
|
||||
key={item}
|
||||
className={cn({
|
||||
"h-[300px]": view === "grid",
|
||||
"h-[135px]": view === "rows",
|
||||
})}
|
||||
></Skeleton>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -154,14 +176,27 @@ const TemplateGrid: React.FC = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||||
<div
|
||||
className={cn("", {
|
||||
"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6":
|
||||
view === "grid",
|
||||
"grid grid-cols-1 gap-4": view === "rows",
|
||||
})}
|
||||
>
|
||||
{filteredTemplates.length > 0 ? (
|
||||
filteredTemplates.map((template) => (
|
||||
<Card
|
||||
key={template.id}
|
||||
className=" cursor-pointer hover:shadow-lg transition-all duration-200 h-full max-h-[300px]"
|
||||
onClick={() => handleTemplateClick(template)}
|
||||
className={cn(
|
||||
" cursor-pointer hover:shadow-lg transition-all duration-200 h-full max-h-[300px]",
|
||||
{
|
||||
"flex-col": view === "grid",
|
||||
"flex-row": view === "rows",
|
||||
}
|
||||
)}
|
||||
>
|
||||
<CardHeader onClick={() => handleTemplateClick(template)}>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl ">
|
||||
<img
|
||||
src={`/blueprints/${template.id}/${template.logo}`}
|
||||
@ -175,10 +210,13 @@ const TemplateGrid: React.FC = () => {
|
||||
<p className="text-sm text-muted-foreground line-clamp-2">
|
||||
{template.description}
|
||||
</p>
|
||||
<div className="mt-2 flex flex-wrap gap-1">
|
||||
<div className="mt-2 flex flex-wrap gap-1 w-fit">
|
||||
{template.tags.slice(0, 3).map((tag) => (
|
||||
<span
|
||||
onClick={() => addSelectedTag(tag)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
addSelectedTag(tag);
|
||||
}}
|
||||
key={tag}
|
||||
className="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-blue-100 text-blue-800"
|
||||
>
|
||||
@ -187,10 +225,7 @@ const TemplateGrid: React.FC = () => {
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter
|
||||
className="flex justify-between items-center"
|
||||
onClick={() => handleTemplateClick(template)}
|
||||
>
|
||||
<CardFooter className="flex justify-between items-center">
|
||||
<span className="text-sm text-gray-500">
|
||||
{template.version}
|
||||
</span>
|
||||
@ -224,7 +259,7 @@ const TemplateGrid: React.FC = () => {
|
||||
open={!!selectedTemplate}
|
||||
onOpenChange={() => setSelectedTemplate(null)}
|
||||
>
|
||||
<DialogContent className="max-w-[90vw] w-full lg:max-w-[90vw] max-h-[85vh] overflow-y-auto p-0">
|
||||
<DialogContent className="!max-w-[90vw] w-full lg:max-w-[90vw] max-h-[85vh] overflow-y-auto p-0">
|
||||
<DialogHeader className="space-y-4 border-b sticky top-0 p-4 bg-background z-10">
|
||||
<div className="flex items-center gap-4">
|
||||
{selectedTemplate?.logo && (
|
||||
@ -278,7 +313,7 @@ const TemplateGrid: React.FC = () => {
|
||||
</div>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="p-6 pt-3 flex flex-col gap-2">
|
||||
<div className="p-6 pt-3 max-w-[100%] flex flex-col gap-2">
|
||||
<DialogDescription className="text-base">
|
||||
{selectedTemplate?.description}
|
||||
</DialogDescription>
|
||||
@ -339,7 +374,7 @@ const TemplateGrid: React.FC = () => {
|
||||
</TabsList>
|
||||
<TabsContent value="docker-compose">
|
||||
{templateFiles?.dockerCompose && (
|
||||
<div className="max-w-6xl w-full relative">
|
||||
<div className=" flex flex-col relative">
|
||||
<Label className=" flex mb-2 flex-col items-start w-fit justify-start gap-1">
|
||||
<span className="leading-tight text-xl font-semibold">
|
||||
Docker Compose
|
||||
|
||||
@ -9,168 +9,168 @@ import { EditorView } from "@codemirror/view";
|
||||
import { githubDark, githubLight } from "@uiw/codemirror-theme-github";
|
||||
import CodeMirror, { type ReactCodeMirrorProps } from "@uiw/react-codemirror";
|
||||
import {
|
||||
autocompletion,
|
||||
type CompletionContext,
|
||||
type CompletionResult,
|
||||
type Completion,
|
||||
autocompletion,
|
||||
type CompletionContext,
|
||||
type CompletionResult,
|
||||
type Completion,
|
||||
} from "@codemirror/autocomplete";
|
||||
import { useTheme } from "@/theme-provider";
|
||||
// Docker Compose completion options
|
||||
const dockerComposeServices = [
|
||||
{ label: "services", type: "keyword", info: "Define services" },
|
||||
{ label: "version", type: "keyword", info: "Specify compose file version" },
|
||||
{ label: "volumes", type: "keyword", info: "Define volumes" },
|
||||
{ label: "networks", type: "keyword", info: "Define networks" },
|
||||
{ label: "configs", type: "keyword", info: "Define configuration files" },
|
||||
{ label: "secrets", type: "keyword", info: "Define secrets" },
|
||||
{ label: "services", type: "keyword", info: "Define services" },
|
||||
{ label: "version", type: "keyword", info: "Specify compose file version" },
|
||||
{ label: "volumes", type: "keyword", info: "Define volumes" },
|
||||
{ label: "networks", type: "keyword", info: "Define networks" },
|
||||
{ label: "configs", type: "keyword", info: "Define configuration files" },
|
||||
{ label: "secrets", type: "keyword", info: "Define secrets" },
|
||||
].map((opt) => ({
|
||||
...opt,
|
||||
apply: (view: EditorView, completion: Completion) => {
|
||||
const insert = `${completion.label}:`;
|
||||
view.dispatch({
|
||||
changes: {
|
||||
from: view.state.selection.main.from,
|
||||
to: view.state.selection.main.to,
|
||||
insert,
|
||||
},
|
||||
selection: { anchor: view.state.selection.main.from + insert.length },
|
||||
});
|
||||
},
|
||||
...opt,
|
||||
apply: (view: EditorView, completion: Completion) => {
|
||||
const insert = `${completion.label}:`;
|
||||
view.dispatch({
|
||||
changes: {
|
||||
from: view.state.selection.main.from,
|
||||
to: view.state.selection.main.to,
|
||||
insert,
|
||||
},
|
||||
selection: { anchor: view.state.selection.main.from + insert.length },
|
||||
});
|
||||
},
|
||||
}));
|
||||
|
||||
const dockerComposeServiceOptions = [
|
||||
{
|
||||
label: "image",
|
||||
type: "keyword",
|
||||
info: "Specify the image to start the container from",
|
||||
},
|
||||
{ label: "build", type: "keyword", info: "Build configuration" },
|
||||
{ label: "command", type: "keyword", info: "Override the default command" },
|
||||
{ label: "container_name", type: "keyword", info: "Custom container name" },
|
||||
{
|
||||
label: "depends_on",
|
||||
type: "keyword",
|
||||
info: "Express dependency between services",
|
||||
},
|
||||
{ label: "environment", type: "keyword", info: "Add environment variables" },
|
||||
{
|
||||
label: "env_file",
|
||||
type: "keyword",
|
||||
info: "Add environment variables from a file",
|
||||
},
|
||||
{
|
||||
label: "expose",
|
||||
type: "keyword",
|
||||
info: "Expose ports without publishing them",
|
||||
},
|
||||
{ label: "ports", type: "keyword", info: "Expose ports" },
|
||||
{
|
||||
label: "volumes",
|
||||
type: "keyword",
|
||||
info: "Mount host paths or named volumes",
|
||||
},
|
||||
{ label: "restart", type: "keyword", info: "Restart policy" },
|
||||
{ label: "networks", type: "keyword", info: "Networks to join" },
|
||||
{
|
||||
label: "image",
|
||||
type: "keyword",
|
||||
info: "Specify the image to start the container from",
|
||||
},
|
||||
{ label: "build", type: "keyword", info: "Build configuration" },
|
||||
{ label: "command", type: "keyword", info: "Override the default command" },
|
||||
{ label: "container_name", type: "keyword", info: "Custom container name" },
|
||||
{
|
||||
label: "depends_on",
|
||||
type: "keyword",
|
||||
info: "Express dependency between services",
|
||||
},
|
||||
{ label: "environment", type: "keyword", info: "Add environment variables" },
|
||||
{
|
||||
label: "env_file",
|
||||
type: "keyword",
|
||||
info: "Add environment variables from a file",
|
||||
},
|
||||
{
|
||||
label: "expose",
|
||||
type: "keyword",
|
||||
info: "Expose ports without publishing them",
|
||||
},
|
||||
{ label: "ports", type: "keyword", info: "Expose ports" },
|
||||
{
|
||||
label: "volumes",
|
||||
type: "keyword",
|
||||
info: "Mount host paths or named volumes",
|
||||
},
|
||||
{ label: "restart", type: "keyword", info: "Restart policy" },
|
||||
{ label: "networks", type: "keyword", info: "Networks to join" },
|
||||
].map((opt) => ({
|
||||
...opt,
|
||||
apply: (view: EditorView, completion: Completion) => {
|
||||
const insert = `${completion.label}: `;
|
||||
view.dispatch({
|
||||
changes: {
|
||||
from: view.state.selection.main.from,
|
||||
to: view.state.selection.main.to,
|
||||
insert,
|
||||
},
|
||||
selection: { anchor: view.state.selection.main.from + insert.length },
|
||||
});
|
||||
},
|
||||
...opt,
|
||||
apply: (view: EditorView, completion: Completion) => {
|
||||
const insert = `${completion.label}: `;
|
||||
view.dispatch({
|
||||
changes: {
|
||||
from: view.state.selection.main.from,
|
||||
to: view.state.selection.main.to,
|
||||
insert,
|
||||
},
|
||||
selection: { anchor: view.state.selection.main.from + insert.length },
|
||||
});
|
||||
},
|
||||
}));
|
||||
|
||||
function dockerComposeComplete(
|
||||
context: CompletionContext,
|
||||
context: CompletionContext
|
||||
): CompletionResult | null {
|
||||
const word = context.matchBefore(/\w*/);
|
||||
if (!word) return null;
|
||||
const word = context.matchBefore(/\w*/);
|
||||
if (!word) return null;
|
||||
|
||||
if (!word.text && !context.explicit) return null;
|
||||
if (!word.text && !context.explicit) return null;
|
||||
|
||||
// Check if we're at the root level
|
||||
const line = context.state.doc.lineAt(context.pos);
|
||||
const indentation = /^\s*/.exec(line.text)?.[0].length || 0;
|
||||
// Check if we're at the root level
|
||||
const line = context.state.doc.lineAt(context.pos);
|
||||
const indentation = /^\s*/.exec(line.text)?.[0].length || 0;
|
||||
|
||||
if (indentation === 0) {
|
||||
return {
|
||||
from: word.from,
|
||||
options: dockerComposeServices,
|
||||
validFor: /^\w*$/,
|
||||
};
|
||||
}
|
||||
if (indentation === 0) {
|
||||
return {
|
||||
from: word.from,
|
||||
options: dockerComposeServices,
|
||||
validFor: /^\w*$/,
|
||||
};
|
||||
}
|
||||
|
||||
// If we're inside a service definition
|
||||
if (indentation === 4) {
|
||||
return {
|
||||
from: word.from,
|
||||
options: dockerComposeServiceOptions,
|
||||
validFor: /^\w*$/,
|
||||
};
|
||||
}
|
||||
// If we're inside a service definition
|
||||
if (indentation === 4) {
|
||||
return {
|
||||
from: word.from,
|
||||
options: dockerComposeServiceOptions,
|
||||
validFor: /^\w*$/,
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
return null;
|
||||
}
|
||||
|
||||
interface Props extends ReactCodeMirrorProps {
|
||||
wrapperClassName?: string;
|
||||
disabled?: boolean;
|
||||
language?: "yaml" | "json" | "properties" | "shell";
|
||||
lineWrapping?: boolean;
|
||||
lineNumbers?: boolean;
|
||||
wrapperClassName?: string;
|
||||
disabled?: boolean;
|
||||
language?: "yaml" | "json" | "properties" | "shell";
|
||||
lineWrapping?: boolean;
|
||||
lineNumbers?: boolean;
|
||||
}
|
||||
|
||||
export const CodeEditor = ({
|
||||
className,
|
||||
wrapperClassName,
|
||||
language = "yaml",
|
||||
lineNumbers = true,
|
||||
...props
|
||||
className,
|
||||
wrapperClassName,
|
||||
language = "yaml",
|
||||
lineNumbers = true,
|
||||
...props
|
||||
}: Props) => {
|
||||
const { theme } = useTheme();
|
||||
return (
|
||||
<div className={cn("relative overflow-auto", wrapperClassName)}>
|
||||
<CodeMirror
|
||||
basicSetup={{
|
||||
lineNumbers,
|
||||
foldGutter: true,
|
||||
highlightSelectionMatches: true,
|
||||
highlightActiveLine: !props.disabled,
|
||||
allowMultipleSelections: true,
|
||||
}}
|
||||
theme={theme === "dark" ? githubDark : githubLight}
|
||||
extensions={[
|
||||
language === "yaml"
|
||||
? yaml()
|
||||
: language === "json"
|
||||
? json()
|
||||
: language === "shell"
|
||||
? StreamLanguage.define(shell)
|
||||
: StreamLanguage.define(properties),
|
||||
props.lineWrapping ? EditorView.lineWrapping : [],
|
||||
language === "yaml"
|
||||
? autocompletion({
|
||||
override: [dockerComposeComplete],
|
||||
})
|
||||
: [],
|
||||
]}
|
||||
{...props}
|
||||
editable={!props.disabled}
|
||||
className={cn(
|
||||
"w-full h-full text-sm leading-relaxed",
|
||||
`cm-theme-${theme}`,
|
||||
className,
|
||||
)}
|
||||
/>
|
||||
{props.disabled && (
|
||||
<div className="absolute top-0 rounded-md left-0 w-full h-full flex items-center justify-center z-[10] [background:var(--overlay)] h-full" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
const { theme } = useTheme();
|
||||
return (
|
||||
<div className={cn("relative overflow-auto", wrapperClassName)}>
|
||||
<CodeMirror
|
||||
basicSetup={{
|
||||
lineNumbers,
|
||||
foldGutter: true,
|
||||
highlightSelectionMatches: true,
|
||||
highlightActiveLine: !props.disabled,
|
||||
allowMultipleSelections: true,
|
||||
}}
|
||||
theme={theme === "dark" ? githubDark : githubLight}
|
||||
extensions={[
|
||||
language === "yaml"
|
||||
? yaml()
|
||||
: language === "json"
|
||||
? json()
|
||||
: language === "shell"
|
||||
? StreamLanguage.define(shell)
|
||||
: StreamLanguage.define(properties),
|
||||
props.lineWrapping ? EditorView.lineWrapping : [],
|
||||
language === "yaml"
|
||||
? autocompletion({
|
||||
override: [dockerComposeComplete],
|
||||
})
|
||||
: [],
|
||||
]}
|
||||
{...props}
|
||||
editable={!props.disabled}
|
||||
className={cn(
|
||||
"w-full h-full text-sm leading-relaxed",
|
||||
`cm-theme-${theme}`,
|
||||
className
|
||||
)}
|
||||
/>
|
||||
{props.disabled && (
|
||||
<div className="absolute top-0 rounded-md left-0 w-full flex items-center justify-center z-[10] [background:var(--overlay)] h-full" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,31 +1,31 @@
|
||||
import * as React from "react"
|
||||
import * as DialogPrimitive from "@radix-ui/react-dialog"
|
||||
import { XIcon } from "lucide-react"
|
||||
import * as React from "react";
|
||||
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
||||
import { XIcon } from "lucide-react";
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function Dialog({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
|
||||
return <DialogPrimitive.Root data-slot="dialog" {...props} />
|
||||
return <DialogPrimitive.Root data-slot="dialog" {...props} />;
|
||||
}
|
||||
|
||||
function DialogTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
|
||||
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
|
||||
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
|
||||
}
|
||||
|
||||
function DialogPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
|
||||
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
|
||||
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
|
||||
}
|
||||
|
||||
function DialogClose({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
|
||||
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
|
||||
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
|
||||
}
|
||||
|
||||
function DialogOverlay({
|
||||
@ -41,7 +41,7 @@ function DialogOverlay({
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function DialogContent({
|
||||
@ -62,12 +62,12 @@ function DialogContent({
|
||||
>
|
||||
{children}
|
||||
<DialogPrimitive.Close className="p-2 ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 z-20 cursor-pointer">
|
||||
<XIcon className="size-5"/>
|
||||
<XIcon className="size-5" />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
@ -77,7 +77,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
@ -90,7 +90,7 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function DialogTitle({
|
||||
@ -103,7 +103,7 @@ function DialogTitle({
|
||||
className={cn("text-lg leading-none font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function DialogDescription({
|
||||
@ -116,7 +116,7 @@ function DialogDescription({
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
@ -130,4 +130,4 @@ export {
|
||||
DialogPortal,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { create } from "zustand";
|
||||
import { persist } from "zustand/middleware";
|
||||
|
||||
interface Template {
|
||||
id: string;
|
||||
@ -22,22 +23,34 @@ interface TemplateStore {
|
||||
selectedTags: string[];
|
||||
addSelectedTag: (tag: string) => void;
|
||||
removeSelectedTag: (tag: string) => void;
|
||||
view: "grid" | "rows";
|
||||
setView: (view: "grid" | "rows") => void;
|
||||
}
|
||||
|
||||
export const useStore = create<TemplateStore>((set) => ({
|
||||
templates: [],
|
||||
setTemplates: (templates) => set({ templates }),
|
||||
searchQuery: "",
|
||||
setSearchQuery: (searchQuery) => set({ searchQuery }),
|
||||
selectedTags: [],
|
||||
addSelectedTag: (tag) =>
|
||||
set((state) => ({
|
||||
selectedTags: state.selectedTags.includes(tag)
|
||||
? state.selectedTags
|
||||
: [...state.selectedTags, tag],
|
||||
})),
|
||||
removeSelectedTag: (tag) =>
|
||||
set((state) => ({
|
||||
selectedTags: state.selectedTags.filter((t) => t !== tag),
|
||||
})),
|
||||
}));
|
||||
export const useStore = create<TemplateStore>()(
|
||||
persist(
|
||||
(set) => ({
|
||||
templates: [],
|
||||
setTemplates: (templates) => set({ templates }),
|
||||
searchQuery: "",
|
||||
setSearchQuery: (searchQuery) => set({ searchQuery }),
|
||||
selectedTags: [],
|
||||
addSelectedTag: (tag) =>
|
||||
set((state) => ({
|
||||
selectedTags: state.selectedTags.includes(tag)
|
||||
? state.selectedTags
|
||||
: [...state.selectedTags, tag],
|
||||
})),
|
||||
removeSelectedTag: (tag) =>
|
||||
set((state) => ({
|
||||
selectedTags: state.selectedTags.filter((t) => t !== tag),
|
||||
})),
|
||||
view: "grid",
|
||||
setView: (view) => set({ view }),
|
||||
}),
|
||||
{
|
||||
name: "template-store",
|
||||
partialize: (state) => ({ view: state.view }), // Only persist the view preference
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user