Components
DynamicBlob

DynamicBlob

Hello Moto

Loading...

Installation

Copy and paste the following code into your project.

Join the cult to for the code

Update the import paths to match your project setup.

Usage

import React from "react";
import { MessageCircle } from "lucide-react";
 
import {
  DynamicBlob,
  DynamicBlobProvider,
  useDynamicBlobSize,
  DynamicContainer,
  DynamicTitle,
  DynamicDescription,
} from "@/registry/default/ui/dynamic-blob";
 
import { Button } from "@/components/ui/button";
import { Loader, RefreshCw } from "lucide-react";
import { Badge } from "@/components/ui/badge";
const blobStates = ["compact", "large"];
 
const DynamicAction = () => {
  const { state: blobState, setSize } = useDynamicBlobSize();
 
  // Function to cycle through the states
  const cycleBlobStates = () => {
    const currentIndex = blobStates.indexOf(blobState.size);
    const nextIndex = (currentIndex + 1) % blobStates.length;
    // @ts-expect-error
    setSize(blobStates[nextIndex]);
  };
 
  // Provide dynamic detail in such a beautiful small place :)
  const renderCompactState = () => (
    <DynamicContainer className="flex items-center justify-center h-full w-full">
      <div className="relative w-full flex items-center">
        <DynamicDescription className="absolute left-4  my-auto text-lg font-medium tracking-tighter text-white ">
          <MessageCircle className=" h-5 w-5 fill-cyan-400 text-cyan-400" />
        </DynamicDescription>
 
        <DynamicDescription className="absolute text-cyan-400 right-4  my-auto text-lg font-medium tracking-tighter ">
          www.newcult.co
        </DynamicDescription>
      </div>
    </DynamicContainer>
  );
 
  // Great for call to action, popping up in users face :)
  const renderLargeState = () => (
    <DynamicContainer className="flex items-center justify-center h-full w-full">
      <div className="relative  flex w-full items-center justify-between gap-6 px-4">
        <Loader className="animate-spin h-12 w-12  text-yellow-300" />
 
        <DynamicTitle className="my-auto text-2xl font-black tracking-tighter text-white ">
          loading
        </DynamicTitle>
      </div>
    </DynamicContainer>
  );
 
  // Render function for other states
  const renderOtherStates = () => (
    <div className="flex items-center justify-center h-full w-full">
      <Button className="ghost">{blobState.size}</Button>
    </div>
  );
 
  // Main render logic based on size
  function renderState() {
    switch (blobState.size) {
      case "compact":
        return renderCompactState();
      case "large":
        return renderLargeState();
 
      // Optionally add cases for other states as necessary
      default:
        return renderOtherStates();
    }
  }
 
  return (
    <div className=" h-full">
      <div className="flex flex-col gap-4  h-full">
        <div className="absolute top-3 left-4">
          <Button
            onClick={cycleBlobStates}
            className="mt-4 p-2 border rounded-lg max-w-[200px]"
          >
            Cycle States
            <RefreshCw className="ml-2 h-4 w-4" />
          </Button>
        </div>
        <div className="absolute top-4 right-4">
          <div>
            <Badge variant="outline">prev - {blobState.previousSize}</Badge>
            <Badge variant="outline">cur -{blobState.size}</Badge>
          </div>
        </div>
 
        <DynamicBlob id="dynamic-blob">{renderState()}</DynamicBlob>
      </div>
    </div>
  );
};
 
export default function DynamicActionDemo() {
  return (
    <DynamicBlobProvider initialSize="default">
      <DynamicAction />
    </DynamicBlobProvider>
  );
}