72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
|
"use client";
|
||
|
|
import React from "react";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
import { Label } from "@/components/ui/label";
|
||
|
|
import { useConfig } from "@/hooks/use-config";
|
||
|
|
import { Icon } from "@/components/ui/icon";
|
||
|
|
import { wideContentWidthSvg, boxedContentWidthSvg } from "./data";
|
||
|
|
import { contentType } from "@/lib/type";
|
||
|
|
|
||
|
|
const allContent: { key: contentType; label: string }[] = [
|
||
|
|
{ key: "wide", label: "Wide" },
|
||
|
|
{ key: "boxed", label: "Boxed" },
|
||
|
|
];
|
||
|
|
const SetContentWidth = () => {
|
||
|
|
const [config, setConfig] = useConfig();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<div className="text-sm font-medium mb-3">Content Width</div>
|
||
|
|
<div className="grid grid-cols-3 gap-3">
|
||
|
|
{allContent?.map(({ key, label }, index) => (
|
||
|
|
<div key={key}>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={() => {
|
||
|
|
if (key === "wide") {
|
||
|
|
setConfig({
|
||
|
|
...config,
|
||
|
|
contentWidth: key,
|
||
|
|
layout: "vertical",
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
setConfig({ ...config, contentWidth: key });
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
className={cn(
|
||
|
|
" border block border-default-300 rounded relative h-[72px] w-full disabled:cursor-not-allowed duration-150 overflow-hidden",
|
||
|
|
{
|
||
|
|
"text-default border-default-700 dark:border-default-600": config.contentWidth === key,
|
||
|
|
"text-muted-foreground ": config.contentWidth !== key,
|
||
|
|
}
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<Icon
|
||
|
|
icon="heroicons:check-circle-20-solid"
|
||
|
|
className={cn(
|
||
|
|
"text-default absolute top-1 right-1 duration-100 scale-0",
|
||
|
|
{
|
||
|
|
" scale-100": config.contentWidth === key,
|
||
|
|
}
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{key === "wide"
|
||
|
|
? wideContentWidthSvg
|
||
|
|
: key === "boxed"
|
||
|
|
? boxedContentWidthSvg
|
||
|
|
: wideContentWidthSvg}
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<Label className=" text-muted-foreground font-normal capitalize block mt-2.5">
|
||
|
|
{label}
|
||
|
|
</Label>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default SetContentWidth;
|