mirror of
https://github.com/Dokploy/templates
synced 2025-06-26 18:16:07 +00:00
chore: ui improvements + add github button
This commit is contained in:
Zakher Masri
parent
197f4e20f7
commit
42302fd53d
10
app/public/logo.svg
Normal file
10
app/public/logo.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 559 446" class="h-10 w-10">
|
||||
<path fill="currentColor"
|
||||
d="M390 56v12c.1 2.3.5 4 1 6a73 73 0 0 0 12 24c2 2.3 5.7 4 7 7 4 3.4 9.6 6.8 14 9 1.7.6 5.7 1.1 7 2 1.9 1.3 2.9 2.3 0 4v1c-.6 1.8-1.9 3.5-3 5q-3 4-7 7c-4.3 3.2-9.5 6.8-15 7h-1q-2 1.6-5 2h-4c-5.2.7-12.9 2.2-18 0h-6c-1.6 0-3-.8-4-1h-3a17 17 0 0 1-6-2h-1c-2.5-.1-4-1.2-6-2l-4-1c-8.4-2-20.3-6.6-27-12h-1c-4.6-1-9.5-4.3-13.7-6.3s-10.5-3-13.3-6.7h-1c-4-1-8.9-3.5-12-6h-1c-6.8-1.6-13.6-6-20-9-6.5-2.8-14.6-5.7-20-10h-1c-7-1.2-15.4-4-22-6h-97c-5.3 4.3-13.7 4.3-18.7 10.3S90.8 101 88 108c-.4 1.5-.8 2.3-1 4-.2 1.6-.8 4-1 5v51c.2 1.2.8 3.2 1 5 .2 2 .5 3.2 1 5a79 79 0 0 0 6 12c.8.7 1.4 2.2 2 3 1.8 2 4.9 3.4 6 6 9.5 8.3 23.5 10.3 33 18h1c5.1 1.2 12 4.8 16 8h1c4 1 8.9 3.5 12 6h1q4.6 1.2 8 4h1c2 .1 2.6 1.3 4 2 1.6.8 2.7.7 4 2h1q2.5.3 4 2h1c3 .7 6.7 2 9 4h1c4.7.8 13.4 3.1 17 6h1c2.5.1 4 1.3 6 2 1.8.4 3 .8 5 1q3 .4 5 1c1.6-.2 2 0 3 1h1q2.5-.5 4 1h1q2.5-.5 4 1h1c2.2-.2 4.5-.3 6 1h1q4-.4 7 1h45c1.2-.2 3.1-1 5-1h6c1.5-.6 2.9-1.3 5-1h1q1.5-1.4 4-1h1q1.5-1.4 4-1h1c2.4-1.3 5-1.6 8-2l5-1c2-.7 3.6-1.6 6-2 4-.7 7.2-1.7 11-3 2.3-1 4.2-2.5 7-3h1q1.5-1.7 4-2h1c1.9-1.5 3.9-2 6-3q2.9-1.6 6-3a95 95 0 0 0 11-5c4.4-2.8 8.9-6 14-8 0 0 .6.2 1 0 1.8-2.8 7-4.8 10-6 0 0 .6.2 1 0 1.5-2.4 5.3-4 8-5 0 0 .6.2 1 0 1.5-2.4 5.3-4 8-5 0 0 .6.2 1 0 1.3-2 3.8-3.1 6-4 0 0 .6.2 1 0 2-3 7.7-5.6 11-7l5-2c6.3-3.8 11.8-9.6 18-14v-1c0-1.9-.4-4.2 0-6-1-4.5-3.9-5.5-7-8h-1c-1.2 0-2.8-.2-4 0-8.9 1.7-16.5 11.3-25.2 14.8-8.8 3.4-16.9 10.7-25.8 14.2h-1c-10.9 10.6-29.2 16-42.7 23.3S343.7 234.6 328 235h-1q-1.5 1.4-4 1h-1q-1.5 1.4-4 1h-1c-1.5 1.3-3.9 1.2-6 1h-1c-1.7 1.3-4.6 1.2-7 1-1 .2-2.4 1-4 1h-5c-6.6 0-13.4.4-20 0-1.9-.1-2.7.3-4-1h-8c-2.8-.2-5.7-1.3-8-2h-2q-5.7.4-10-2h-1q-4.5 0-8-2h-1a10 10 0 0 1-6-2h-1c-5.9-.2-12-3.8-17-6l-4-1c-1.7-.5-2.8-.7-4-2h-1q-2.5-.2-4-2h-1q-3.4-.9-6-3h-1c-3.5-.8-7.3-2.9-10-5h-1c-1.7 0-2.2-.7-3-2h-1c-11.6-2.7-23.2-11.5-34.2-15.8-11-4.2-25.9-9.2-29.8-21.2h4c16.2 0 32.8-1 49 0 1.7.1 3 .8 4 1 2.1.4 3.4-.5 5 1h1c3.6.1 8.4 1.8 11 4h1a45 45 0 0 1 18 8h1q4.6 1.2 8 4h1c4.2 1 8.3 3.4 12 5q3.4 1.2 7 2c5.7 1.3 13 2.3 18 5h1c3.7-.2 7 1.1 10 2h9c1.6 0 3 .8 4 1h32c2.2-1.6 6-1 9-1h1a63 63 0 0 1 22-4 22 22 0 0 1 8-2c1.7-1.4 3.7-1.6 6-2a81 81 0 0 0 12-3c2.3-1 4.2-2.5 7-3h1q1.5-1.7 4-2h1c1.9-1.5 3.6-2.2 6-3l3-1c4.1-2.3 8.4-5.2 13-7 0 0 .6.2 1 0 1.5-2.4 6.3-5 9-6 0 0 .6.2 1 0 5.3-8.1 17.6-12.5 24.8-20.2C439.9 144 445 133 452 126v-1a12 12 0 0 1 2-5c2.1-2.2 8.9-1 12-1q2 .2 4 0c1-.2 2.3-1.2 4-1h1q2.1-1.5 5-2h1q2.1-1.9 5-3s.6.2 1 0c9-9.3 18-15.4 23-28 1.1-2.8 3.5-6.4 4-9 .2-1 .2-3 0-4-1.5-6-12.3-2.4-15.7 2.3S484.7 80 479 80h-7c-7.8 4.3-19.3 5.7-23 16a37 37 0 0 0-22-24c-1.5-.5-2.5-.7-4-1-2.1-.5-3.6-.2-5-2h-1a22 22 0 0 1-12-8c-2-2.9-3.4-6.5-6-9h-1c-3.9-.6-6.1 1-8 4m-181 45h1c2.2-.2 4.5-.3 6 1h1q2.5-.5 4 1h1a33 33 0 0 1 17 7h1c4.4 1 8.2 4.1 12 6 2.1 1 4.1 1.5 6 3h1c4 1 8.9 3.5 12 6h1c4 1 8.9 3.5 12 6h1c4 1 8.9 3.5 12 6h1a61 61 0 0 1 21 10h1c3.5.8 7.3 2.9 10 5h1c6.1 1.4 12.3 5 18 7 1.8.4 3 .8 5 1 1.8.2 3.7.8 5 1q2.5-.5 4 1h6c2.5 0 4 .3 6 1h3q-.7 2.1-3 2a46 46 0 0 1-16 7l-10 3c-2 .8-3.4 1.9-6 2h-1c-2.6 2.1-7.5 3-11 3h-1c-3.1 2.5-10.7 3.5-15 3h-1c-1.5 1.3-3.9 1.2-6 1-1 .2-2.4 1-4 1h-11c-3.8.4-8.3.4-12 0h-9c-2.3 0-4.3-.7-6-1h-3c-1.8 0-2.9-.7-4-1-3.5-.8-7-.7-10-2h-1c-4.1-.7-9.8-1.4-13-4h-1q-4-.6-7-3h-1q-2.5-.2-4-2h-1q-3.4-.9-6-3h-1c-7.2-1.7-13.3-5.9-20.2-8.8-7-2.8-16.2-4.3-22.8-7.2h-11c-14 0-28.9.3-42-1-2.3 0-4.8.3-7 0a6 6 0 0 1-5-5c-1.8-4.8-.4-10.4 0-15 0-4.3-.4-8.7 0-13 .2-3.2 2.2-7.3 4-10q2-3 5-5c2.1-2 5.4-2.3 8-3 15.6-3.9 36.3-1 53-1 5.2 0 12-.5 17 0s12.2-1.8 16 1Z"></path>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M162 132v1c1.8 2.9 4.5 5.3 8 6 .3-.2 3.7-.2 4 0 7-1.4 9.2-8.8 7-15v-1a14 14 0 0 0-7-4c-.3.2-3.7.2-4 0-6.5 1.3-8.6 6.8-8 13Z"></path>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M465 211h-1c-18.2 14.6-41.2 24.6-60 39-19 14.2-42.7 29.3-66 34l-4 1c-2.4 1-4 2-7 2h-1q-3.5 2-8 2h-1c-1.3 1.2-3 1.1-5 1h-2q-2.6 1.1-6 1h-2c-3 1.2-6.5 1-10 1-6.3.6-13.8.6-20 0-3.4 0-8.4.9-11-1h-1c-2.2.2-4.5.3-6-1h-1c-2 .2-3.7.2-5-1h-1c-7.6.5-16.5-3.4-23-6l-4-1a129 129 0 0 1-36.2-15.8c-10.4-6.6-23.2-12.8-32.5-20.5-9.2-7.7-23.8-12.8-30.3-22.7h-1c-2.3-1.4-4.5-2.7-6-5h-1c-4-2.5-8.5-5.2-12-8h-9a9 9 0 0 0-6 7c.3 3.3 0 6.7 0 10v9c.2 1.6 1 3.8 1 6v3c.2 1 1.2 2.2 1 4v1c1.2 1.2.8 2.2 1 4 .8 6.7 3 12.6 5 19 1.7 4.3 4.2 9.1 5 14v1q1.8 1.5 2 4v1a36 36 0 0 1 5 10c.7 2 1 3 2 5 8 12.7 15.7 25.5 25.8 37.3 10 11.7 20.8 20.6 32.4 30.4 11.7 9.9 28.3 14 39.8 23.3h1q2.5.3 4 2h1c2.8.4 4.8 2 7 3l7 2c5.7 1.3 13 2.3 18 5h1c2.1-.3 3.6.8 5 1h3c2.8.2 5.8 1 8 2h8c2.1 0 4.6.8 6 1h21c1.2-.2 3.2-1 5-1h9c3.3-1 7-2.4 11-2h1c2.7-2.2 7.4-2.4 11-3a55 55 0 0 0 8-2c6.5-2.6 13.9-6.3 21-8h1c8.5-6.8 20.6-9.7 29.2-16.8 8.7-7 18.3-12.8 26.8-20.2 4.4-3.8 9-9 13-13 14.8-14.8 20.7-34.6 33-50v-1q.9-3.4 3-6v-1q.3-2.5 2-4v-1c.5-3.3 2-8.6 4-11v-1q0-3.5 2-6v-1c1.1-6.7 2.4-15 5-21v-1c-.2-2-.2-3.7 1-5v-8c0-5.3-.5-10.8 0-16a14 14 0 0 0-4-6c-1-.5-1.1-.4-2-1h-6q-2.1 1.5-5 2m-6 38c-2.1 13.4-21.2 20.3-31 30-10 9.5-23.7 19-35 27-11.5 8-25.1 19.7-39 23h-1a22 22 0 0 1-10 4h-1a25 25 0 0 1-12 4h-1q-3.5 2-8 2h-1c-1.1 1.1-2.3 1-4 1h-2c-1.2.4-2.2 1-4 1h-2c-1.8.7-3.6 1.3-6 1h-1c-1.2 1.2-2.3 1-4 1h-5c-5.7.6-12.3.8-18 0h-4c-1.9 0-2.7-.6-4-1h-6c-1.9 0-2.7.3-4-1h-1q-2.5.5-4-1h-1c-8.1.5-16.8-3.6-24.2-5.8S210 329.8 204 325h-1c-12.8-5-27.1-15.6-37.7-24.3S138.8 284.2 131 273c-.3-.2-1 0-1 0-5.7-4.4-16.6-10-19-17-.9-2.6-1-5.4-2-8-.8-2.2-2.5-5-2-8a667 667 0 0 0 88 56h1q3.4.9 6 3h1c2.8.4 4.8 2 7 3q5 1.8 10 3l6 2q2.9.6 6 1 3 .4 5 1c1.6-.2 2 0 3 1h1c2-.2 3.7-.2 5 1h1c2.2-.3 3.4.4 5 1h8c1.6 0 3 .9 4 1h40c1.8-1.3 4.6-1.2 7-1h1c1.2-1.2 3.2-1.2 5-1h1c1.2-1.2 3.2-1.2 5-1h1c1.1-1.1 2.3-1 4-1h2c3.5-1.7 6.9-2.3 11-3l4-1c3.4-1.4 7.1-3 11-4 1.5-.4 2.5-.5 4-1 1.4-.7 2-1.9 4-2h1q2.6-2.1 6-3h1c2.5-2 6-3.8 9-5l3-1c1.4-.9 2-2.5 4-3h1q1.4-2.2 4-3h1c7.3-7.7 19-13.2 27.7-19.3 8.8-6.1 18.2-15 28.3-18.7.4-.2 1 0 1 0q3.8-3.9 9-6c1.3 2.5-.5 6.7-1 10m-20 55c-.2.4 0 1 0 1-3.4 9.6-12.7 19-19 27a88 88 0 0 1-12 12 214 214 0 0 1-26.7 20.3c-9.5 5.8-20 14.8-31.3 16.7h-1a22 22 0 0 1-10 4h-1c-3.2 2.6-8.9 3.3-13 4h-1q-1.5 1.4-4 1h-1q-1.5 1.4-4 1h-1c-4.9 2.3-10.5 1-16 2-1 .2-2.5 1-4 1-6.2.4-12.8.3-19 0-1.8 0-3.8-.8-5-1h-4c-1.6 0-3-.9-4-1h-4c-3.9-.3-8.8-1.3-12-3h-1c-3.3-.5-7.5-1-10-3h-1c-3.6-.1-8.4-1.8-11-4h-1c-3.9-.6-8-2.6-11-5h-1c-16.1-3.8-32.2-18.9-45-29a200 200 0 0 1-40-51c17.7 11.5 35 25.5 52 38h1c4 1.6 12.8 5.4 15 9h1c4.6 1 10.4 4.1 14 7h1q2.5.3 4 2h1c3.3.5 8.6 2 11 4h1q3.5 0 6 2h1q2.5-.5 4 1h1q2.5-.5 4 1h1c3.8-.2 7.9 1 11 2h9c1.6 0 3 .8 4 1h32c1.2-.2 3.2-1 5-1h8a139 139 0 0 1 20-4l5-1c2-.7 3.7-1.5 6-2l4-1c1.5-.6 3-1.7 5-2h1q3-2.4 7-3h1q2.6-2.1 6-3h1c11.7-9.4 27.6-14.6 39-25 11.6-10.3 25-18.5 37-28a15 15 0 0 1-5 10Z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.6 KiB |
@ -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 (
|
||||
<div>
|
||||
<Navigation />
|
||||
<TemplateGrid />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
63
app/src/components/Navigation.tsx
Normal file
63
app/src/components/Navigation.tsx
Normal file
@ -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 (
|
||||
<div className="flex sticky top-0 bg-background/80 backdrop-blur-xs z-10 justify-between items-center p-4 border-b">
|
||||
<div className="flex flex-row gap-2 justify-center items-center">
|
||||
<DokployLogo className="w-10 h-10 text-black dark:text-white" />
|
||||
<h1 className="text-2xl font-bold">Dokploy Templates</h1>
|
||||
</div>
|
||||
<div className="flex flex-row gap-2 justify-center items-center">
|
||||
<Button
|
||||
onClick={() => {
|
||||
window.open("https://github.com/dokploy/dokploy", "_blank");
|
||||
}}
|
||||
variant="outline"
|
||||
// className="flex cursor-pointer hover:bg-gray-400 flex-row gap-2 items-center"
|
||||
>
|
||||
<div className="flex items-center gap-1">
|
||||
<StarIcon className="w-4 h-4 text-gray-300 fill-gray-300" />
|
||||
<span>{githubStars.toLocaleString()}</span>
|
||||
</div>
|
||||
<svg
|
||||
width="19"
|
||||
height="19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="xMidYMid"
|
||||
viewBox="0 0 256 256"
|
||||
>
|
||||
<path
|
||||
d="M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46 6.397 1.185 8.746-2.777 8.746-6.158 0-3.052-.12-13.135-.174-23.83-35.61 7.742-43.124-15.103-43.124-15.103-5.823-14.795-14.213-18.73-14.213-18.73-11.613-7.944.876-7.78.876-7.78 12.853.902 19.621 13.19 19.621 13.19 11.417 19.568 29.945 13.911 37.249 10.64 1.149-8.272 4.466-13.92 8.127-17.116-28.431-3.236-58.318-14.212-58.318-63.258 0-13.975 5-25.394 13.188-34.358-1.329-3.224-5.71-16.242 1.24-33.874 0 0 10.749-3.44 35.21 13.121 10.21-2.836 21.16-4.258 32.038-4.307 10.878.049 21.837 1.47 32.066 4.307 24.431-16.56 35.165-13.12 35.165-13.12 6.967 17.63 2.584 30.65 1.255 33.873 8.207 8.964 13.173 20.383 13.173 34.358 0 49.163-29.944 59.988-58.447 63.157 4.591 3.972 8.682 11.762 8.682 23.704 0 17.126-.148 30.91-.148 35.126 0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002 256 57.307 198.691 0 128.001 0Zm-80.06 182.34c-.282.636-1.283.827-2.194.39-.929-.417-1.45-1.284-1.15-1.922.276-.655 1.279-.838 2.205-.399.93.418 1.46 1.293 1.139 1.931Zm6.296 5.618c-.61.566-1.804.303-2.614-.591-.837-.892-.994-2.086-.375-2.66.63-.566 1.787-.301 2.626.591.838.903 1 2.088.363 2.66Zm4.32 7.188c-.785.545-2.067.034-2.86-1.104-.784-1.138-.784-2.503.017-3.05.795-.547 2.058-.055 2.861 1.075.782 1.157.782 2.522-.019 3.08Zm7.304 8.325c-.701.774-2.196.566-3.29-.49-1.119-1.032-1.43-2.496-.726-3.27.71-.776 2.213-.558 3.315.49 1.11 1.03 1.45 2.505.701 3.27Zm9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033-1.448-.439-2.395-1.613-2.103-2.626.301-1.01 1.747-1.484 3.207-1.028 1.446.436 2.396 1.602 2.095 2.622Zm10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95-1.53.034-2.769-.82-2.786-1.86 0-1.065 1.202-1.932 2.733-1.958 1.522-.03 2.768.818 2.768 1.868Zm10.555-.405c.182 1.03-.875 2.088-2.387 2.37-1.485.271-2.861-.365-3.05-1.386-.184-1.056.893-2.114 2.376-2.387 1.514-.263 2.868.356 3.061 1.403Z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
</Button>
|
||||
<ModeToggle />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navigation;
|
||||
@ -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<Template[]>([]);
|
||||
const { templates, setTemplates } = useStore();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [selectedTemplate, setSelectedTemplate] = useState<Template | null>(null);
|
||||
const [templateFiles, setTemplateFiles] = useState<TemplateFiles | null>(null);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [selectedTemplate, setSelectedTemplate] = useState<Template | null>(
|
||||
null
|
||||
);
|
||||
const [templateFiles, setTemplateFiles] = useState<TemplateFiles | null>(
|
||||
null
|
||||
);
|
||||
const [modalLoading, setModalLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchTemplates = async () => {
|
||||
try {
|
||||
const response = await fetch('/meta.json');
|
||||
const response = await fetch("/meta.json");
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch templates');
|
||||
throw new Error("Failed to fetch templates");
|
||||
}
|
||||
const data = await response.json();
|
||||
setTemplates(data);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'An error occurred');
|
||||
setError(err instanceof Error ? err.message : "An error occurred");
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchTemplates();
|
||||
}, []);
|
||||
}, [setTemplates]);
|
||||
|
||||
const fetchTemplateFiles = async (templateId: string) => {
|
||||
setModalLoading(true);
|
||||
try {
|
||||
const [dockerComposeRes, configRes] = await Promise.all([
|
||||
fetch(`/blueprints/${templateId}/docker-compose.yml`),
|
||||
fetch(`/blueprints/${templateId}/template.yml`)
|
||||
fetch(`/blueprints/${templateId}/template.yml`),
|
||||
]);
|
||||
|
||||
const dockerCompose = dockerComposeRes.ok ? await dockerComposeRes.text() : null;
|
||||
const dockerCompose = dockerComposeRes.ok
|
||||
? await dockerComposeRes.text()
|
||||
: null;
|
||||
const config = configRes.ok ? await configRes.text() : null;
|
||||
|
||||
setTemplateFiles({ dockerCompose, config });
|
||||
} catch (err) {
|
||||
console.error('Error fetching template files:', err);
|
||||
console.error("Error fetching template files:", err);
|
||||
setTemplateFiles({ dockerCompose: null, config: null });
|
||||
} finally {
|
||||
setModalLoading(false);
|
||||
@ -91,11 +105,11 @@ const TemplateGrid: React.FC = () => {
|
||||
);
|
||||
|
||||
const getBase64Config = () => {
|
||||
if (!templateFiles?.dockerCompose && !templateFiles?.config) return '';
|
||||
|
||||
if (!templateFiles?.dockerCompose && !templateFiles?.config) return "";
|
||||
|
||||
const configObj = {
|
||||
compose: templateFiles.dockerCompose || '',
|
||||
config: templateFiles.config || ''
|
||||
compose: templateFiles.dockerCompose || "",
|
||||
config: templateFiles.config || "",
|
||||
};
|
||||
|
||||
return btoa(JSON.stringify(configObj, null, 2));
|
||||
@ -114,7 +128,9 @@ const TemplateGrid: React.FC = () => {
|
||||
if (error) {
|
||||
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-4">Error</h1>
|
||||
<h1 className="text-4xl font-bold text-center text-gray-900 mb-4">
|
||||
Error
|
||||
</h1>
|
||||
<p className="text-center text-red-600">{error}</p>
|
||||
</div>
|
||||
);
|
||||
@ -125,7 +141,6 @@ const TemplateGrid: React.FC = () => {
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<h1 className="text-2xl md:text-3xl xl:text-4xl font-bold text-center mb-8">
|
||||
Available Templates ({templates.length})
|
||||
<ModeToggle />
|
||||
</h1>
|
||||
<div className="max-w-xl mx-auto mb-12">
|
||||
<div className="relative">
|
||||
@ -157,20 +172,23 @@ const TemplateGrid: React.FC = () => {
|
||||
filteredTemplates.map((template) => (
|
||||
<Card
|
||||
key={template.id}
|
||||
className="cursor-pointer hover:shadow-lg transition-all duration-200 h-fit"
|
||||
className="cursor-pointer hover:shadow-lg transition-all duration-200 h-full"
|
||||
onClick={() => handleTemplateClick(template)}
|
||||
>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl">
|
||||
<img
|
||||
src={`/blueprints/${template.id}/${template.logo}`}
|
||||
<CardTitle className="text-xl ">
|
||||
<img
|
||||
src={`/blueprints/${template.id}/${template.logo}`}
|
||||
alt={template.name}
|
||||
className="w-12 h-12 object-contain"
|
||||
className="w-12 h-12 object-contain mb-2"
|
||||
/>
|
||||
{template.name}</CardTitle>
|
||||
{template.name}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground line-clamp-2">{template.description}</p>
|
||||
<CardContent className="flex-1">
|
||||
<p className="text-sm text-muted-foreground line-clamp-2">
|
||||
{template.description}
|
||||
</p>
|
||||
<div className="mt-2 flex flex-wrap gap-1">
|
||||
{template.tags.slice(0, 3).map((tag) => (
|
||||
<span
|
||||
@ -183,7 +201,9 @@ const TemplateGrid: React.FC = () => {
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="flex justify-between items-center">
|
||||
<span className="text-sm text-gray-500">v{template.version}</span>
|
||||
<span className="text-sm text-gray-500">
|
||||
v{template.version}
|
||||
</span>
|
||||
<svg
|
||||
className="w-4 h-4 text-gray-400"
|
||||
fill="none"
|
||||
@ -210,21 +230,28 @@ const TemplateGrid: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Dialog open={!!selectedTemplate} onOpenChange={() => setSelectedTemplate(null)}>
|
||||
<Dialog
|
||||
open={!!selectedTemplate}
|
||||
onOpenChange={() => setSelectedTemplate(null)}
|
||||
>
|
||||
<DialogContent className="max-w-[90vw] w-full lg:max-w-7xl max-h-[85vh] overflow-y-auto p-6">
|
||||
<DialogHeader className="space-y-4">
|
||||
<div className="flex items-center gap-4">
|
||||
{selectedTemplate?.logo && (
|
||||
<img
|
||||
src={`/blueprints/${selectedTemplate.id}/${selectedTemplate.logo}`}
|
||||
<img
|
||||
src={`/blueprints/${selectedTemplate.id}/${selectedTemplate.logo}`}
|
||||
alt={selectedTemplate.name}
|
||||
className="w-12 h-12 object-contain"
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
<DialogTitle className="text-2xl">{selectedTemplate?.name}</DialogTitle>
|
||||
<DialogTitle className="text-2xl">
|
||||
{selectedTemplate?.name}
|
||||
</DialogTitle>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<span className="text-sm text-gray-500">{selectedTemplate?.version}</span>
|
||||
<span className="text-sm text-gray-500">
|
||||
{selectedTemplate?.version}
|
||||
</span>
|
||||
<div className="flex gap-2">
|
||||
{selectedTemplate?.links.github && (
|
||||
<a
|
||||
@ -248,13 +275,13 @@ const TemplateGrid: React.FC = () => {
|
||||
)}
|
||||
|
||||
<a
|
||||
href={`https://github.com/Dokploy/templates/tree/main/blueprints/${selectedTemplate?.id}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
Edit Template
|
||||
</a>
|
||||
href={`https://github.com/Dokploy/templates/tree/main/blueprints/${selectedTemplate?.id}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-gray-600 hover:text-gray-900"
|
||||
>
|
||||
Edit Template
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -273,7 +300,7 @@ const TemplateGrid: React.FC = () => {
|
||||
))}
|
||||
</div>
|
||||
</DialogHeader>
|
||||
|
||||
|
||||
{modalLoading ? (
|
||||
<div className="py-12 text-center">
|
||||
<div className="inline-block animate-spin rounded-full h-10 w-10 border-4 border-solid border-blue-500 border-r-transparent"></div>
|
||||
@ -282,66 +309,72 @@ const TemplateGrid: React.FC = () => {
|
||||
) : (
|
||||
<div className="grid gap-8 mt-6">
|
||||
{templateFiles?.dockerCompose && (
|
||||
<div className='max-w-6xl w-full relative'>
|
||||
<div className="max-w-6xl w-full relative">
|
||||
<h3 className="text-xl font-semibold mb-3 flex items-center gap-2">
|
||||
Docker Compose
|
||||
<span className="text-xs font-normal text-gray-500">docker-compose.yml</span>
|
||||
<span className="text-xs font-normal text-gray-500">
|
||||
docker-compose.yml
|
||||
</span>
|
||||
</h3>
|
||||
<CodeEditor
|
||||
value={templateFiles.dockerCompose || ''}
|
||||
value={templateFiles.dockerCompose || ""}
|
||||
language="yaml"
|
||||
className='font-mono'
|
||||
className="font-mono"
|
||||
/>
|
||||
<Button
|
||||
onClick={() => {
|
||||
toast.success('Copied to clipboard')
|
||||
copy(templateFiles.dockerCompose || '')
|
||||
}}
|
||||
className="absolute top-10 right-2 px-3 py-1 text-sm cursor-pointer"
|
||||
>
|
||||
Copy
|
||||
</Button>
|
||||
onClick={() => {
|
||||
toast.success("Copied to clipboard");
|
||||
copy(templateFiles.dockerCompose || "");
|
||||
}}
|
||||
className="absolute top-10 right-2 px-3 py-1 text-sm cursor-pointer"
|
||||
>
|
||||
Copy
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
{templateFiles?.config && (
|
||||
<div className='max-w-6xl w-full relative'>
|
||||
<div className="max-w-6xl w-full relative">
|
||||
<h3 className="text-xl font-semibold mb-3 flex items-center gap-2">
|
||||
Configuration
|
||||
<span className="text-xs font-normal text-gray-500">template.yml</span>
|
||||
<span className="text-xs font-normal text-gray-500">
|
||||
template.yml
|
||||
</span>
|
||||
</h3>
|
||||
<CodeEditor
|
||||
value={templateFiles.config || ''}
|
||||
value={templateFiles.config || ""}
|
||||
language="yaml"
|
||||
className='font-mono'
|
||||
className="font-mono"
|
||||
/>
|
||||
|
||||
<Button
|
||||
onClick={() => {
|
||||
toast.success('Copied to clipboard')
|
||||
copy(templateFiles.config || '')
|
||||
}}
|
||||
className="absolute top-10 right-2 px-3 py-1 text-sm cursor-pointer"
|
||||
>
|
||||
Copy
|
||||
</Button>
|
||||
onClick={() => {
|
||||
toast.success("Copied to clipboard");
|
||||
copy(templateFiles.config || "");
|
||||
}}
|
||||
className="absolute top-10 right-2 px-3 py-1 text-sm cursor-pointer"
|
||||
>
|
||||
Copy
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
{(templateFiles?.dockerCompose || templateFiles?.config) && (
|
||||
<div className='max-w-6xl w-full'>
|
||||
<div className="max-w-6xl w-full">
|
||||
<h3 className="text-xl font-semibold mb-3 flex items-center gap-2">
|
||||
Base64 Configuration
|
||||
<span className="text-xs font-normal text-gray-500">Encoded template files</span>
|
||||
<span className="text-xs font-normal text-gray-500">
|
||||
Encoded template files
|
||||
</span>
|
||||
</h3>
|
||||
<div className="relative">
|
||||
<CodeEditor
|
||||
value={getBase64Config()}
|
||||
language="properties"
|
||||
className='font-mono'
|
||||
className="font-mono"
|
||||
/>
|
||||
<Button
|
||||
onClick={() => {
|
||||
toast.success('Copied to clipboard')
|
||||
copy(getBase64Config())
|
||||
toast.success("Copied to clipboard");
|
||||
copy(getBase64Config());
|
||||
}}
|
||||
className="absolute top-2 right-2 px-3 py-1 text-sm cursor-pointer"
|
||||
>
|
||||
@ -352,7 +385,9 @@ const TemplateGrid: React.FC = () => {
|
||||
)}
|
||||
{!templateFiles?.dockerCompose && !templateFiles?.config && (
|
||||
<div className="text-center py-8">
|
||||
<p className="text-gray-500">No configuration files available for this template.</p>
|
||||
<p className="text-gray-500">
|
||||
No configuration files available for this template.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@ -363,4 +398,4 @@ const TemplateGrid: React.FC = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default TemplateGrid;
|
||||
export default TemplateGrid;
|
||||
|
||||
@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
|
||||
25
app/src/components/ui/dokploy-logo.tsx
Normal file
25
app/src/components/ui/dokploy-logo.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
const DokployLogo = ({ ...props }: React.ComponentProps<"svg">) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 559 446"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M390 56v12c.1 2.3.5 4 1 6a73 73 0 0 0 12 24c2 2.3 5.7 4 7 7 4 3.4 9.6 6.8 14 9 1.7.6 5.7 1.1 7 2 1.9 1.3 2.9 2.3 0 4v1c-.6 1.8-1.9 3.5-3 5q-3 4-7 7c-4.3 3.2-9.5 6.8-15 7h-1q-2 1.6-5 2h-4c-5.2.7-12.9 2.2-18 0h-6c-1.6 0-3-.8-4-1h-3a17 17 0 0 1-6-2h-1c-2.5-.1-4-1.2-6-2l-4-1c-8.4-2-20.3-6.6-27-12h-1c-4.6-1-9.5-4.3-13.7-6.3s-10.5-3-13.3-6.7h-1c-4-1-8.9-3.5-12-6h-1c-6.8-1.6-13.6-6-20-9-6.5-2.8-14.6-5.7-20-10h-1c-7-1.2-15.4-4-22-6h-97c-5.3 4.3-13.7 4.3-18.7 10.3S90.8 101 88 108c-.4 1.5-.8 2.3-1 4-.2 1.6-.8 4-1 5v51c.2 1.2.8 3.2 1 5 .2 2 .5 3.2 1 5a79 79 0 0 0 6 12c.8.7 1.4 2.2 2 3 1.8 2 4.9 3.4 6 6 9.5 8.3 23.5 10.3 33 18h1c5.1 1.2 12 4.8 16 8h1c4 1 8.9 3.5 12 6h1q4.6 1.2 8 4h1c2 .1 2.6 1.3 4 2 1.6.8 2.7.7 4 2h1q2.5.3 4 2h1c3 .7 6.7 2 9 4h1c4.7.8 13.4 3.1 17 6h1c2.5.1 4 1.3 6 2 1.8.4 3 .8 5 1q3 .4 5 1c1.6-.2 2 0 3 1h1q2.5-.5 4 1h1q2.5-.5 4 1h1c2.2-.2 4.5-.3 6 1h1q4-.4 7 1h45c1.2-.2 3.1-1 5-1h6c1.5-.6 2.9-1.3 5-1h1q1.5-1.4 4-1h1q1.5-1.4 4-1h1c2.4-1.3 5-1.6 8-2l5-1c2-.7 3.6-1.6 6-2 4-.7 7.2-1.7 11-3 2.3-1 4.2-2.5 7-3h1q1.5-1.7 4-2h1c1.9-1.5 3.9-2 6-3q2.9-1.6 6-3a95 95 0 0 0 11-5c4.4-2.8 8.9-6 14-8 0 0 .6.2 1 0 1.8-2.8 7-4.8 10-6 0 0 .6.2 1 0 1.5-2.4 5.3-4 8-5 0 0 .6.2 1 0 1.5-2.4 5.3-4 8-5 0 0 .6.2 1 0 1.3-2 3.8-3.1 6-4 0 0 .6.2 1 0 2-3 7.7-5.6 11-7l5-2c6.3-3.8 11.8-9.6 18-14v-1c0-1.9-.4-4.2 0-6-1-4.5-3.9-5.5-7-8h-1c-1.2 0-2.8-.2-4 0-8.9 1.7-16.5 11.3-25.2 14.8-8.8 3.4-16.9 10.7-25.8 14.2h-1c-10.9 10.6-29.2 16-42.7 23.3S343.7 234.6 328 235h-1q-1.5 1.4-4 1h-1q-1.5 1.4-4 1h-1c-1.5 1.3-3.9 1.2-6 1h-1c-1.7 1.3-4.6 1.2-7 1-1 .2-2.4 1-4 1h-5c-6.6 0-13.4.4-20 0-1.9-.1-2.7.3-4-1h-8c-2.8-.2-5.7-1.3-8-2h-2q-5.7.4-10-2h-1q-4.5 0-8-2h-1a10 10 0 0 1-6-2h-1c-5.9-.2-12-3.8-17-6l-4-1c-1.7-.5-2.8-.7-4-2h-1q-2.5-.2-4-2h-1q-3.4-.9-6-3h-1c-3.5-.8-7.3-2.9-10-5h-1c-1.7 0-2.2-.7-3-2h-1c-11.6-2.7-23.2-11.5-34.2-15.8-11-4.2-25.9-9.2-29.8-21.2h4c16.2 0 32.8-1 49 0 1.7.1 3 .8 4 1 2.1.4 3.4-.5 5 1h1c3.6.1 8.4 1.8 11 4h1a45 45 0 0 1 18 8h1q4.6 1.2 8 4h1c4.2 1 8.3 3.4 12 5q3.4 1.2 7 2c5.7 1.3 13 2.3 18 5h1c3.7-.2 7 1.1 10 2h9c1.6 0 3 .8 4 1h32c2.2-1.6 6-1 9-1h1a63 63 0 0 1 22-4 22 22 0 0 1 8-2c1.7-1.4 3.7-1.6 6-2a81 81 0 0 0 12-3c2.3-1 4.2-2.5 7-3h1q1.5-1.7 4-2h1c1.9-1.5 3.6-2.2 6-3l3-1c4.1-2.3 8.4-5.2 13-7 0 0 .6.2 1 0 1.5-2.4 6.3-5 9-6 0 0 .6.2 1 0 5.3-8.1 17.6-12.5 24.8-20.2C439.9 144 445 133 452 126v-1a12 12 0 0 1 2-5c2.1-2.2 8.9-1 12-1q2 .2 4 0c1-.2 2.3-1.2 4-1h1q2.1-1.5 5-2h1q2.1-1.9 5-3s.6.2 1 0c9-9.3 18-15.4 23-28 1.1-2.8 3.5-6.4 4-9 .2-1 .2-3 0-4-1.5-6-12.3-2.4-15.7 2.3S484.7 80 479 80h-7c-7.8 4.3-19.3 5.7-23 16a37 37 0 0 0-22-24c-1.5-.5-2.5-.7-4-1-2.1-.5-3.6-.2-5-2h-1a22 22 0 0 1-12-8c-2-2.9-3.4-6.5-6-9h-1c-3.9-.6-6.1 1-8 4m-181 45h1c2.2-.2 4.5-.3 6 1h1q2.5-.5 4 1h1a33 33 0 0 1 17 7h1c4.4 1 8.2 4.1 12 6 2.1 1 4.1 1.5 6 3h1c4 1 8.9 3.5 12 6h1c4 1 8.9 3.5 12 6h1c4 1 8.9 3.5 12 6h1a61 61 0 0 1 21 10h1c3.5.8 7.3 2.9 10 5h1c6.1 1.4 12.3 5 18 7 1.8.4 3 .8 5 1 1.8.2 3.7.8 5 1q2.5-.5 4 1h6c2.5 0 4 .3 6 1h3q-.7 2.1-3 2a46 46 0 0 1-16 7l-10 3c-2 .8-3.4 1.9-6 2h-1c-2.6 2.1-7.5 3-11 3h-1c-3.1 2.5-10.7 3.5-15 3h-1c-1.5 1.3-3.9 1.2-6 1-1 .2-2.4 1-4 1h-11c-3.8.4-8.3.4-12 0h-9c-2.3 0-4.3-.7-6-1h-3c-1.8 0-2.9-.7-4-1-3.5-.8-7-.7-10-2h-1c-4.1-.7-9.8-1.4-13-4h-1q-4-.6-7-3h-1q-2.5-.2-4-2h-1q-3.4-.9-6-3h-1c-7.2-1.7-13.3-5.9-20.2-8.8-7-2.8-16.2-4.3-22.8-7.2h-11c-14 0-28.9.3-42-1-2.3 0-4.8.3-7 0a6 6 0 0 1-5-5c-1.8-4.8-.4-10.4 0-15 0-4.3-.4-8.7 0-13 .2-3.2 2.2-7.3 4-10q2-3 5-5c2.1-2 5.4-2.3 8-3 15.6-3.9 36.3-1 53-1 5.2 0 12-.5 17 0s12.2-1.8 16 1Z"
|
||||
></path>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M162 132v1c1.8 2.9 4.5 5.3 8 6 .3-.2 3.7-.2 4 0 7-1.4 9.2-8.8 7-15v-1a14 14 0 0 0-7-4c-.3.2-3.7.2-4 0-6.5 1.3-8.6 6.8-8 13Z"
|
||||
></path>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M465 211h-1c-18.2 14.6-41.2 24.6-60 39-19 14.2-42.7 29.3-66 34l-4 1c-2.4 1-4 2-7 2h-1q-3.5 2-8 2h-1c-1.3 1.2-3 1.1-5 1h-2q-2.6 1.1-6 1h-2c-3 1.2-6.5 1-10 1-6.3.6-13.8.6-20 0-3.4 0-8.4.9-11-1h-1c-2.2.2-4.5.3-6-1h-1c-2 .2-3.7.2-5-1h-1c-7.6.5-16.5-3.4-23-6l-4-1a129 129 0 0 1-36.2-15.8c-10.4-6.6-23.2-12.8-32.5-20.5-9.2-7.7-23.8-12.8-30.3-22.7h-1c-2.3-1.4-4.5-2.7-6-5h-1c-4-2.5-8.5-5.2-12-8h-9a9 9 0 0 0-6 7c.3 3.3 0 6.7 0 10v9c.2 1.6 1 3.8 1 6v3c.2 1 1.2 2.2 1 4v1c1.2 1.2.8 2.2 1 4 .8 6.7 3 12.6 5 19 1.7 4.3 4.2 9.1 5 14v1q1.8 1.5 2 4v1a36 36 0 0 1 5 10c.7 2 1 3 2 5 8 12.7 15.7 25.5 25.8 37.3 10 11.7 20.8 20.6 32.4 30.4 11.7 9.9 28.3 14 39.8 23.3h1q2.5.3 4 2h1c2.8.4 4.8 2 7 3l7 2c5.7 1.3 13 2.3 18 5h1c2.1-.3 3.6.8 5 1h3c2.8.2 5.8 1 8 2h8c2.1 0 4.6.8 6 1h21c1.2-.2 3.2-1 5-1h9c3.3-1 7-2.4 11-2h1c2.7-2.2 7.4-2.4 11-3a55 55 0 0 0 8-2c6.5-2.6 13.9-6.3 21-8h1c8.5-6.8 20.6-9.7 29.2-16.8 8.7-7 18.3-12.8 26.8-20.2 4.4-3.8 9-9 13-13 14.8-14.8 20.7-34.6 33-50v-1q.9-3.4 3-6v-1q.3-2.5 2-4v-1c.5-3.3 2-8.6 4-11v-1q0-3.5 2-6v-1c1.1-6.7 2.4-15 5-21v-1c-.2-2-.2-3.7 1-5v-8c0-5.3-.5-10.8 0-16a14 14 0 0 0-4-6c-1-.5-1.1-.4-2-1h-6q-2.1 1.5-5 2m-6 38c-2.1 13.4-21.2 20.3-31 30-10 9.5-23.7 19-35 27-11.5 8-25.1 19.7-39 23h-1a22 22 0 0 1-10 4h-1a25 25 0 0 1-12 4h-1q-3.5 2-8 2h-1c-1.1 1.1-2.3 1-4 1h-2c-1.2.4-2.2 1-4 1h-2c-1.8.7-3.6 1.3-6 1h-1c-1.2 1.2-2.3 1-4 1h-5c-5.7.6-12.3.8-18 0h-4c-1.9 0-2.7-.6-4-1h-6c-1.9 0-2.7.3-4-1h-1q-2.5.5-4-1h-1c-8.1.5-16.8-3.6-24.2-5.8S210 329.8 204 325h-1c-12.8-5-27.1-15.6-37.7-24.3S138.8 284.2 131 273c-.3-.2-1 0-1 0-5.7-4.4-16.6-10-19-17-.9-2.6-1-5.4-2-8-.8-2.2-2.5-5-2-8a667 667 0 0 0 88 56h1q3.4.9 6 3h1c2.8.4 4.8 2 7 3q5 1.8 10 3l6 2q2.9.6 6 1 3 .4 5 1c1.6-.2 2 0 3 1h1c2-.2 3.7-.2 5 1h1c2.2-.3 3.4.4 5 1h8c1.6 0 3 .9 4 1h40c1.8-1.3 4.6-1.2 7-1h1c1.2-1.2 3.2-1.2 5-1h1c1.2-1.2 3.2-1.2 5-1h1c1.1-1.1 2.3-1 4-1h2c3.5-1.7 6.9-2.3 11-3l4-1c3.4-1.4 7.1-3 11-4 1.5-.4 2.5-.5 4-1 1.4-.7 2-1.9 4-2h1q2.6-2.1 6-3h1c2.5-2 6-3.8 9-5l3-1c1.4-.9 2-2.5 4-3h1q1.4-2.2 4-3h1c7.3-7.7 19-13.2 27.7-19.3 8.8-6.1 18.2-15 28.3-18.7.4-.2 1 0 1 0q3.8-3.9 9-6c1.3 2.5-.5 6.7-1 10m-20 55c-.2.4 0 1 0 1-3.4 9.6-12.7 19-19 27a88 88 0 0 1-12 12 214 214 0 0 1-26.7 20.3c-9.5 5.8-20 14.8-31.3 16.7h-1a22 22 0 0 1-10 4h-1c-3.2 2.6-8.9 3.3-13 4h-1q-1.5 1.4-4 1h-1q-1.5 1.4-4 1h-1c-4.9 2.3-10.5 1-16 2-1 .2-2.5 1-4 1-6.2.4-12.8.3-19 0-1.8 0-3.8-.8-5-1h-4c-1.6 0-3-.9-4-1h-4c-3.9-.3-8.8-1.3-12-3h-1c-3.3-.5-7.5-1-10-3h-1c-3.6-.1-8.4-1.8-11-4h-1c-3.9-.6-8-2.6-11-5h-1c-16.1-3.8-32.2-18.9-45-29a200 200 0 0 1-40-51c17.7 11.5 35 25.5 52 38h1c4 1.6 12.8 5.4 15 9h1c4.6 1 10.4 4.1 14 7h1q2.5.3 4 2h1c3.3.5 8.6 2 11 4h1q3.5 0 6 2h1q2.5-.5 4 1h1q2.5-.5 4 1h1c3.8-.2 7.9 1 11 2h9c1.6 0 3 .8 4 1h32c1.2-.2 3.2-1 5-1h8a139 139 0 0 1 20-4l5-1c2-.7 3.7-1.5 6-2l4-1c1.5-.6 3-1.7 5-2h1q3-2.4 7-3h1q2.6-2.1 6-3h1c11.7-9.4 27.6-14.6 39-25 11.6-10.3 25-18.5 37-28a15 15 0 0 1-5 10Z"
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default DokployLogo;
|
||||
@ -69,7 +69,7 @@ a:hover {
|
||||
|
||||
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
/* @media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
@ -80,7 +80,7 @@ a:hover {
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
} */
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.145 0 0);
|
||||
|
||||
@ -16,8 +16,8 @@ export function ModeToggle() {
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="icon">
|
||||
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:s cale-0" />
|
||||
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
||||
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
||||
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
||||
<span className="sr-only">Toggle theme</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
|
||||
25
app/src/store.ts
Normal file
25
app/src/store.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import { create } from 'zustand'
|
||||
|
||||
interface Template {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
version: string;
|
||||
logo?: string;
|
||||
links: {
|
||||
github?: string;
|
||||
website?: string;
|
||||
docs?: string;
|
||||
};
|
||||
tags: string[];
|
||||
}
|
||||
|
||||
interface TemplateStore {
|
||||
templates: Template[];
|
||||
setTemplates: (templates: Template[]) => void;
|
||||
}
|
||||
|
||||
export const useStore = create<TemplateStore>((set) => ({
|
||||
templates: [],
|
||||
setTemplates: (templates) => set({ templates }),
|
||||
}))
|
||||
29
app/src/store/index.ts
Normal file
29
app/src/store/index.ts
Normal file
@ -0,0 +1,29 @@
|
||||
import { create } from 'zustand'
|
||||
|
||||
interface Template {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
version: string;
|
||||
logo?: string;
|
||||
links: {
|
||||
github?: string;
|
||||
website?: string;
|
||||
docs?: string;
|
||||
};
|
||||
tags: string[];
|
||||
}
|
||||
|
||||
interface Store {
|
||||
templates: Template[];
|
||||
setTemplates: (templates: Template[]) => void;
|
||||
githubStars: number;
|
||||
setGithubStars: (count: number) => void;
|
||||
}
|
||||
|
||||
export const useStore = create<Store>((set) => ({
|
||||
templates: [],
|
||||
setTemplates: (templates) => set({ templates }),
|
||||
githubStars: 0,
|
||||
setGithubStars: (count) => set({ githubStars: count }),
|
||||
}))
|
||||
Loading…
Reference in New Issue
Block a user