docs: add useScreenSafeArea docs & demo

Author: pengzhanbo

public/safe-areas-1.png

@@ -0,0 +1,20 @@
+/**
+ * title: Basic Usage
+ * desc: Get the safe area of the screen.
+ *
+ * title.zh-CN: 基础用法
+ * desc.zh-CN: 获取屏幕安全区域。
+ */
+import { useScreenSafeArea } from '@any-hooks/solid'
+
+export default () => {
+  const safeArea = useScreenSafeArea()
+
+  return (
+    <div>
+      <pre>
+        {JSON.stringify(safeArea(), null, 2)}
+      </pre>
+    </div>
+  )
+}

src/useScreenSafeArea/demo/demo1.tsx

@@ -0,0 +1,43 @@
+# useScreenSafeArea
+
+Reactive `env(safe-area-inset-*)`
+
+Get the safe area of the screen.
+
+<img src="/safe-areas-1.png" alt="safe-area" style="max-width: 80%;display:block;margin:24px auto" />
+
+## Examples
+
+### Basic Usage
+
+>>> ./demo/demo1.tsx
+
+
+## Usage
+
+In order to make the page to be fully rendered in the screen, the additional attribute `viewport-fit=cover` within `viewport` meta tag must be set firstly, the `viewport` meta tag may look like this:
+
+```html
+<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
+```
+
+## API
+
+```ts
+const safeArea = useScreenSafeArea()
+```
+
+### Result
+
+| 参数     | 说明     | 类型             |
+| -------- | -------- | ---------------- |
+| safeArea | 安全区域 | `Accessor<Area>` |
+
+### Area
+
+| 参数     | 说明         | 类型             |
+| -------- | ------------ | ---------------- |
+| top      | 顶部安全区域 | `string`         |
+| bottom   | 底部安全区域 | `string`         |
+| left     | 左侧安全区域 | `string`         |
+| right    | 右侧安全区域 | `string`         |

src/useScreenSafeArea/index.en-US.md

@@ -0,0 +1,44 @@
+# useScreenSafeArea
+
+响应式 `env(safe-area-inset-*)`
+
+获取屏幕可交互的安全区域。
+
+<img src="/safe-areas-1.png" alt="safe-area" style="max-width: 80%;display:block;margin:24px auto" />
+
+## 代码演示
+
+### 基础用法
+
+>>> ./demo/demo1.tsx
+
+
+## 使用
+
+为了使页面在屏幕上完全呈现，必须首先设置 `viewport meta` 标签中的附加属性 `viewport-fit=cover`,
+`viewport meta` 标签可能看起来像这样:
+
+```html
+<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
+```
+
+## API
+
+```ts
+const safeArea = useScreenSafeArea()
+```
+
+### Result
+
+| Property | Description     | Type             |
+| -------- | --------------- | ---------------- |
+| safeArea | Safe area       | `Accessor<Area>` |
+
+### Area
+
+| Property | Description         | Type             |
+| -------- | ------------------- | ---------------- |
+| top      | Safe area of top    | `string`         |
+| bottom   | Safe area of bottom | `string`         |
+| left     | Safe area of left   | `string`         |
+| right    | Safe area of right  | `string`         |