diff --git a/app/package.json b/app/package.json index bc134e9..fb722d2 100644 --- a/app/package.json +++ b/app/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "zustand":"5.0.3", "@radix-ui/react-dialog": "^1.1.6", "@radix-ui/react-dropdown-menu": "^2.1.6", "@radix-ui/react-slot": "^1.1.2", diff --git a/app/pnpm-lock.yaml b/app/pnpm-lock.yaml index a7869dd..2779f37 100644 --- a/app/pnpm-lock.yaml +++ b/app/pnpm-lock.yaml @@ -80,6 +80,9 @@ importers: vite-plugin-static-copy: specifier: 2.3.0 version: 2.3.0(vite@6.2.1(@types/node@20.17.24)(jiti@2.4.2)(lightningcss@1.29.2)) + zustand: + specifier: 5.0.3 + version: 5.0.3(@types/react@19.0.10)(react@19.0.0) devDependencies: '@types/node': specifier: ^20.8.2 @@ -1425,6 +1428,24 @@ packages: yallist@3.1.1: resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==} + zustand@5.0.3: + resolution: {integrity: sha512-14fwWQtU3pH4dE0dOpdMiWjddcH+QzKIgk1cl8epwSE7yag43k/AD/m4L6+K7DytAOr9gGBe3/EXj9g7cdostg==} + engines: {node: '>=12.20.0'} + peerDependencies: + '@types/react': '>=18.0.0' + immer: '>=9.0.6' + react: '>=18.0.0' + use-sync-external-store: '>=1.2.0' + peerDependenciesMeta: + '@types/react': + optional: true + immer: + optional: true + react: + optional: true + use-sync-external-store: + optional: true + snapshots: '@ampproject/remapping@2.3.0': @@ -2640,3 +2661,8 @@ snapshots: w3c-keyname@2.2.8: {} yallist@3.1.1: {} + + zustand@5.0.3(@types/react@19.0.10)(react@19.0.0): + optionalDependencies: + '@types/react': 19.0.10 + react: 19.0.0 diff --git a/app/public/logo.svg b/app/public/logo.svg new file mode 100644 index 0000000..bd63767 --- /dev/null +++ b/app/public/logo.svg @@ -0,0 +1,10 @@ + + + + + \ No newline at end of file diff --git a/app/src/App.tsx b/app/src/App.tsx index af6f47c..a427ed3 100644 --- a/app/src/App.tsx +++ b/app/src/App.tsx @@ -1,9 +1,13 @@ -import TemplateGrid from './components/TemplateGrid'; -import './App.css'; +import TemplateGrid from "./components/TemplateGrid"; +import Navigation from "./components/Navigation"; +import "./App.css"; function App() { return ( +
+ +
); } diff --git a/app/src/components/Navigation.tsx b/app/src/components/Navigation.tsx new file mode 100644 index 0000000..26c9bc4 --- /dev/null +++ b/app/src/components/Navigation.tsx @@ -0,0 +1,63 @@ +import { ModeToggle } from "@/mode-toggle"; +import { StarIcon } from "lucide-react"; +import { Button } from "./ui/button"; +import { useEffect, useState } from "react"; +import DokployLogo from "./ui/dokploy-logo"; + +const Navigation = () => { + const [githubStars, setGithubStars] = useState(0); + useEffect(() => { + const fetchGithubStars = async () => { + try { + const response = await fetch( + "https://api.github.com/repos/dokploy/dokploy" + ); + const data = await response.json(); + setGithubStars(data.stargazers_count); + } catch (error) { + console.error("Error fetching GitHub stars:", error); + } + }; + + fetchGithubStars(); + }, [setGithubStars]); + + return ( +
+
+ +

Dokploy Templates

+
+
+ + +
+
+ ); +}; + +export default Navigation; diff --git a/app/src/components/TemplateGrid.tsx b/app/src/components/TemplateGrid.tsx index f7c63a4..d44cf0a 100644 --- a/app/src/components/TemplateGrid.tsx +++ b/app/src/components/TemplateGrid.tsx @@ -1,18 +1,26 @@ -import React, { useEffect, useState } from 'react'; -import { Input } from './ui/input'; -import { Card, CardHeader, CardTitle, CardContent, CardFooter } from './ui/card'; +import React, { useEffect, useState } from "react"; +import { Input } from "./ui/input"; +import { + Card, + CardHeader, + CardTitle, + CardContent, + CardFooter, +} from "./ui/card"; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, -} from './ui/dialog'; -import { Button } from './ui/button'; -import { toast } from 'sonner'; -import copy from 'copy-to-clipboard'; -import { ModeToggle } from '../mode-toggle'; -import { CodeEditor } from './ui/code-editor'; +} from "./ui/dialog"; +import { Button } from "./ui/button"; +import { toast } from "sonner"; +import copy from "copy-to-clipboard"; +import { ModeToggle } from "../mode-toggle"; +import { CodeEditor } from "./ui/code-editor"; +import { useStore } from "../store"; + interface Template { id: string; name: string; @@ -33,47 +41,53 @@ interface TemplateFiles { } const TemplateGrid: React.FC = () => { - const [templates, setTemplates] = useState([]); + const { templates, setTemplates } = useStore(); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); - const [searchQuery, setSearchQuery] = useState(''); - const [selectedTemplate, setSelectedTemplate] = useState