some example

2025-11-14 17:16:09 -05:00
parent 36010381c2
commit 42ab82381d
6 changed files with 1092 additions and 0 deletions
--- a/examples/theme_custom_components.lua
+++ b/examples/theme_custom_components.lua
@@ -0,0 +1,144 @@
+-- Example: Theming and Custom Components
+-- This demonstrates how to use themes and create custom components
+
+local FlexLove = require("libs.FlexLove")
+
+local ThemeExample = {}
+
+function ThemeExample:new()
+  local obj = {
+    themeIndex = 1,
+    themes = { "space", "metal" },
+  }
+  setmetatable(obj, { __index = self })
+  return obj
+end
+
+function ThemeExample:render()
+  local flex = FlexLove.new({
+    x = "10%",
+    y = "10%",
+    width = "80%",
+    height = "80%",
+    positioning = "flex",
+    flexDirection = "vertical",
+    gap = 10,
+    padding = { horizontal = 10, vertical = 10 },
+  })
+
+  -- Title
+  FlexLove.new({
+    parent = flex,
+    text = "Theming and Custom Components Example",
+    textAlign = "center",
+    textSize = "2xl",
+    width = "100%",
+    height = "10%",
+  })
+
+  -- Theme selector
+  local themeSelector = FlexLove.new({
+    parent = flex,
+    positioning = "flex",
+    flexDirection = "horizontal",
+    justifyContent = "space-between",
+    alignItems = "center",
+    width = "100%",
+    height = "10%",
+    backgroundColor = "#2d3748",
+    borderRadius = 8,
+    padding = { horizontal = 10 },
+  })
+
+  FlexLove.new({
+    parent = themeSelector,
+    text = "Current Theme: " .. self.themes[self.themeIndex],
+    textAlign = "left",
+    textSize = "md",
+    width = "50%",
+  })
+
+  FlexLove.new({
+    parent = themeSelector,
+    themeComponent = "buttonv2",
+    text = "Switch Theme",
+    textAlign = "center",
+    width = "30%",
+    onEvent = function(_, event)
+      if event.type == "release" then
+        self.themeIndex = (self.themeIndex % #self.themes) + 1
+        -- In a real app, you'd update the theme here
+        print("Theme switched to: " .. self.themes[self.themeIndex])
+      end
+    end,
+  })
+
+  -- Custom component example - A styled card
+  local customCard = FlexLove.new({
+    parent = flex,
+    positioning = "flex",
+    flexDirection = "vertical",
+    justifyContent = "center",
+    alignItems = "center",
+    width = "100%",
+    height = "40%",
+    themeComponent = "cardv2", -- Uses theme styling
+    padding = { horizontal = 20, vertical = 20 },
+    margin = { top = 10 },
+  })
+
+  FlexLove.new({
+    parent = customCard,
+    text = "Custom Card Component",
+    textAlign = "center",
+    textSize = "lg",
+    width = "100%",
+    height = "30%",
+  })
+
+  FlexLove.new({
+    parent = customCard,
+    text = "This demonstrates how to create reusable components with theme support",
+    textAlign = "center",
+    textSize = "sm",
+    width = "100%",
+    height = "50%",
+    color = "#a0aec0", -- Light gray text
+  })
+
+  -- Another custom component - Status indicator
+  local statusIndicator = FlexLove.new({
+    parent = flex,
+    positioning = "flex",
+    flexDirection = "horizontal",
+    justifyContent = "space-between",
+    alignItems = "center",
+    width = "100%",
+    height = "20%",
+    backgroundColor = "#4a5568",
+    borderRadius = 8,
+    padding = { horizontal = 15 },
+  })
+
+  FlexLove.new({
+    parent = statusIndicator,
+    text = "Status: Active",
+    textAlign = "left",
+    textSize = "md",
+    width = "50%",
+  })
+
+  local statusDot = FlexLove.new({
+    parent = statusIndicator,
+    positioning = "flex",
+    width = 20,
+    height = 20,
+    backgroundColor = "#48bb78", -- Green dot
+    borderRadius = 10, -- Circle
+  })
+
+  return flex
+end
+
+return ThemeExample
+