33127bb6ab
* Copy the design-system app into a new one for ui-library. * Remove unneeded content. * Add supabase config. * Cleanup the css. * Add bunch of packages. * Cleanup the registry. * Regenerate the registry. * Add needed components for documenting components. * Add the pages for the components. * Fix the RegistryBlock. * Various fixes. * Add a turbo definition for ui-library. * Rename Remix to React Router. * Reorder the pages for all frameworks. * Remove the bottom pager. * Fix the pages and command menu. * Various fixes. * Minor fixes. * Add ai editor rules. * Various fixes. * Add local supabase env vars. * Try to fix a package error. * Bunch of various fixes. * Fix lint errors.
71 lines
2.0 KiB
TypeScript
71 lines
2.0 KiB
TypeScript
import { useConfig } from '@/hooks/use-config'
|
|
import { ComponentProps } from 'react'
|
|
import {
|
|
SelectContent_Shadcn_,
|
|
SelectGroup_Shadcn_,
|
|
SelectItem_Shadcn_,
|
|
SelectLabel_Shadcn_,
|
|
SelectTrigger_Shadcn_,
|
|
SelectValue_Shadcn_,
|
|
Select_Shadcn_,
|
|
SonnerToaster,
|
|
} from 'ui'
|
|
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
|
|
|
|
function SonnerPositionConfig() {
|
|
const [config, setConfig] = useConfig()
|
|
|
|
type Position = NonNullable<ComponentProps<typeof SonnerToaster>['position']>
|
|
|
|
const positions: Position[] = [
|
|
'top-left',
|
|
'top-right',
|
|
'bottom-left',
|
|
'bottom-right',
|
|
'top-center',
|
|
'bottom-center',
|
|
]
|
|
|
|
return (
|
|
<div className="px-5 py-5 border rounded-lg my-2 bg-surface-75">
|
|
<form>
|
|
<FormItemLayout
|
|
name="sonnerExpand"
|
|
id="sonnerExpand"
|
|
isReactForm={false}
|
|
label="Use position prop"
|
|
description="You will need to fire a few Sonner toasts first"
|
|
layout="flex"
|
|
>
|
|
<Select_Shadcn_
|
|
value={config.sonnerPosition}
|
|
defaultValue={config.sonnerPosition}
|
|
onValueChange={(e: Position) => {
|
|
setConfig({
|
|
...config,
|
|
sonnerPosition: e,
|
|
})
|
|
}}
|
|
>
|
|
<SelectTrigger_Shadcn_ className="w-[180px]">
|
|
<SelectValue_Shadcn_ placeholder="Select a position" />
|
|
</SelectTrigger_Shadcn_>
|
|
<SelectContent_Shadcn_>
|
|
<SelectGroup_Shadcn_>
|
|
<SelectLabel_Shadcn_>Positions available</SelectLabel_Shadcn_>
|
|
{positions.map((position) => (
|
|
<SelectItem_Shadcn_ key={position} value={position}>
|
|
{position}
|
|
</SelectItem_Shadcn_>
|
|
))}
|
|
</SelectGroup_Shadcn_>
|
|
</SelectContent_Shadcn_>
|
|
</Select_Shadcn_>
|
|
</FormItemLayout>
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export { SonnerPositionConfig }
|