Plainform

The Event component displays promotional announcements or events with eye-catching animations. It fetches event data from the database and renders an animated banner with border beam effects.

Usage

Basic Implementation

@/app/(base)/page.tsx

import { Event } from '@/components/Event';

export default function HomePage() {
  return (
    <main>
      <Event />
    </main>
  );
}

In Hero Section

@/components/Hero.tsx

import { Event } from '@/components/Event';

export function Hero() {
  return (
    <section className="flex flex-col items-center gap-4">
      <Event />
      <h1>Welcome to Our Product</h1>
      <p>Your tagline here</p>
    </section>
  );
}

Features

Database-Driven: Fetches event data from Prisma database
Animated Text: Shiny text effect with gradient animation
Border Beams: Dual animated border beams with different colors
Conditional Rendering: Only displays when event exists
Clickable: Links to event slug for more details
Responsive: Adapts to mobile and desktop layouts

Implementation Details

Data Fetching

The component uses the getEvent function to fetch data:

@/lib/events/getEvent.ts

export async function getEvent() {
  // Fetches active event from database
  // Returns { event: { text, slug } }
}

Returns:

event.text - Event announcement text
event.slug - URL slug for event details page

Conditional Rendering

The component returns null if no event exists:

Conditional Rendering

if (!data.event) {
  return null;
}

This prevents displaying an empty banner.

Animation Effects

The component uses two animated effects:

AnimatedShinyText: Gradient text animation
BorderBeam: Dual animated border beams

Animation Structure

<Link href={`/${data?.event?.slug}`}>
  <AnimatedShinyText>
    <span>✨</span>
    <span>{data?.event?.text}</span>
    <MoveRight size={14} />
  </AnimatedShinyText>

  {/* First border beam - indigo */}
  <BorderBeam
    duration={6}
    size={1000}
    initialOffset={1400}
    borderWidth={0.5}
    className="from-transparent via-indigo-500 to-transparent"
  />

  {/* Second border beam - pink */}
  <BorderBeam
    duration={6}
    delay={3}
    size={1000}
    initialOffset={1400}
    borderWidth={0.5}
    className="from-transparent via-pink-400 to-transparent"
  />
</Link>

Customization

Changing Border Colors

Modify the gradient colors in BorderBeam:

Custom Colors

<BorderBeam
  duration={6}
  size={1000}
  initialOffset={1400}
  borderWidth={0.5}
  className="from-transparent via-blue-500 to-transparent"
/>
<BorderBeam
  duration={6}
  delay={3}
  size={1000}
  initialOffset={1400}
  borderWidth={0.5}
  className="from-transparent via-green-400 to-transparent"
/>

Adjusting Animation Speed

Change the duration prop:

Faster Animation

<BorderBeam
  duration={3}
  size={1000}
  initialOffset={1400}
  borderWidth={0.5}
  className="from-transparent via-indigo-500 to-transparent"
/>

Custom Icon

Replace the sparkle emoji with a custom icon:

Custom Icon

<AnimatedShinyText className="flex items-center gap-4 justify-center">
  <div className="flex gap-2 items-center">
    <SvgFinder icon="Zap" size={16} />
    <span>{data?.event?.text}</span>
  </div>
  <MoveRight size={14} />
</AnimatedShinyText>

Border Width

Adjust the border thickness:

Thicker Border

<BorderBeam
  duration={6}
  size={1000}
  initialOffset={1400}
  borderWidth={1.5}
  className="from-transparent via-indigo-500 to-transparent"
/>

Database Schema

The event data comes from the Prisma database:

@/prisma/schema.prisma

model Event {
  id        String   @id @default(cuid())
  text      String
  slug      String
  active    Boolean  @default(true)
  createdAt DateTime @default(now())
}

Creating Events

To add a new event:

Insert into database via Prisma Studio or API:

@/app/api/events/route.ts

await prisma.event.create({
  data: {
    text: "🎉 New feature launched! Check it out",
    slug: "new-feature-launch",
    active: true,
  },
});

The component will automatically display the active event

Styling

The component uses Tailwind CSS with custom styling:

rounded-full - Pill-shaped banner
px-7 py-2 - Comfortable padding
text-sm - Small text size
text-neutral-foreground - Secondary text color
overflow-hidden - Clips border beam animations
cursor-pointer - Indicates clickability

Responsive Design

The component adapts to mobile screens:

max-md:mt-8 - Additional top margin on mobile
Text truncation with line-clamp-1 prevents overflow

Performance

Server Component: Fetches data on the server
Conditional Rendering: No DOM elements when no event exists
Optimized Animations: CSS-based animations for smooth performance

AnimatedShinyText.tsx - Text animation component
BorderBeam.tsx - Border animation component
Database Setup - Prisma configuration

Event.tsx

Usage

Basic Implementation

In Hero Section

Features

Implementation Details

Data Fetching

Conditional Rendering

Animation Effects

Customization

Changing Border Colors

Adjusting Animation Speed

Custom Icon

Border Width

Database Schema

Creating Events

Styling

Responsive Design

Performance

On this page