mirror of
https://github.com/formbricks/formbricks.git
synced 2026-05-12 16:59:35 -05:00
Matti Nannt
27d63c01e1
### New Formbricks Release: Complete Rewrite, New Features & Enhanced UI 🚀 We're thrilled to announce the release of the new Formbricks, a complete overhaul of our codebase, packed with powerful features and an improved user experience. #### What's New: 1. **Survey Builder**: Design and customize your in-product micro-surveys with our intuitive survey builder. 2. **Trigger Micro-Surveys**: Set up micro-surveys to appear at specific points within your app, allowing you to gather feedback when it matters most. 3. **JavaScript SDK**: Our new JavaScript SDK makes integration a breeze - just embed it once and you're ready to go. 4. **No-Code Events**: Set up events and triggers without writing a single line of code, making it accessible for everyone on your team. 5. **Revamped UI**: Enjoy an entirely new user interface that enhances usability and provides a smooth, delightful experience. This release marks a major step forward for Formbricks, enabling you to better understand your users and build an outstanding product experience. Please update your Formbricks integration to take advantage of these exciting new features, and let us know in the Discord if you have any questions or feedback! Happy surveying! 🎉
80 lines
3.1 KiB
TypeScript
80 lines
3.1 KiB
TypeScript
"use client";
|
||
|
||
import React from "react";
|
||
import Link from "next/link";
|
||
import { useEnvironment } from "@/lib/environments/environments";
|
||
import LoadingSpinner from "./LoadingSpinner";
|
||
|
||
type EmptySpaceFillerProps = {
|
||
type: "table" | "response" | "event";
|
||
environmentId: string;
|
||
};
|
||
|
||
const EmptySpaceFiller: React.FC<EmptySpaceFillerProps> = ({ type, environmentId }) => {
|
||
const { environment, isErrorEnvironment, isLoadingEnvironment } = useEnvironment(environmentId);
|
||
|
||
if (isLoadingEnvironment) return <LoadingSpinner />;
|
||
if (isErrorEnvironment) return <span>Error</span>;
|
||
|
||
if (type === "table") {
|
||
return (
|
||
<div className="group">
|
||
<div className="h-12 w-full rounded-t-lg bg-slate-100"></div>
|
||
<div className="w-full space-y-4 rounded-b-lg bg-white p-4">
|
||
<div className="h-16 w-full rounded-lg bg-slate-100"></div>
|
||
|
||
<div className=" flex h-16 w-full items-center justify-center rounded-lg bg-slate-50 text-slate-700 transition-all duration-300 ease-in-out ">
|
||
{!environment.widgetSetupCompleted && (
|
||
<Link
|
||
className="flex h-full w-full items-center justify-center"
|
||
href={`/environments/${environmentId}/settings/setup`}>
|
||
<span className="decoration-brand-dark transition-all duration-300 ease-in-out group-hover:underline">
|
||
Setup Formbricks Widget to start collecting insights 🚀
|
||
</span>
|
||
</Link>
|
||
)}
|
||
{environment.widgetSetupCompleted &&
|
||
"Your data will appear here as soon as you receive your first response ⏲️"}
|
||
</div>
|
||
|
||
<div className="h-16 w-full rounded-lg bg-slate-50/50"></div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
if (type === "response") {
|
||
return (
|
||
<div className="group space-y-4 rounded-lg bg-white p-6 ">
|
||
<div className="flex items-center space-x-4">
|
||
<div className="h-12 w-12 flex-shrink-0 rounded-full bg-slate-100"></div>
|
||
<div className=" h-6 w-full rounded-full bg-slate-100"></div>
|
||
</div>
|
||
<div className="space-y-4">
|
||
<div className="h-12 w-full rounded-full bg-slate-100"></div>
|
||
<div className=" flex h-12 w-full items-center justify-center rounded-full bg-slate-50 text-sm text-slate-500">
|
||
{!environment.widgetSetupCompleted && (
|
||
<Link
|
||
className="flex h-full w-full items-center justify-center"
|
||
href={`/environments/${environmentId}/settings/setup`}>
|
||
<span className="decoration-brand-dark transition-all duration-300 ease-in-out group-hover:underline">
|
||
Setup Formbricks Widget to start collecting insights 🚀
|
||
</span>
|
||
</Link>
|
||
)}
|
||
{environment.widgetSetupCompleted && (
|
||
<span className="text-center">
|
||
Your data will appear here as soon as you receive your first response ⏲️
|
||
</span>
|
||
)}
|
||
</div>
|
||
<div className="h-12 w-full rounded-full bg-slate-50/50"></div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return null;
|
||
};
|
||
|
||
export default EmptySpaceFiller;
|