Add Container component and integrate with ButtonApp

Introduced a new reusable Container component with named slots (header, default, and footer) to enhance layout flexibility. Updated ButtonApp to use Container and refactored the template structure for better organization. Included a counter functionality in the Container for dynamic data binding.

Author: khannedy

src/components/ButtonApp.vue

@@ -1,14 +1,26 @@
 <script setup>
 
 import MyButton from "./MyButton.vue";
+import Container from "./Container.vue";
 
-function clickHandler(){
+function clickHandler() {
   alert("You click me");
 }
 </script>
 
 <template>
-<MyButton class="button" @click="clickHandler" name="Eko" contoh="Kurniawan"/>
+  <Container title="Contoh Button">
+    <template #header="attributes">
+      <h1>Button App {{attributes.counter}}</h1>
+    </template>
+    <template v-slot:default="attributes">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci asperiores cumque eius, fuga illum inventore maxime nobis nostrum perferendis quaerat sed similique sunt. Beatae explicabo magnam optio. Autem, debitis, enim!</p>
+      <MyButton class="button" @click="clickHandler" :name="attributes.counter" contoh="Kurniawan"/>
+    </template>
+    <template #footer>
+      <p>Copyright 2024 @ProgrammerZamanNow</p>
+    </template>
+  </Container>
 </template>
 
 <style scoped>

src/components/Container.vue

@@ -0,0 +1,31 @@
+<script setup>
+import {ref, useSlots} from "vue";
+
+const slots = useSlots();
+const counter = ref(0);
+</script>
+
+<template>
+  <div v-if="slots.header">
+    <slot name="header" :counter="counter">
+      <h1>Default Header</h1>
+    </slot>
+  </div>
+  <div v-if="slots.default">
+    <slot name="default" :counter="counter">
+      <p>Anda belum mengisi content nya</p>
+    </slot>
+  </div>
+  <div v-if="slots.footer">
+    <slot name="footer" :counter="counter">
+      <p>Default Footer</p>
+    </slot>
+  </div>
+  <div>
+    <button @click="counter++">Increment Counter</button>
+  </div>
+</template>
+
+<style scoped>
+
+</style>