import RoundedShape from '../EachComponent/RoundedShapes/RoundedShape'
import PlainShapes from '../EachComponent/Shapes/PlainShapes'
import { Card } from '../ui/card'
import { Separator } from '../ui/separator'
import CustomShape from '../EachComponent/CustomShape/CustomShape'

const AddShapes = () => {
    return (
        <div className='flex gap-2 item-center flex-col justify-center p-1 overflow-hidden'>
            <Card className='grid gap-0 p-2'>
                <h2 className="font-semibold text-sm">Custom Shapes</h2>
                <Separator className="my-2" />
                <div>
                    <CustomShape />
                </div>
            </Card>
            <div>
                <RoundedShape />
            </div>

            <div>
                <PlainShapes />
            </div>
        </div>
    )
}

export default AddShapes