Deployment Card

Renders a card displaying deployment details like environment, progress, logs, and commit info. It shows real-time progress and status updates. Use it to track deployment status and details in a dashboard or project overview.

byWatermelon Corp from Watermelon

Installation

terminal

pnpm dlx layro-cli add @watermeloncorp/deployment-card

npx layro-cli add @watermeloncorp/deployment-card

npx layro-cli add @watermeloncorp/deployment-card

bunx layro-cli add @watermeloncorp/deployment-card

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

'use client';

import React, { useState, useEffect, useRef } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import {
  Maximize2,
  X,
  Globe,
  GitBranch,
  GitCommit,
  Play,
  CheckCircle2,
  MoreVertical,
  Terminal,