angelsantosa

import { useState } from "react"
import { MultiSelect, type Option } from "@/components/multi-select-dropdown"

export default function Home() {
  // Sample hierarchical data structure
  const options: Option[] = [
    {
      value: "fruits",
      label: "Fruits",
      children: [

angelsantosa

For this structure, I'll show you the best way to organize your exports to maintain both legacy support and provide a clean import path for your new UI components.

First, let's organize your new UI components:

// ./lib/my-ui/components/Button.tsx
export interface ButtonProps {
  // props
}

angelsantosa

Let me help you understand the setup needed for sharing Tailwind-styled components across multiple applications:

When you have a shared library with Tailwind-styled components that you want to use in multiple applications, you'll need to:

1. In your shared library:

• Install Tailwind as a dependency
• Configure Tailwind in your library's tailwind.config.js
• Make sure your library's built CSS gets included in the package

2. In both consuming applications:

angelsantosa

let textareas = document.querySelectorAll('.limit-text')

Array.from(textareas).forEach(el => {

    let maxlength = el.getAttribute('maxlength')
    el.parentNode.querySelectorAll('.count_message')[0].innerHTML = maxlength + ' remaining'
	
    el.addEventListener('keyup', function(event) {
      let length = this.value.length
      let text_remaining = maxlength - length