empty-banner

PreviousNext

A banner component with optional code display for UI blocks.

Docs
tailwind-admincomponent

Preview

Loading preview…
app/components/ui-blocks/banners/code/EmptyBannerCode.tsx
import React from "react";
import Image from "next/image";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
const EmptyBannerCode = () => {
  return (
    <>
      <Card>
        <Image src="/images/products/empty-shopping-bag.gif" alt="banner" className="mx-auto w-48" width={192} height={192} />
        <div className="text-center mx-auto">
          <h5 className="text-lg">Oop, Your cart is empty!</h5>
          <p className="text-darklink mt-2">
            Get back to shopping and get rewards from it.
          </p>
          <div className="flex justify-center mt-5">
            <Button>Go for shopping</Button>
          </div>
        </div>
      </Card>
    </>
  );
};

export default EmptyBannerCode;

Installation

npx shadcn@latest add @tailwind-admin/empty-banner

Usage

import { EmptyBanner } from "@/components/empty-banner"
<EmptyBanner />