components/editor-badge/comps/header/form/advanced.tsx

import { useState } from "react";
import { FormattedMessage, useIntl } from "react-intl";

import { FontFamilySelector } from "@/components/font-family";
import { FontWeight } from "@/components/font-weight";

import { Switch } from "@/components/switch";
import { BadgeType } from "@/types/badge";
import { PremiumOverlay } from "@/components/premium/overlay";

import { Label } from "@/components/label";
import { Input } from "@/components/input";

export const AdvancedForm = ({
  badge,
  setBadge,
}: {
  badge: BadgeType;
  setBadge: (b: BadgeType) => void;
}) => {
  const intl = useIntl();

  return (
    <div className="grid grid-cols-1 gap-4 px-6 pb-6 pt-5">
      {badge?.type === "circle" && (
        <div>
          <Label className="mb-2">Rounded</Label>
          <Input
            value={badge?.radius}
            type="number"
            placeholder="Badge radius"
            className="bg-dark-600 rounded p-3 text-sm text-white placeholder-dark-200"
            onChange={(newRadius) => {
              let radius: number = Number(newRadius);
              if (radius > 100) radius = 100;
              setBadge({ ...badge, radius: Number(radius) });
            }}
          />
        </div>
      )}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 relative">
        <div className="lg:col-span-2">
          <Label>Font</Label>
        </div>
        <div>
          <p className="font-semibold uppercase text-dark-200 text-xs mb-2">
            <FormattedMessage id="Font Family" />
          </p>
          <FontFamilySelector
            value={badge?.fontFamily}
            onSelect={(fontFamily) => setBadge({ ...badge, fontFamily })}
          />
        </div>
        <div>
          <p className="font-semibold uppercase text-dark-200 text-xs mb-2">
            <FormattedMessage id="Font Weight" />
          </p>
          <FontWeight
            value={badge?.fontWeight}
            onSelect={(fontWeight) => setBadge({ ...badge, fontWeight })}
          />
        </div>
        <div className="lg:col-span-2">
          <p className="font-semibold uppercase text-dark-200 text-xs mb-2">
            <FormattedMessage id="Letter Spacing" />
          </p>
          <Input
            value={badge?.letterSpacing}
            type="number"
            placeholder="Letter spacing"
            className="bg-dark-600 rounded p-3 text-sm text-white placeholder-dark-200"
            onChange={(newLetterSpacing) => {
              let letterSpacing: number = Number(newLetterSpacing);
              if (letterSpacing > 100) letterSpacing = 100;
              setBadge({
                ...badge,
                letterSpacing: Number(letterSpacing),
              });
            }}
          />
        </div>
        <PremiumOverlay className="!bg-dark-500 !bg-opacity-80" />
      </div>
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
        <div className="lg:col-span-2 flex items-center justify-start gap-3">
          <Label>Shiny Effect</Label>
          <Switch
            value={badge?.shinyEffect}
            onChange={(enabled: boolean) =>
              setBadge({
                ...badge,
                shinyEffect: enabled,
              })
            }
          />
        </div>
      </div>
    </div>
  );
};