1- import React from 'react' ;
1+ "use client"
22
3- import { Label } from '@/components/ui/label' ;
4- import {
5- Select ,
6- SelectContent ,
7- SelectItem ,
8- SelectTrigger ,
9- SelectValue ,
10- } from '@/components/ui/select' ;
11- import { Switch } from '@/components/ui/switch' ;
12- import { TreeCustomizationOptions } from '@/types/tree-customization' ;
3+ import type React from "react"
4+
5+ import { Label } from "@/components/ui/label"
6+ import { Select , SelectContent , SelectItem , SelectTrigger , SelectValue } from "@/components/ui/select"
7+ import { Switch } from "@/components/ui/switch"
8+ import type { TreeCustomizationOptions } from "@/types/tree-customization"
139
1410interface CustomizationOptionsProps {
15- options : TreeCustomizationOptions ;
16- onChange : ( newOptions : Partial < TreeCustomizationOptions > ) => void ;
11+ options : TreeCustomizationOptions
12+ onChange : ( newOptions : Partial < TreeCustomizationOptions > ) => void
1713}
1814
19- const CustomizationOptions : React . FC < CustomizationOptionsProps > = ( {
20- options,
21- onChange,
22- } ) => {
15+ const CustomizationOptions : React . FC < CustomizationOptionsProps > = ( { options, onChange } ) => {
2316 return (
2417 < div className = "space-y-4" >
2518 < div className = "flex items-center justify-between" >
2619 < Label htmlFor = "ascii-style" > ASCII Style</ Label >
2720 < Select
2821 value = { options . asciiStyle }
29- onValueChange = { ( value ) =>
30- onChange ( { asciiStyle : value as 'basic' | 'detailed' | 'minimal' } )
31- }
22+ onValueChange = { ( value ) => onChange ( { asciiStyle : value as "basic" | "detailed" | "minimal" } ) }
3223 >
3324 < SelectTrigger className = "w-[180px]" >
3425 < SelectValue placeholder = "Select ASCII style" />
@@ -46,7 +37,7 @@ const CustomizationOptions: React.FC<CustomizationOptionsProps> = ({
4637 < Switch
4738 id = "use-icons"
4839 checked = { options . useIcons }
49- onCheckedChange = { ( checked ) => onChange ( { useIcons : checked } ) }
40+ onCheckedChange = { ( checked : boolean ) => onChange ( { useIcons : checked } ) }
5041 />
5142 </ div >
5243
@@ -55,11 +46,11 @@ const CustomizationOptions: React.FC<CustomizationOptionsProps> = ({
5546 < Switch
5647 id = "show-line-numbers"
5748 checked = { options . showLineNumbers }
58- onCheckedChange = { ( checked ) => onChange ( { showLineNumbers : checked } ) }
49+ onCheckedChange = { ( checked : boolean ) => onChange ( { showLineNumbers : checked } ) }
5950 />
6051 </ div >
6152 </ div >
62- ) ;
63- } ;
53+ )
54+ }
6455
65- export default CustomizationOptions ;
56+ export default CustomizationOptions
0 commit comments