From d40b16e3a2245652a8dec0e06ded8b53ca67760d Mon Sep 17 00:00:00 2001
From: PalmDevs <git@palmdevs.me>
Date: Sat, 10 May 2025 02:10:15 +0700
Subject: [PATCH] feat(components): add `Page` and `SearchInput`

---
 src/components/Page.tsx        | 19 +++++++++++++++++++
 src/components/SearchInput.tsx | 18 ++++++++++++++++++
 2 files changed, 37 insertions(+)
 create mode 100644 src/components/Page.tsx
 create mode 100644 src/components/SearchInput.tsx

diff --git a/src/components/Page.tsx b/src/components/Page.tsx
new file mode 100644
index 0000000..024c518
--- /dev/null
+++ b/src/components/Page.tsx
@@ -0,0 +1,19 @@
+import { Components } from '@revenge-mod/discord/design'
+import type { DiscordModules } from '@revenge-mod/discord/types'
+import { ReactNative } from '@revenge-mod/react'
+
+export default function Page(props: DiscordModules.Components.StackProps) {
+    return (
+        <Components.Stack style={styles.page} spacing={24} {...props}>
+            {props.children}
+        </Components.Stack>
+    )
+}
+
+const styles = ReactNative.StyleSheet.create({
+    page: {
+        flex: 1,
+        paddingHorizontal: 16,
+        paddingTop: 12,
+    },
+})
diff --git a/src/components/SearchInput.tsx b/src/components/SearchInput.tsx
new file mode 100644
index 0000000..22b312f
--- /dev/null
+++ b/src/components/SearchInput.tsx
@@ -0,0 +1,18 @@
+import { Components } from '@revenge-mod/discord/design'
+import { lookupGeneratedIconComponent } from '@revenge-mod/utils/discord'
+
+import type { DiscordModules } from '@revenge-mod/discord/types'
+
+const MagnifyingGlassIcon = lookupGeneratedIconComponent('MagnifyingGlassIcon')
+
+export default function SearchInput(props: DiscordModules.Components.TextInputProps) {
+    return (
+        <Components.TextInput
+            leadingIcon={MagnifyingGlassIcon}
+            size="md"
+            placeholder="Search"
+            returnKeyType="search"
+            {...props}
+        />
+    )
+}