changed banner.tsx stylings and fixed docs
This commit is contained in:
parent
13f6d7fd3c
commit
a48a97092d
4 changed files with 39 additions and 33 deletions
|
@ -1,11 +1,13 @@
|
||||||
import { NextResponse } from "next/server";
|
import { NextResponse } from "next/server";
|
||||||
import clientPromise from "@/lib/db"; // Adjust the path to where your db.ts is located
|
import clientPromise from "@/lib/db";
|
||||||
|
|
||||||
interface Subscriber {
|
interface Subscriber {
|
||||||
email: string;
|
email: string;
|
||||||
subscribedAt: Date;
|
subscribedAt: Date;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const dynamic = "force-dynamic";
|
||||||
|
|
||||||
export async function GET(req: Request) {
|
export async function GET(req: Request) {
|
||||||
try {
|
try {
|
||||||
const url = new URL(req.url);
|
const url = new URL(req.url);
|
||||||
|
@ -17,7 +19,7 @@ export async function GET(req: Request) {
|
||||||
const db = client.db("newsletter");
|
const db = client.db("newsletter");
|
||||||
const collection = db.collection("subscribers");
|
const collection = db.collection("subscribers");
|
||||||
|
|
||||||
// pagination
|
// Pagination
|
||||||
const documents = await collection.find().skip(skip).limit(limit).toArray();
|
const documents = await collection.find().skip(skip).limit(limit).toArray();
|
||||||
|
|
||||||
const subscribers: Subscriber[] = documents.map((doc) => ({
|
const subscribers: Subscriber[] = documents.map((doc) => ({
|
||||||
|
|
|
@ -32,65 +32,69 @@ export default function Banner({
|
||||||
isBannerVisible && (
|
isBannerVisible && (
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
"relative isolate flex items-center gap-x-6 overflow-hidden bg-gray-50 px-6 py-2 sm:px-3.5 sm:before:flex-1 border-b",
|
"relative isolate flex flex-col sm:flex-row items-start sm:items-center gap-y-4 sm:gap-y-0 sm:gap-x-6 overflow-hidden bg-gray-50 px-4 sm:px-6 py-3 sm:py-2 border-b",
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
className="absolute left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
|
className="absolute left-[calc(50%-20rem)] sm:left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
clipPath:
|
clipPath:
|
||||||
"polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)",
|
"polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)",
|
||||||
}}
|
}}
|
||||||
className="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-primary to-yellow-200 opacity-30"
|
className="aspect-[577/310] w-[20rem] sm:w-[36.0625rem] bg-gradient-to-r from-primary to-yellow-200 opacity-30"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
className="absolute left-[max(45rem,calc(50%+8rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
|
className="absolute left-[calc(50%+16rem)] sm:left-[max(45rem,calc(50%+8rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
clipPath:
|
clipPath:
|
||||||
"polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)",
|
"polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)",
|
||||||
}}
|
}}
|
||||||
className="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-primary to-[#9089fc] opacity-30"
|
className="aspect-[577/310] w-[20rem] sm:w-[36.0625rem] bg-gradient-to-r from-primary to-[#9089fc] opacity-30"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-wrap items-center gap-x-4 gap-y-2">
|
<div className="flex flex-col sm:flex-row sm:items-center flex-wrap gap-x-4 gap-y-2 w-full">
|
||||||
{icon && <div className="flex-none">{icon}</div>}
|
{icon && <span className="flex-none sm:block hidden">{icon}</span>}
|
||||||
<p className="text-sm leading-6 text-gray-900">
|
<div className="flex items-start sm:items-center flex-col sm:flex-row gap-y-2 sm:gap-y-0 w-full">
|
||||||
{title && (
|
<p className="text-sm sm:leading-6 leading-tight text-gray-900">
|
||||||
<>
|
{title && (
|
||||||
<strong className="font-semibold">{title}</strong>
|
<>
|
||||||
<svg
|
<strong className="font-semibold sm:leading-tight leading-normal block sm:inline">
|
||||||
viewBox="0 0 2 2"
|
{title}
|
||||||
aria-hidden="true"
|
</strong>
|
||||||
className="mx-2 inline h-0.5 w-0.5 fill-current"
|
<svg
|
||||||
>
|
viewBox="0 0 2 2"
|
||||||
<circle r={1} cx={1} cy={1} />
|
aria-hidden="true"
|
||||||
</svg>
|
className="mx-2 hidden sm:inline h-0.5 w-0.5 fill-current"
|
||||||
</>
|
>
|
||||||
|
<circle r={1} cx={1} cy={1} />
|
||||||
|
</svg>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{announcement}
|
||||||
|
</p>
|
||||||
|
{link && (
|
||||||
|
<a
|
||||||
|
href={link}
|
||||||
|
className="mt-2 sm:mt-0 flex-none rounded-full bg-gray-900 px-3.5 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 w-auto"
|
||||||
|
>
|
||||||
|
{buttonText} <span aria-hidden="true">→</span>
|
||||||
|
</a>
|
||||||
)}
|
)}
|
||||||
{announcement}
|
</div>
|
||||||
</p>
|
|
||||||
{link && (
|
|
||||||
<a
|
|
||||||
href={link}
|
|
||||||
className="flex-none rounded-full bg-gray-900 px-3.5 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900"
|
|
||||||
>
|
|
||||||
{buttonText} <span aria-hidden="true">→</span>
|
|
||||||
</a>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
{closeButton && (
|
{closeButton && (
|
||||||
<div className="flex flex-1 justify-end">
|
<div className="mt-2 sm:mt-0 flex self-start sm:self-auto sm:flex-1 justify-end">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="-m-3 p-3 focus-visible:outline-offset-[-4px]"
|
className="-m-2 sm:-m-3 p-2 sm:p-3 focus-visible:outline-offset-[-4px]"
|
||||||
onClick={handleClose}
|
onClick={handleClose}
|
||||||
>
|
>
|
||||||
<span className="sr-only">Dismiss</span>
|
<span className="sr-only">Dismiss</span>
|
||||||
|
|
Loading…
Reference in a new issue