diff --git a/app/public/logo.svg b/app/public/logo.svg new file mode 100644 index 00000000..bd637677 --- /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 af6f47cc..a427ed34 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 00000000..26c9bc4e --- /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 f7c63a46..d44cf0a6 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