diff --git a/.env.example b/.env.example index adfde84..89f67c3 100644 --- a/.env.example +++ b/.env.example @@ -1,5 +1,5 @@ -NEXTAUTH_URL=http://localhost:3000 NEXTAUTH_SECRET=topsecret +NEXTAUTH_URL=http://localhost:3000 # --- Start for development POSTGRES_DB=postgres @@ -17,13 +17,11 @@ DATABASE_URL="postgres://${POSTGRES_USER}:${POSTGRES_PASSWORD}@localhost:${POSTG # GITHUB_ORG= # Use this one for magic link authentication -SMTP_USER=mailpit -SMTP_PASSWORD=topsecret -SMTP_HOST=0.0.0.0 -SMTP_PORT=1025 -EMAIL_FROM="Sieutoc Team " +# SMTP_USER=mailpit +# SMTP_PASSWORD=topsecret +# SMTP_HOST=0.0.0.0 +# SMTP_PORT=1025 +# EMAIL_FROM="Sieutoc Team " -EASYPANEL_API_KEY= EASYPANEL_URL= - -STRIPE_SECRET_KEY= +EASYPANEL_API_KEY= diff --git a/README.md b/README.md index 5c50628..1315b0d 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,9 @@ +Sieutoc - Sieutoc - -

Sieutoc Platform

- +

Sieutoc Platform

-Create modern apps easier + Create modern apps easier


@@ -14,7 +12,7 @@ Create modern apps easier This template includes the following: -- Next.js 13 +- Next.js 14 - TypeScript - ESLint - Prettier @@ -25,6 +23,7 @@ This template includes the following: - PostgresQL - Redis - Mailpit +- And plenty of well-crafted components like HeroSection, Features, Pricings, SubscribeForm etc. ## Demo @@ -61,7 +60,7 @@ cd your-project pnpm install ``` -#### Setup environment variables +## Setup environment variables For the first time, you need some default environment variables: @@ -69,6 +68,19 @@ For the first time, you need some default environment variables: cp .env.example .env ``` +#### If you want to use magic link login + +Uncomment the `SMPT` section in `.env` file. By default we already set Mailpit for you. + +The mailbox can be reach at http://localhost:8025 + + +#### If you want to use GitHub login + +Uncomment the `GITHUB` section in .env file. Follow this [documentation](https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app) to configure the authentication. + +#### Let's get started! + Then, run the development server: ```bash @@ -76,3 +88,21 @@ pnpm dev ``` Open [http://localhost:3000](http://localhost:3000) with your browser and start developing. + +## Further instructions + +Currently we leave only EasyPanel helper actions along with its templates. This is heavy and repetitive task that's why we don't want to add all the templates from EasyPanel. + +The main idea of this platform is, you can use it to quickly start developing a product/service and serve your customers right away. + +It does not mean to replace the EasyPanel product. + +To use EasyPanel function, you need to obtain and set up the .env file: + +```bash +EASYPANEL_URL=https://your-easypanel.url +EASYPANEL_API_KEY=your-easypanel-apikey +``` + +NOTE: The actions by default will create new project for 1-1 match with our platform Project. The free version of EasyPanel only supports 3 projects! +Make sure to upgrade your EasyPanel license. diff --git a/components/client/ProButton/index.tsx b/components/client/ProButton/index.tsx new file mode 100644 index 0000000..eb4a2c1 --- /dev/null +++ b/components/client/ProButton/index.tsx @@ -0,0 +1,93 @@ +'use client'; + +import { + ButtonProps, + Button, + ModalCloseButton, + ModalContent, + ModalOverlay, + ModalHeader, + ModalBody, + Modal, + Stack, + Heading, + Text, + ModalFooter, + ListItem, + List, + ListIcon, + Badge, + Flex, +} from '@/components/chakra'; +import { CheckIcon, PremiumIcon } from '@/icons'; +import { forwardRef, useState } from 'react'; +import { FEATURES } from '@/lib/constants'; +import { useDisclosure } from '@/hooks'; + +export type ProButtonProps = ButtonProps; + +export const ProButton = forwardRef((props, ref) => { + const { isOpen, onOpen, onClose } = useDisclosure(); + const [isYearly, setYearly] = useState(true); + + const billMode = isYearly ? 'yearly' : 'monthly'; + + return ( + <> + + + + {FEATURES['PRO'].features.map((feature, index) => ( + + + + {feature} + + + ))} + + + + + + + + + + + + ); +}); diff --git a/components/client/SubscribeForm/index.tsx b/components/client/SubscribeForm/index.tsx new file mode 100644 index 0000000..c52ae62 --- /dev/null +++ b/components/client/SubscribeForm/index.tsx @@ -0,0 +1,103 @@ +'use client'; + +import { + Button, + FormControl, + FormLabel, + Heading, + Input, + SimpleGrid, + Stack, + Text, +} from '@/components/chakra'; +import { useColorModeValue, useState, useToast } from '@/hooks'; +import { HttpMethod, SubscribeResponse } from '@/types'; +import { NextLink } from '@/components/client'; +import { fetcher } from '@/lib/utils'; + +export type SubscribeFormProps = { + heading?: string; + lists: number[]; +}; + +export const SubscribeForm = ({ + heading = 'Subscribe for updates', + lists, +}: SubscribeFormProps) => { + const inputBgColor = useColorModeValue('gray.100', 'gray.800'); + const [email, setEmail] = useState(''); + const [name, setName] = useState(''); + const { toast } = useToast(); + + const handleSubscribe = async () => { + const response = await fetcher('/api/mailinglist/subscribers', { + method: HttpMethod.POST, + body: JSON.stringify({ + name: name ? name : 'subscriber', + status: 'enabled', + lists, + email, + }), + }); + + if (response.data) { + toast({ description: 'Successfully subscribed! Please check your mailbox' }); + } else { + toast({ description: 'Something wrong, please contact support', status: 'error' }); + } + }; + + return ( + + + + {heading} + + + By subscribing, you agree with our{' '} + {' '} + and{' '} + + + + {name && ( + + Name + setName(e.target.value)} + focusBorderColor="brand.500" + bgColor={inputBgColor} + value={name} + name="name" + size="lg" + /> + + )} + + + setEmail(e.target.value)} + focusBorderColor="brand.500" + bgColor={inputBgColor} + value={email} + type="email" + size="lg" + /> + + + + ); +};