Evavic44

import React from "react";

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

Evavic44

import React, { Component } from "react";

export default class Comments extends Component {
	constructor(props) {
		super(props);
		this.commentBox = React.createRef();
	}

	componentDidMount() {

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

{
  "workbench.colorTheme": "Darker than One Dark Pro",
  "editor.minimap.enabled": false,
  "liveServer.settings.donotShowInfoMsg": true,
  "liveServer.settings.donotVerifyTags": true,
  "vsicons.dontShowNewVersionMessage": true,
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "workbench.startupEditor": "newUntitledFile",

Evavic44

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

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

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

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

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

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

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 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";