Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refined Newsletter #733

Merged
merged 2 commits into from
Jun 6, 2024
Merged

Refined Newsletter #733

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0e0f06d
updated
Akshaybagai52 Jun 4, 2024
6fe44ef
feat: added newsletter
Akshaybagai52 Jun 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 54 additions & 46 deletions components/Newsletter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const NewsletterForm: React.FC<NewsletterFormProps> = ({
return (
<section
className={classnames(
'w-[100vw] mx-auto flex items-center justify-center ',
'w-[100vw] mx-auto flex items-center justify-center ',
background === 'white'
? 'bg-white dark:bg-transparent text-black'
: 'bg-transparent text-white',
Expand All @@ -29,61 +29,69 @@ const NewsletterForm: React.FC<NewsletterFormProps> = ({
>
<div
className={classnames(
'w-full max-w-[900px] text-center px-5 py-9 relative',
'w-full max-w-[1000px] text-center py-9 px-5 relative md:flex block',
background === 'white'
? 'bg-white dark:bg-transparent'
: 'bg-transparent',
className,
'justify-between',
)}
>
<h3 className=' font-bold tracking-heading mb-4 text-h4 md:text-h3 px-5 dark:text-slate-50'>
Subscribe to our newsletter to receive news about Json Schema.
</h3>
<p className='text-lg mb-8 dark:text-slate-50'>
We respect your inbox. No spam, promise ✌️
</p>
<form
action={formAction}
method='post'
className='flex flex-col md:flex-row gap-4'
>
<input
type='text'
name='FNAME'
placeholder='Your Name'
className={classnames(
'form-input block w-full py-3 text-lg h-[38px] sm:h-[45px] sm:text-lg sm:leading-5 border-2 md:flex-1 rounded px-5 bg-gray-200 text-black',
background == 'black' ? 'bg-white' : '',
)}
value={username}
onChange={(e: any) => setUsername(e.target.value)}
/>
<input
type='email'
name='EMAIL'
placeholder='Your Email'
className={classnames(
'form-input block w-full py-3 text-lg sm:text-lg border-2 sm:leading-5 h-[38px] sm:h-[45px] md:flex-1 rounded px-5 bg-gray-200 text-black',
background == 'black' ? 'bg-white' : '',
)}
value={email}
onChange={(e: any) => setEmail(e.target.value)}
/>
<button
type='submit'
className=' h-[40px] sm:h-[45px] mx-auto rounded border-2 bg-primary w-full font-semibold md:mt-0 md:flex-1 text-white'
// className='bg-primary-500 hover:bg-primary-400 text-white bg-[#445cf4] transition-all duration-500 ease-in-out rounded-md px-4 py-3 text-md font-semibold tracking-heading w-full md:mt-0 md:flex-1'
<div className='md:w-[48%] w-full'>
<p className='font-bold text-left tracking-heading mb-4 text-h4 dark:text-slate-50'>
Subscribe to our newsletter to receive news about Json Schema.
</p>
<p className='text-lg text-left mb-8 dark:text-slate-50'>
We respect your inbox. No spam, promise ✌️
</p>
</div>
<aside className='px-5 py-10 md:w-[48%] w-full border-2 rounded'>
<p className='uppercase font-bold dark:text-slate-50 text-left mb-5'>
Join the JSON Schema Weekly mailing list
</p>
<form
action={formAction}
method='post'
className='flex flex-col gap-4'
>
<span className='inline-block'>Subscribe</span>
</button>
<div className='display: hidden'>
<input
type='text'
name='b_ef8789d5789a6aff8113a701d_11103c248b'
value=''
name='FNAME'
placeholder='Name'
className={classnames(
'form-input block w-full py-3 text-lg h-[38px] sm:h-[45px] dark:bg-transparent sm:text-lg sm:leading-5 border-2 rounded px-5 text-black dark:text-white',
background == 'black' ? 'bg-white' : '',
)}
value={username}
onChange={(e: any) => setUsername(e.target.value)}
/>
</div>
</form>
<input
type='email'
name='EMAIL'
placeholder='Email'
className={classnames(
'form-input block w-full py-3 text-lg sm:text-lg border-2 sm:leading-5 h-[38px] dark:bg-transparent sm:h-[45px] rounded px-5 text-black dark:text-white',
background == 'black' ? 'bg-white' : '',
)}
value={email}
onChange={(e: any) => setEmail(e.target.value)}
/>
<button
type='submit'
className=' h-[40px] sm:h-[45px] mx-auto rounded border-2 bg-primary w-full font-semibold md:mt-0 text-white'
// className='bg-primary-500 hover:bg-primary-400 text-white bg-[#445cf4] transition-all duration-500 ease-in-out rounded-md px-4 py-3 text-md font-semibold tracking-heading w-full md:mt-0 md:flex-1'
>
<span className='inline-block'>Subscribe</span>
</button>
<div className='display: hidden'>
<input
type='text'
name='b_ef8789d5789a6aff8113a701d_11103c248b'
value=''
/>
</div>
</form>
</aside>
</div>
</section>
);
Expand Down
40 changes: 40 additions & 0 deletions components/NewsletterCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import Link from 'next/link';
import React from 'react';

type NewsletterProps = {
url: string;
title: string;
date: string;
};

const NewsletterCard = ({
newsletterData,
}: {
newsletterData: NewsletterProps[];
}) => {
const sortedNewsletterData = [...newsletterData].sort((a, b) => {
return new Date(b.date).getTime() - new Date(a.date).getTime();
});

return (
<div className='grid grid-cols-1 p-4 sm:grid-cols-2 md:grid-cols-3 gap-4'>
{sortedNewsletterData.map((newsletter, index) => (
<div
key={index}
className='p-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:shadow-lg'
>
<Link href={newsletter.url} className='block'>
<h3 className='text-lg font-semibold mb-2 truncate'>
{newsletter.title}
</h3>
</Link>
<p className='text-gray-600 dark:text-white mb-2'>
{newsletter.date}
</p>
</div>
))}
</div>
);
};

export default NewsletterCard;
87 changes: 87 additions & 0 deletions data/newsletter.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
[
{
"url": "https://example.com/newsletter-123",
"title": "JSON Schema Newsletter #123",
"date": "2024-01-01"
},
{
"url": "https://example.com/newsletter-124",
"title": "JSON Schema Newsletter #124",
"date": "2024-01-08"
},
{
"url": "https://example.com/newsletter-125",
"title": "JSON Schema Newsletter #125",
"date": "2024-01-15"
},
{
"url": "https://example.com/newsletter-126",
"title": "JSON Schema Newsletter #126",
"date": "2024-01-22"
},
{
"url": "https://example.com/newsletter-127",
"title": "JSON Schema Newsletter #127",
"date": "2024-01-29"
},
{
"url": "https://example.com/newsletter-128",
"title": "JSON Schema Newsletter #128",
"date": "2024-02-05"
},
{
"url": "https://example.com/newsletter-129",
"title": "JSON Schema Newsletter #129",
"date": "2024-02-12"
},
{
"url": "https://example.com/newsletter-130",
"title": "JSON Schema Newsletter #130",
"date": "2024-02-19"
},
{
"url": "https://example.com/newsletter-131",
"title": "JSON Schema Newsletter #131",
"date": "2024-02-26"
},
{
"url": "https://example.com/newsletter-132",
"title": "JSON Schema Newsletter #132",
"date": "2024-03-04"
},
{
"url": "https://example.com/newsletter-133",
"title": "JSON Schema Newsletter #133",
"date": "2024-03-11"
},
{
"url": "https://example.com/newsletter-134",
"title": "JSON Schema Newsletter #134",
"date": "2024-03-18"
},
{
"url": "https://example.com/newsletter-135",
"title": "JSON Schema Newsletter #135",
"date": "2024-03-25"
},
{
"url": "https://example.com/newsletter-136",
"title": "JSON Schema Newsletter #136",
"date": "2024-04-01"
},
{
"url": "https://example.com/newsletter-137",
"title": "JSON Schema Newsletter #137",
"date": "2024-04-08"
},
{
"url": "https://example.com/newsletter-138",
"title": "JSON Schema Newsletter #138",
"date": "2024-04-15"
},
{
"url": "https://example.com/newsletter-139",
"title": "JSON Schema Newsletter #139",
"date": "2024-04-22"
}
]
12 changes: 10 additions & 2 deletions pages/newsletter/index.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import Head from 'next/head';
import { getLayout } from '~/components/SiteLayout';
import NewsletterForm from '~/components/Newsletter';
import { SectionContext } from '~/context';
import data from '../../data/newsletter.json';
import NewsletterCard from '~/components/NewsletterCard';

export default function StaticMarkdownPage() {
const newTitle = 'JSON Schema Newsletter';
Expand All @@ -14,9 +16,15 @@ export default function StaticMarkdownPage() {
<div className='flex flex-col items-center justify-center'>
<div className='max-w-[1400px] mx-auto'>
<NewsletterForm
className='pt-[100px] text-black'
wrapperClassName='h-full sm:h-[calc(100vh-312px)] py-[50px] sm:py-0 px-5 sm:px-10 lg:w-full'
className='pt-[150px] text-black'
wrapperClassName='h-full sm:py-0 lg:w-full'
/>
<div className='mt-10'>
<h2 className='text-xl font-bold p-4 bg-gray-200 dark:bg-transparent'>
Grouping by 2024
</h2>
<NewsletterCard newsletterData={data} />
</div>
</div>
</div>
</SectionContext.Provider>
Expand Down
Loading