moved buttons to new docs

Author: ariflogs

.github/workflows/deploy.yml

@@ -24,8 +24,8 @@ jobs:
 
       - name: Build and push to DockerHub
         run: |
-          docker build -t devarifhossain/retroui:1.02 ./
-          docker push devarifhossain/retroui:1.02
+          docker build -t devarifhossain/retroui:1.03 ./
+          docker push devarifhossain/retroui:1.03
     
       - name: Set up SSH
         uses: webfactory/ssh-agent@v0.9.0
@@ -38,4 +38,4 @@ jobs:
           
       - name: Deploy to VPS
         run: |
-          ssh ${{ secrets.VPS_USERNAME }}@${{ secrets.VPS_HOST }} "cd /root/retroui && git pull && docker compose -f ./infra/docker-compose.prod.yml up -d"
+          ssh ${{ secrets.VPS_USERNAME }}@${{ secrets.VPS_HOST }} "cd /root/retroui && git pull && docker compose -f ./infra/docker-compose.prod.yml up web --build -d"

app/layout.tsx

@@ -25,16 +25,6 @@ export const metadata: Metadata = {
   title: "Retro Styled Tailwind UI Library | Retro UI",
   description:
     "RetroUI - Retro styled TailwindCSS component library for modern web apps.",
-  openGraph: {
-    images: ["/banner.png"],
-  },
-  twitter: {
-    card: "summary_large_image",
-    title: "Retro Styled Tailwind UI Library | Retro UI",
-    description:
-      "RetroUI - Retro styled TailwindCSS component library for modern web apps.",
-    images: ["/banner.png"],
-  },
 };
 
 export default function RootLayout({

app/open-graph.png

@@ -6,6 +6,10 @@ export const componentConfig = {
       name: "avatar",
       filePath: "packages/ui/Avatars/Avatar.tsx",
     },
+    button: {
+      name: "button",
+      filePath: "packages/ui/Buttons/Button.tsx",
+    },
   },
   examples: {
     "accordion-style-default": {

app/twitter-image.png

@@ -10,7 +10,7 @@ lastUpdated: 12 Oct, 2024
 
 ## Installation
 
-#### 1. Install depenencies:
+#### 1. Install dependencies:
 
 ```sh
 npm install @radix-ui/react-avatar

config/components.ts

@@ -1,11 +1,31 @@
 ---
 title: Button
 description: This bold button makes sure your users click on it and perform the actions you want! 🚀
-lastUpdated: 30 Sep, 2024
+lastUpdated: 12 Oct, 2024
 ---
 
-### Default
+<ComponentShowcase name="button-style-default" />
+<br />
+<br />
+
+## Installation
+
+#### 1. Install dependencies:
+
+```sh
+npm install class-variance-authority
+```
 
-<hr />
 <br />
+
+#### 2. Copy the code 👇 into your project:
+
+<ComponentSource name="button" />
+<br />
+<br />
+
+## Examples
+
+### Default
+
 <ComponentShowcase name="button-style-default" />

content/docs/components/avatar.mdx

@@ -1,6 +1,6 @@
 services:
   web:
-    image: devarifhossain/retroui:1.02
+    image: devarifhossain/retroui:1.03
     container_name: retroui
     expose:
       - "3000"
@@ -16,4 +16,4 @@ services:
     volumes:
       - ./Caddyfile:/etc/caddy/Caddyfile
     depends_on:
-      - web
+      - web

content/docs/components/button.mdx

@@ -1,7 +1,5 @@
+import { Button } from "@/packages/ui";
+
 export default function ButtonStyleDefault() {
-  return (
-    <button className="bg-primary-400 text-black px-6 py-2 text-base font-head border-2 border-black shadow-md hover:shadow-xs hover:bg-primary-500 transition-all">
-      Click Me!
-    </button>
-  );
-}
+  return <Button>Click Me!</Button>;
+}