Add sidebar component

Introduce a new `Sidebar` component to encapsulate sidebar logic and
rendering. This component utilizes Bubble Tea and Lipgloss for UI
elements. The main application now integrates this component for
displaying sidebar content.

components/main_content.go

@@ -0,0 +1 @@
+package components

components/sidebar.go

@@ -0,0 +1,29 @@
+package components
+
+import (
+	tea "github.com/charmbracelet/bubbletea"
+	"github.com/charmbracelet/lipgloss"
+)
+
+type Sidebar struct {
+	data string
+}
+
+func (s Sidebar) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
+	switch m := msg.(type) {
+	case tea.KeyMsg:
+		switch m.String() {
+		case "up":
+
+		}
+	}
+}
+
+func (s Sidebar) View() string {
+	sidebar := lipgloss.
+		NewStyle().
+		BorderStyle(lipgloss.NormalBorder()).
+		Padding(1, 2).
+		Render(s.data)
+	return sidebar
+}

main.go

@@ -7,6 +7,7 @@ import (
 	"github.com/charmbracelet/bubbles/textinput"
 	tea "github.com/charmbracelet/bubbletea"
 	"github.com/charmbracelet/lipgloss"
+	"github.com/vvaibhavv11/player/components"
 )
 
 type model struct {
@@ -54,20 +55,25 @@ func (m model) View() string {
 		return "loading..."
 	}
 
-	// Create search box
+	searchBox := lipgloss.Place(
-	searchBox := lipgloss.NewStyle().BorderStyle(lipgloss.ThickBorder()).Padding(0, 1).Render(m.textInput.View())
+		m.width,
+		m.height/12,
+		lipgloss.Center,
+		lipgloss.Center,
+		lipgloss.NewStyle().BorderStyle(lipgloss.NormalBorder()).Padding(0, 1).Render(m.textInput.View()),
+	)
 
 	// Create sidebar
-	sidebar := lipgloss.NewStyle().BorderStyle(lipgloss.NormalBorder()).Padding(1, 2).Render(m.sidebarContent)
+	// sidebar := lipgloss.NewStyle().BorderStyle(lipgloss.NormalBorder()).Padding(1, 2).Render(m.sidebarContent)
 
 	// Combine search and sidebar vertically
-	content := lipgloss.JoinVertical(lipgloss.Left, searchBox, "\n", sidebar)
+	content := lipgloss.JoinVertical(lipgloss.Left, searchBox, "\n", components.Sidebar(m.sidebarContent))
 
 	return lipgloss.Place(
 		m.width,
 		m.height,
-		lipgloss.Center,
+		0,
-		lipgloss.Center,
+		0,
 		content,
 	)
 }