Evavic44

Custom Sanity Table Widget in PortableText using the @sanity/table plugin

install and add @sanity/table to plugins array in the sanity.config.ts file.

Sanity Table Preview

// TableWidget.tsx
import { TablePreview } from "@sanity/table";
import { PreviewProps } from "sanity";

Evavic44

import React, { useEffect } from "react";

export default function Buymeacoffee() {
	useEffect(() => {
		const script = document.createElement("script");
		const div = document.getElementById("supportByBMC");
		script.setAttribute("data-name", "BMC-Widget");
		script.src = "https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js";
		script.setAttribute("data-id", "evavic44");

Evavic44

const domains = [
  "gmail.com",
  "yahoo.com",
  "hotmail.com",
  "aol.com",
  "hotmail.co.uk",
  "hotmail.fr",
  "msn.com",
  "yahoo.fr",
  "wanadoo.fr",

Evavic44

"use client";
import { useRef } from "react";
import { Cloudinary } from "@cloudinary/url-gen";
import {
  AdvancedVideo,
  AdvancedImage,
  lazyload,
  accessibility,
} from "@cloudinary/react";

Evavic44

import { useEffect } from "react";

export default function ProgressBar() {
  const scheme = "#BD2546"; // hardcode progress bar theme or make it dynamic
  const progress = 78; // progress value

  function handleProgress(value: number, circle: "track" | "progress") {
    const track = 2 * 3.14 * 90;
    const progress = track * ((100 - value) / 100);
    return circle === "track" ? track : progress;

Evavic44

Sanity YouTube Schema

import { defineField, defineType } from "sanity";
import { YoutubeWidget } from "@/app/components/shared/YoutubeWidget";
import { BiLogoYoutube } from "react-icons/bi";

export const youtube = defineType({
  name: "youtube",
  title: "Youtube",

Evavic44

// Custom hook
import { useState, useEffect } from "react";

export function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState<boolean>(true);

  useEffect(() => {
    function handleOnline() {
      setIsOnline(true);
    }

Evavic44

Slider Toggle Button

import { FormEvent } from "react";
import styles from "./ToggleButton.module.css";

type ToggleProps = {
  onToggle: (isChecked: boolean) => void;
};

export default function ToggleButton({ onToggle }: ToggleProps) {

Evavic44

First install the iconify library or follow this [guide][iconify]

npm install --save-dev @iconify/react

// using yarn
yarn add --dev @iconify/react

Next import the component from the iconify library

Evavic44

import React from "react";

class ChatwootWidget extends React.Component {
componentDidMount() {
  window.chatwootSettings = {
    hideMessageBubble: false,
    position: "right",
    locale: "en",
 type: "standard", // [standard, expanded_bubble]