-
-
Notifications
You must be signed in to change notification settings - Fork 30
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
30208ea
commit 1a1ad0b
Showing
7 changed files
with
94 additions
and
92 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,23 @@ | ||
| 'use client'; | ||
|
|
||
| import React from "react"; | ||
| import {useGlowHover} from "../use-glow-hover"; | ||
| import {twMerge} from "tailwind-merge"; | ||
| import {BaseContainer} from "./base-container"; | ||
| import React from 'react'; | ||
| import { twMerge } from 'tailwind-merge'; | ||
| import { useGlowHover } from '../use-glow-hover'; | ||
| import { BaseContainer } from './base-container'; | ||
|
|
||
| import { BaseContainerProps } from './base-container'; | ||
|
|
||
| export const GlowHoverContainer = React.forwardRef<HTMLDivElement, Omit<BaseContainerProps, 'wrapperRef'>>( | ||
| ({ className, ...props }, ref) => { | ||
| const refCard = useGlowHover({ lightColor: '#CEFF00' }); | ||
| ({ className, ...props }, ref) => { | ||
| const refCard = useGlowHover({ lightColor: '#CEFF00' }); | ||
|
|
||
| return ( | ||
| <BaseContainer | ||
| wrapperClassName={twMerge('theme-blue', className)} | ||
| ref={ref} | ||
| {...props} | ||
| wrapperRef={refCard as React.Ref<HTMLDivElement>} | ||
| /> | ||
| ); | ||
| }, | ||
| ); | ||
| return ( | ||
| <BaseContainer | ||
| wrapperClassName={twMerge('theme-blue', className)} | ||
| ref={ref} | ||
| {...props} | ||
| wrapperRef={refCard as React.Ref<HTMLDivElement>} | ||
| /> | ||
| ); | ||
| }, | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
99 changes: 52 additions & 47 deletions
99
website/src/components/newsletter-form/newsletter-form.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,56 +1,61 @@ | ||
| 'use client' | ||
| 'use client'; | ||
|
|
||
| import {useApi} from '@/hooks/useApi'; | ||
| import * as z from 'zod'; | ||
| import {useForm} from 'react-hook-form'; | ||
| import {zodResolver} from '@hookform/resolvers/zod'; | ||
| import {CreateNewsletterSubscription} from '@/app/api/newsletter/subscription/public/route'; | ||
| import { CreateNewsletterSubscription } from '@/app/api/newsletter/subscription/public/route'; | ||
| import { useApi } from '@/hooks/useApi'; | ||
| import { zodResolver } from '@hookform/resolvers/zod'; | ||
| import { Button, Form, FormControl, FormField, FormItem, FormMessage, Input } from '@socialincome/ui'; | ||
| import { useForm } from 'react-hook-form'; | ||
| import toast from 'react-hot-toast'; | ||
| import {Button, Form, FormControl, FormField, FormItem, FormMessage, Input} from '@socialincome/ui'; | ||
| import * as z from 'zod'; | ||
|
|
||
| const NewsletterForm = ({ lang, t, translations }) => { | ||
| const api = useApi(); | ||
| const formSchema = z.object({ email: z.string().email() }); | ||
| type FormSchema = z.infer<typeof formSchema>; | ||
| const form = useForm<FormSchema>({ | ||
| resolver: zodResolver(formSchema), | ||
| defaultValues: { email: '' }, | ||
| }); | ||
| const api = useApi(); | ||
| const formSchema = z.object({ email: z.string().email() }); | ||
| type FormSchema = z.infer<typeof formSchema>; | ||
| const form = useForm<FormSchema>({ | ||
| resolver: zodResolver(formSchema), | ||
| defaultValues: { email: '' }, | ||
| }); | ||
|
|
||
| const onSubmit = async (values: FormSchema) => { | ||
| const body: CreateNewsletterSubscription = { | ||
| email: values.email, | ||
| language: lang === 'de' ? 'de' : 'en', | ||
| }; | ||
| api.post('/api/newsletter/subscription/public', body).then((response) => { | ||
| if (response.status === 200) { | ||
| toast.dismiss(t.id); | ||
| toast.success(translations.toastSuccess); | ||
| } else { | ||
| toast.error(translations.toastFailure); | ||
| } | ||
| }); | ||
| }; | ||
| const onSubmit = async (values: FormSchema) => { | ||
| const body: CreateNewsletterSubscription = { | ||
| email: values.email, | ||
| language: lang === 'de' ? 'de' : 'en', | ||
| }; | ||
| api.post('/api/newsletter/subscription/public', body).then((response) => { | ||
| if (response.status === 200) { | ||
| toast.dismiss(t.id); | ||
| toast.success(translations.toastSuccess); | ||
| } else { | ||
| toast.error(translations.toastFailure); | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| return ( | ||
| <Form {...form}> | ||
| <form className="flex gap-2 flex-col sm:flex-row justify-center w-full items-center" onSubmit={form.handleSubmit(onSubmit)}> | ||
| <FormField | ||
| control={form.control} | ||
| name="email" | ||
| render={({ field }) => ( | ||
| <FormItem className="flex-1 max-w-full sm:max-w-96 w-full"> | ||
| <FormControl> | ||
| <Input type="email" placeholder={translations.emailPlaceholder} {...field} /> | ||
| </FormControl> | ||
| <FormMessage /> | ||
| </FormItem> | ||
| )} | ||
| /> | ||
| <Button type="submit" className="w-full sm:w-full sm:max-w-[10rem]">{translations.buttonAddSubscriber}</Button> | ||
| </form> | ||
| </Form> | ||
| ); | ||
| return ( | ||
| <Form {...form}> | ||
| <form | ||
| className="flex w-full flex-col items-center justify-center gap-2 sm:flex-row" | ||
| onSubmit={form.handleSubmit(onSubmit)} | ||
| > | ||
| <FormField | ||
| control={form.control} | ||
| name="email" | ||
| render={({ field }) => ( | ||
| <FormItem className="w-full max-w-full flex-1 sm:max-w-96"> | ||
| <FormControl> | ||
| <Input type="email" placeholder={translations.emailPlaceholder} {...field} /> | ||
| </FormControl> | ||
| <FormMessage /> | ||
| </FormItem> | ||
| )} | ||
| /> | ||
| <Button type="submit" className="w-full sm:w-full sm:max-w-[10rem]"> | ||
| {translations.buttonAddSubscriber} | ||
| </Button> | ||
| </form> | ||
| </Form> | ||
| ); | ||
| }; | ||
|
|
||
| export default NewsletterForm; |
38 changes: 17 additions & 21 deletions
38
website/src/components/newsletter-glow-container/newsletter-glow-container.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,24 @@ | ||
| 'use client' | ||
| 'use client'; | ||
|
|
||
| import { | ||
| GlowHoverContainer, | ||
| Typography | ||
| } from "@socialincome/ui"; | ||
| import { GlowHoverContainer, Typography } from '@socialincome/ui'; | ||
|
|
||
| import NewsletterForm from "@/components/newsletter-form/newsletter-form"; | ||
| import NewsletterForm from '@/components/newsletter-form/newsletter-form'; | ||
|
|
||
| const NewsletterGlowContainer = ({ title, formTranslations }) => { | ||
|
|
||
| return ( | ||
| <GlowHoverContainer> | ||
| <div className="flex flex-col items-center py-12"> | ||
| <div className="flex flex-col align-center"> | ||
| <Typography size="2xl" color="foreground" weight="medium"> | ||
| {title} | ||
| </Typography> | ||
| </div> | ||
| <div className="flex sm:w-full md:max-w-md w-full justify-center mt-8"> | ||
| <NewsletterForm translations={formTranslations} /> | ||
| </div> | ||
| </div> | ||
| </GlowHoverContainer> | ||
| ); | ||
| return ( | ||
| <GlowHoverContainer> | ||
| <div className="flex flex-col items-center py-12"> | ||
| <div className="align-center flex flex-col"> | ||
| <Typography size="2xl" color="foreground" weight="medium"> | ||
| {title} | ||
| </Typography> | ||
| </div> | ||
| <div className="mt-8 flex w-full justify-center sm:w-full md:max-w-md"> | ||
| <NewsletterForm translations={formTranslations} /> | ||
| </div> | ||
| </div> | ||
| </GlowHoverContainer> | ||
| ); | ||
| }; | ||
|
|
||
| export default NewsletterGlowContainer; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters