From 1b891a1c2564d6aa9f93ef82894a752f52505b02 Mon Sep 17 00:00:00 2001
From: Erfan Mola <hi@erfanxd.ir>
Date: Fri, 6 Oct 2023 09:01:36 +0330
Subject: [PATCH] Added Section Component

---
 src/components/Section.vue | 96 ++++++++++++++++++++++++++++++++++++++
 src/index.js               |  2 +
 2 files changed, 98 insertions(+)
 create mode 100644 src/components/Section.vue

diff --git a/src/components/Section.vue b/src/components/Section.vue
new file mode 100644
index 0000000..3dc2134
--- /dev/null
+++ b/src/components/Section.vue
@@ -0,0 +1,96 @@
+<script setup>
+    import { inject } from 'vue';
+
+    const props = defineProps({
+        platform: {
+            type: String,
+        },
+        colorScheme: {
+            type: String,
+        },
+        theme: {
+            type: String,
+        },
+        title: {
+            type: String,
+        },
+        description: {
+            type: String,
+        },
+    });
+
+    const platform =    inject('platform',    'android');
+    const colorScheme = inject('colorScheme', 'light');
+    const theme =       inject('theme',       'material');
+</script>
+
+<template>
+    <div :class="[ 'tele-vue-component-section', (props.platform || platform), (props.colorScheme || colorScheme), (props.theme || theme) ]">
+        <section>
+            <h3 v-if="title">{{ title }}</h3>
+            <div>
+                <slot></slot>
+            </div>
+        </section>
+        <p v-if="description">{{ description }}</p>
+    </div>
+</template>
+
+<style lang="scss">
+
+    .tele-vue-component-section {
+        -webkit-tap-highlight-color: transparent;
+        display: flex;
+        flex-direction: column;
+
+        > section {
+            padding: 1rem 0;
+
+            > h3 {
+                font-size: 1rem;
+                font-weight: normal;
+                padding-bottom: 1rem;
+            }
+            
+            > div {
+                overflow: hidden;
+            }
+        }
+
+        > p {
+            font-size: 0.925rem;
+            font-weight: normal;
+            color: var(--tg-theme-hint-color);
+            padding: 0.325rem 1rem;
+        }
+
+        &.material {
+            > section {
+                background-color: var(--tg-theme-bg-color);
+                margin-bottom: 0.325rem;
+
+                > h3 {
+                    padding-inline-start: 1rem;
+                    color: var(--tg-theme-link-color);
+                }
+            }
+        }
+
+        &.apple {
+            padding: 1rem;
+
+            > section {
+                > h3 {
+                    padding-inline-start: 1rem;
+                    color: var(--tg-theme-hint-color);
+                }
+
+                > div {
+                    border-radius: 1rem;
+                    background-color: var(--tg-theme-bg-color);
+                }
+            }
+        }
+    }
+
+</style>
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 9ccf0b4..c05f094 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,6 +3,7 @@ import LocaleProvider from './providers/LocaleProvider.vue';
 import Switch from './components/Switch.vue';
 import List from './components/List.vue';
 import Checkbox from './components/Checkbox.vue';
+import Section from './components/Section.vue';
 
 export { 
     AppearanceProvider,
@@ -10,4 +11,5 @@ export {
     Switch,
     List,
     Checkbox,
+    Section,
 };
\ No newline at end of file