Adocasts Adocasts
Adocasts Adocasts
Sign In Sign Up
Playing Next Lesson In
seconds
EdgeJS Components

EdgeJS Components #4.1

Adding Alert Variants

In This Lesson

We'll focus on adding a light, dark, blue, green, red, and yellow variant option to our base alert.

Created by
@tomgobich
Published

Next up, let’s go ahead and add in our variant options while our component’s markup is still relatively simple. This process will be relatively similar to when we added our button’s variant options.

Getting the Variant Classes

First, let’s copy the Pines UI markup for the alert variant options, or you can copy it from below.

<div class="relative w-full rounded-lg border border-transparent bg-blue-600 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-white">
    <svg class="w-5 h-5 -translate-y-0.5" xmlns="<http://www.w3.org/2000/svg>" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" /></svg>
    <h5 class="mb-1 font-medium leading-none tracking-tight">Alert Message Headline</h5>
    <div class="text-sm opacity-80">This is the subtext for your alert message, providing important information or instructions.</div>
</div>
<div class="relative w-full rounded-lg border border-transparent bg-red-600 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-white">
    <svg class="w-5 h-5 -translate-y-0.5" xmlns="<http://www.w3.org/2000/svg>" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" /></svg>
    <h5 class="mb-1 font-medium leading-none tracking-tight">Alert Message Headline</h5>
    <div class="text-sm opacity-80">This is the subtext for your alert message, providing important information or instructions.</div>
</div>
<div class="relative w-full rounded-lg border border-transparent bg-green-500 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-white">
    <svg class="w-5 h-5 -translate-y-0.5" xmlns="<http://www.w3.org/2000/svg>" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
    <h5 class="mb-1 font-medium leading-none tracking-tight">Alert Message Headline</h5>
    <div class="text-sm opacity-80">This is the subtext for your alert message, providing important information or instructions.</div>
</div>
<div class="relative w-full rounded-lg border border-transparent bg-yellow-500 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-white">
    <svg class="w-5 h-5 -translate-y-0.5" xmlns="<http://www.w3.org/2000/svg>" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" /></svg>
    <h5 class="mb-1 font-medium leading-none tracking-tight">Alert Message Headline</h5>
    <div class="text-sm opacity-80">This is the subtext for your alert message, providing important information or instructions.</div>
</div>

  

    

      Copied!

Then, let’s paste that somewhere within our alert component. Thankfully, the only thing on these variants specifying color is a few classes on the outermost DIVs, so all we need to do is cut these elements down to their outermost starting DIVs, extract those classes, and set them as keys on a variable called variants, which we’ll also allow to be a prop.

To simplify things - this is what we’re after in our component.

@set('showIcon', showIcon ?? true)

@set('variants', variants ?? {
  blue: `border-transparent bg-blue-600 text-white`,
  red: `border-transparent bg-red-600 text-white`,
  green: `border-transparent bg-green-500 text-white`,
  yellow: `border-transparent bg-yellow-500 text-white`,
})

<div class="relative w-full rounded-lg border bg-white p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] text-nuetral-900 {{ showIcon ? 'pl-11' : '' }}">
    @if (showIcon)
      <svg class="w-4 h-4" xmlns="<http://www.w3.org/2000/svg>" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" x2="20" y1="19" y2="19"></line></svg>
    @endif
    <h5 class="mb-1 font-medium leading-none tracking-tight">Alert Message Headline</h5>
    <div class="text-sm opacity-70">This is the subtext for your alert message, providing important information or instructions.</div>
</div>

  

    

      Copied!
      

        

      

    

  

  

  • resources
  • views
  • components
  • alert
  • index.edge

Before we add this to our outermost DIV’s class, we’ll want to extract the variant colors for our base alert, which will serve as our default light variant. We can also add a dark variant here as well by flipping the light variant’s colors.

@set('showIcon', showIcon ?? true)

@set('variants', variants ?? {
  light: `bg-white text-neutral-900`,
  dark: `bg-black text-neutral-100`,
  blue: `border-transparent bg-blue-600 text-white`,
  red: `border-transparent bg-red-600 text-white`,
  green: `border-transparent bg-green-500 text-white`,
  yellow: `border-transparent bg-yellow-500 text-white`,
})

<div class="relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] {{ showIcon ? 'pl-11' : '' }}">
<div class="relative w-full rounded-lg border bg-white p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] text-nuetral-900 {{ showIcon ? 'pl-11' : '' }}">
    @if (showIcon)
      <svg class="w-4 h-4" xmlns="<http://www.w3.org/2000/svg>" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" x2="20" y1="19" y2="19"></line></svg>
    @endif
    <h5 class="mb-1 font-medium leading-none tracking-tight">Alert Message Headline</h5>
    <div class="text-sm opacity-70">This is the subtext for your alert message, providing important information or instructions.</div>
</div>

  

    

      Copied!
      

        

      

    

  

  

  • resources
  • views
  • components
  • alert
  • index.edge

Using Our Variant Classes

Lastly for our component, we just need to make use of the classes defined within our variants object for the specific variant we want to use for the alert.

So, let’s add a variant variable that’ll store the variant we want to use. This should also accept a variant prop, and default to light if a prop value is not provided.

@set('showIcon', showIcon ?? true)

@set('variant', variant ?? 'light')
@set('variants', variants ?? {
  light: `bg-white text-neutral-900`,
  dark: `bg-black text-neutral-100`,
  blue: `border-transparent bg-blue-600 text-white`,
  red: `border-transparent bg-red-600 text-white`,
  green: `border-transparent bg-green-500 text-white`,
  yellow: `border-transparent bg-yellow-500 text-white`,
})

<div class="relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] {{ showIcon ? 'pl-11' : '' }}">
    @if (showIcon)
      <svg class="w-4 h-4" xmlns="<http://www.w3.org/2000/svg>" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" x2="20" y1="19" y2="19"></line></svg>
    @endif
    <h5 class="mb-1 font-medium leading-none tracking-tight">Alert Message Headline</h5>
    <div class="text-sm opacity-70">This is the subtext for your alert message, providing important information or instructions.</div>
</div>

  

    

      Copied!
      

        

      

    

  

  

  • resources
  • views
  • components
  • alert
  • index.edge

Then, we’ll grab the variant property off our variants object to apply the class on our outermost DIV.

@set('showIcon', showIcon ?? true)

@set('variant', variant ?? 'light')
@set('variants', variants ?? {
  light: `bg-white text-neutral-900`,
  dark: `bg-black text-neutral-100`,
  blue: `border-transparent bg-blue-600 text-white`,
  red: `border-transparent bg-red-600 text-white`,
  green: `border-transparent bg-green-500 text-white`,
  yellow: `border-transparent bg-yellow-500 text-white`,
})

<div class="{{ variants[variant] }} relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] {{ showIcon ? 'pl-11' : '' }}">
<div class="relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] {{ showIcon ? 'pl-11' : '' }}">
    @if (showIcon)
      <svg class="w-4 h-4" xmlns="<http://www.w3.org/2000/svg>" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" x2="20" y1="19" y2="19"></line></svg>
    @endif
    <h5 class="mb-1 font-medium leading-none tracking-tight">Alert Message Headline</h5>
    <div class="text-sm opacity-70">This is the subtext for your alert message, providing important information or instructions.</div>
</div>

  

    

      Copied!
      

        

      

    

  

  

  • resources
  • views
  • components
  • alert
  • index.edge

Adding Variant Demonstration

Our alert variants are now good to go, so let’s add them to our alert demonstration page.

@layout.app({ title: request.params().name })

  <h3 class="font-bold">Base Alert</h3>
  <div x-data class="mb-8 space-x-3 space-y-3">
    @alert()
      Default, Base Alert
    @end
  </div>

  <h3 class="font-bold">Variants</h3>
  <div x-data class="mb-8 space-y-3">
    @alert({ variant: 'light' })
      Light Alert
    @end

    @alert({ variant: 'dark' })
      Dark Alert
    @end

    @alert({ variant: 'blue' })
      Blue Alert
    @end

    @alert({ variant: 'red' })
      Red Alert
    @end

    @alert({ variant: 'green' })
      Green Alert
    @end

    @alert({ variant: 'yellow' })
      Yellow Alert
    @end
  </div>

@end

  

    

      Copied!
      

        

      

    

  

  

  • resources
  • views
  • pages
  • components
  • alert.edge

Remember, we haven’t added our alert’s slots yet, so we’re not going to see the text we’re passing into our component. Instead, we’ll still see the default text we copied from the Pines UI documentation. We’ll take care of our alert’s content in the next lesson.

Join the Discussion 0 comments

Share your thoughts!
Create a free account to join in on the discussion
robot comment bubble

Be the first to comment!