New docs website (#29)

.eslintignore

@@ -1 +1,2 @@
-node_modules/
+node_modules/
+docs/

.gitignore

@@ -68,3 +68,5 @@ android/keystores/debug.keystore
 
 # generated by bob
 lib/
+
+docs/.next

docs/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": "next/core-web-vitals"
+}

docs/README.md

@@ -1,41 +1,11 @@
-# Website
+# [Ficus UI Documentation](https://ficus-ui.com)
 
-This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+To develop locally, clone this repository and run the following command to start
+the local dev server:
 
-### Installation
-
-```
-$ yarn
-```
-
-### Local Development
-
-```
-$ yarn start
-```
-
-This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
-
-### Build
-
-```
-$ yarn build
-```
-
-This command generates static content into the `build` directory and can be served using any static contents hosting service.
-
-### Deployment
-
-Using SSH:
-
-```
-$ USE_SSH=true yarn deploy
-```
-
-Not using SSH:
-
-```
-$ GIT_USER=<Your GitHub username> yarn deploy
+```bash
+yarn
+yarn dev
 ```
 
-If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
+And visit `localhost:3000` to preview your changes.

docs/components/authors.jsx

@@ -0,0 +1,23 @@
+export default function Authors({ date, children }) {
+  return (
+    <div className="mb-16 mt-8 text-sm text-gray-400">
+      {date} by {children}
+    </div>
+  )
+}
+
+export function Author({ name, link }) {
+  return (
+    <span className="after:content-[','] last:after:content-['']">
+      <a
+        key={name}
+        href={link}
+        target="_blank"
+        rel="noreferrer"
+        className="mx-1 text-gray-800 dark:text-gray-100"
+      >
+        {name}
+      </a>
+    </span>
+  )
+}

docs/components/demos/card.js

@@ -0,0 +1,21 @@
+import { ThemeProvider } from 'react-native-ficus-ui';
+
+import { ItemCard } from '@components/demos/responsive';
+
+export const Card = () => {
+  const item = {
+    id: 1,
+    image: 'https://bit.ly/4dR2Hgy',
+    location: 'Cape Town',
+    name: 'Modern, Chic Penthouse with Pool and Golf park',
+    price: '200$',
+    scoring: 4.91,
+    evaluations: 290,
+  };
+
+  return (
+    <ThemeProvider>
+      <ItemCard content={item} />
+    </ThemeProvider>
+  );
+};

docs/components/demos/responsive.js

@@ -0,0 +1,127 @@
+import { useEffect, useState } from 'react';
+import {
+  ThemeProvider,
+  Box,
+  Image,
+  HStack,
+  Text,
+  VStack,
+  Input,
+  Button,
+  Center,
+  Spinner,
+} from 'react-native-ficus-ui';
+
+export const ItemCard = ({ content, ...props }) => {
+  return (
+    <VStack
+      p={10}
+      borderWidth={1}
+      borderColor="gray.200"
+      borderRadius="lg"
+      spacing="md"
+      bg="white"
+      {...props}
+    >
+      <Image
+        borderRadius="md"
+        source={{ uri: content.image }}
+        w="100%"
+        h={200}
+        alt="House image"
+      />
+      <HStack alignItems="center" mt={2} spacing="sm">
+        <Box bg="pink.100" w="fit-content" p={2}>
+          <Text
+            color="pink.800"
+            textTransform="uppercase"
+            fontSize="sm"
+            fontWeight="bold"
+          >
+            Plus
+          </Text>
+        </Box>
+        <Text
+          textTransform="uppercase"
+          fontSize="sm"
+          fontWeight="bold"
+          color="pink.800"
+        >
+          {content.location}
+        </Text>
+      </HStack>
+      <Text fontSize="xl" fontWeight="bold" lineHeight="short">
+        {content.name}
+      </Text>
+      <Text fontSize="lg">{content.price}/night</Text>
+      <Box flexDirection="row" alignItems="center">
+        <Text fontSize="sm">⭐️</Text>
+        <Text ml={5} fontSize="sm" fontWeight="bold">
+          {content.scoring} ({content.evaluations})
+        </Text>
+      </Box>
+    </VStack>
+  );
+};
+
+export const Responsive = () => {
+  const item = {
+    id: 2,
+    image: 'https://bit.ly/3WYtHUM',
+    location: 'New-York City',
+    name: 'Architectural house',
+    price: '200$',
+    scoring: 4.85,
+    evaluations: 2934,
+  };
+
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setIsLoading(false);
+    }, [1000]);
+  }, []);
+
+  return (
+    <ThemeProvider>
+      {isLoading ? (
+        <Center flex={1}>
+          <Spinner color="teal.500" size="lg" />
+        </Center>
+      ) : (
+        <Box w="100%">
+          <Box
+            flexDirection="row"
+            justify={{ base: 'flex-start', sm: 'center' }}
+            my="lg"
+          >
+            <Box
+              flexDirection={{ base: 'column', sm: 'row' }}
+              w={{ base: '100%', sm: undefined }}
+            >
+              <Input
+                placeholder="Search location"
+                p={10}
+                w={{ base: '100%', sm: 300 }}
+                borderWidth={2}
+                focusBorderColor="teal.500"
+              />
+              <Button
+                colorScheme="teal"
+                full={{ base: true, sm: false }}
+                mt={{ base: 5, sm: undefined }}
+                ml={{ base: undefined, sm: 5 }}
+              >
+                Search
+              </Button>
+            </Box>
+          </Box>
+          <Box mt="lg">
+            <ItemCard content={item} w={{ base: '100%', sm: '50%' }} />
+          </Box>
+        </Box>
+      )}
+    </ThemeProvider>
+  );
+};