Spaces:
Running
Running
File size: 3,306 Bytes
9cd6ddb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
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>
);
};
|