feat: Add minimal WIP AetherModal component

features/links-page/screens/BioScreen.tsx

@@ -16,7 +16,7 @@ import { View, Text, Image } from 'aetherspace/primitives'
 // SEO
 import { H1 } from 'aetherspace/html-elements'
 // Components
-import { AetherIcon } from 'aetherspace/components'
+import { AetherIcon, AetherModal } from 'aetherspace/components'
 import BioLink from '../components/BioLink'
 // Utils
 import { isEmpty } from 'aetherspace/utils'
@@ -210,6 +210,21 @@ export const BioScreen = (props: BioScreenProps) => {
         </Text>
         <View tw="h-10" />
       </View>
+      <AetherModal backdropClasses="bg-opacity-25" backdropColor="#F8F8F8" modalColor="#1a202c">
+        <Text tw="flex-row">
+          <Link
+            href="https://github.com/Aetherspace/green-stack-starter-demo#move-fast-and-build-things"
+            tw="roboto text-white text-sm"
+            asText
+          >
+            Free template repo
+          </Link>
+          <Text tw="roboto text-white text-sm">{' / '}</Text>
+          <Link href="/resume" tw="roboto-black text-white underline text-sm" asText>
+            Hire me.
+          </Link>
+        </Text>
+      </AetherModal>
     </View>
   )
 }

packages/@aetherspace/components/AetherModal/AetherModal.tsx

@@ -0,0 +1,71 @@
+import { useState } from 'react'
+import Animated, { SlideInDown, SlideOutDown } from 'react-native-reanimated'
+// Schemas
+import { z, aetherSchema, AetherProps } from '../../schemas'
+// Primitives
+import { Pressable, View } from '../../primitives'
+
+/* --- Schemas --------------------------------------------------------------------------------- */
+
+export const AetherModalProps = aetherSchema('AetherModalProps', {
+  backdropClasses: z.string().optional(),
+  backdropColor: z.string().color().default('#333333'),
+  modalClasses: z.string().optional(),
+  modalColor: z.string().color().default('#FFFFFF'),
+})
+
+export type TAetherModalProps = AetherProps<typeof AetherModalProps> & {
+  children: React.ReactNode
+}
+
+/* --- <AetherModal/> -------------------------------------------------------------------------- */
+
+export const AetherModal = (props: TAetherModalProps) => {
+  // Props
+  const { children, backdropClasses, backdropColor, modalClasses, modalColor } =
+    AetherModalProps.applyDefaults(props) as TAetherModalProps
+
+  // State
+  const [isOpen, setOpen] = useState(false)
+
+  // -- Handlers --
+
+  const toggleSheet = () => setOpen(!isOpen)
+
+  // -- Render --
+
+  if (!isOpen) return null
+
+  return (
+    <>
+      <Pressable
+        accessibilityRole="button"
+        tw={[
+          'absolute left-0 right-0 top-0 bottom-0 z-10',
+          backdropClasses,
+          backdropColor && `bg-[${backdropColor}]`,
+        ]}
+        onPress={toggleSheet}
+      />
+      <AnimatedContainer
+        tw={[
+          'absolute p-4 w-full h-auto min-h-[50px] rounded-t-xl z-10 bottom-[-22px]',
+          modalClasses,
+          modalColor && `bg-[${modalColor}]`,
+        ]}
+        entering={SlideInDown.springify().damping(15)}
+        exiting={SlideOutDown}
+      >
+        {children}
+      </AnimatedContainer>
+    </>
+  )
+}
+
+/* --- Styles ---------------------------------------------------------------------------------- */
+
+const AnimatedContainer = Animated.createAnimatedComponent(View)
+
+/* --- Docs ------------------------------------------------------------------------------------ */
+
+export const getDocumentationProps = AetherModalProps.introspect()

packages/@aetherspace/components/AetherModal/index.ts

@@ -0,0 +1 @@
+export * from './AetherModal'

packages/@aetherspace/components/index.ts

@@ -1 +1,2 @@
-export * from './AetherIcon'
+export { AetherIcon } from './AetherIcon'
+export { AetherModal } from './AetherModal'

packages/@aetherspace/document.tsx

@@ -75,6 +75,10 @@ export const getInitialProps = async (ctx: DocumentContext) => {
 /* --- <Document/> ----------------------------------------------------------------------------- */
 
 class Document extends NextDocument {
+  async componentDidMount(): Promise<void> {
+    await import('raf/polyfill')
+  }
+
   render() {
     return (
       <Html>

packages/@aetherspace/package.json

@@ -45,6 +45,7 @@
         "axios": "^1.4.0",
         "graphql": "^16.7.1",
         "graphql-request": "^6.1.0",
+        "raf": "^3.4.1",
         "swr": "^2.2.0",
         "twrnc": "^3.6.1",
         "zod": "~3.20.6"