Rust UI component for a sparkles.
use leptos::prelude::*;
use crate::components::{
extensions::sparkles::{
SparklesDescription, SparklesEffect, SparklesHeader, SparklesSection, SparklesVerticalLines,
},
icons::others::_ever_ui::LogoEverUI,
ui::headings::H3,
};
#[component]
pub fn DemoSparkles() -> impl IntoView {
view! {
<SparklesSection class="max-w-7xl bg-neutral-950">
<SparklesEffect>
<SparklesVerticalLines />
</SparklesEffect>
<SparklesHeader class="-mt-[230px]">
<LogoEverUI width=150 height=150 />
<H3 class="text-5xl text-center">Ever UI</H3>
<SparklesDescription>
Ever UI is an alternative to Shadcn UI. More components, simplified syntax, and
components... really composable.
</SparklesDescription>
</SparklesHeader>
</SparklesSection>
}
}
use leptos::prelude::*;
use crate::components::{
extensions::sparkles::{
SparklesColor, SparklesDescription, SparklesDirection, SparklesEffect, SparklesHeader,
SparklesSection, SparklesVerticalLines,
},
icons::others::_evermint::LogoEverMint,
ui::headings::H3,
};
#[component]
pub fn DemoSparklesBottom() -> impl IntoView {
view! {
<SparklesSection class="max-w-7xl bg-neutral-950">
<SparklesHeader class="pt-10">
<LogoEverMint width=110 height=110 />
<H3 class="text-4xl">EVERMINT</H3>
</SparklesHeader>
<SparklesEffect
class="-mt-32"
direction=SparklesDirection::Bottom
color=SparklesColor::Green
>
<SparklesVerticalLines />
</SparklesEffect>
<SparklesDescription class="-mt-32">
Qui commodo sint elit do officia duis laborum enim nisi. Nisi veniam cupidatat
commodo consectetur commodo excepteur mollit sit laborum.
</SparklesDescription>
</SparklesSection>
}
}
use leptos::prelude::*;
use crate::components::{
extensions::sparkles::{
SparklesColor, SparklesDescription, SparklesEffect, SparklesHeader, SparklesSection, SparklesSize,
},
icons::others::_ferris::LogoFerris,
ui::headings::H3,
};
#[component]
pub fn DemoSparklesRounded() -> impl IntoView {
view! {
<SparklesSection class="max-w-7xl bg-neutral-950">
<SparklesEffect color=SparklesColor::Orange size=SparklesSize::Rounded>
<div />
</SparklesEffect>
<SparklesHeader class="-mt-36">
<LogoFerris width=90 height=90 />
<H3 class="text-4xl text-center">RUST UI</H3>
<SparklesDescription>
{"Building Rust UI, a blazzingly fast UI library for fullstack Rust applications. Stay tuned :)"}
</SparklesDescription>
</SparklesHeader>
</SparklesSection>
}
}
# cargo install ui-cli --forceui add demo_sparklesui add sparklescomponents/ui/sparkles.rs
use leptos::prelude::*;
use tw_merge::*;
#[derive(TwClass, Clone, Copy)]
#[tw(
class = "relative h-80 w-full overflow-hidden [mask-image:radial-gradient(50%_50%,white,transparent)] before:absolute before:inset-0 before:opacity-80 after:absolute after:border-b after:border-2 after:border-input after:bg-neutral-300 dark:after:bg-neutral-900 after:-left-1/2 after:w-[200%]"
)]
pub struct SparklesClass {
pub direction: SparklesDirection,
pub color: SparklesColor,
pub size: SparklesSize,
}
#[derive(TwVariant)]
pub enum SparklesDirection {
#[tw(default, class = "after:top-1/2 after:rounded-[50%]")]
Top,
#[tw(class = "after:bottom-1/2 after:rounded-[100%]")]
Bottom,
}
#[derive(TwVariant)]
pub enum SparklesColor {
#[tw(
default,
class = "before:bg-[radial-gradient(circle_at_bottom_center,#9C9DA1,transparent_90%)]"
)]
Gray,
#[tw(class = "before:bg-[radial-gradient(circle_at_bottom_center,#369eff,transparent_90%)]")]
Sky,
#[tw(class = "before:bg-[radial-gradient(circle_at_bottom_center,#36b36f,transparent_90%)]")]
Green,
#[tw(class = "before:bg-[radial-gradient(circle_at_bottom_center,#e07b39,transparent_90%)]")]
Orange,
}
#[derive(TwVariant)]
pub enum SparklesSize {
#[tw(default, class = "after:aspect-[1/0.8]")]
Normal,
#[tw(class = "after:aspect-[1/1.8]")]
Rounded,
}
#[component]
pub fn SparklesEffect(
#[prop(into, optional)] direction: Signal<SparklesDirection>,
#[prop(into, optional)] color: Signal<SparklesColor>,
#[prop(into, optional)] size: Signal<SparklesSize>,
#[prop(into, optional)] class: Signal<String>,
children: Children,
) -> impl IntoView {
let class = Memo::new(move |_| {
let direction = direction.get();
let color = color.get();
let size = size.get();
let sparkles = SparklesClass {
direction,
color,
size,
};
sparkles.with_class(class.get())
});
view! { <div class=class>{children()}</div> }
}
/*´:°•.°+.*•´.*:˚.°*.˚•´.°:°•.°•.*•´.*:˚.°*.˚•´.°:°•.°+.*•´.*:*/
/* ✨ FUNCTIONS ✨ */
/*.•°:°.´+˚.*°.˚:*.´•*.+°.•°:´*.´•*.•°.•°:°.´:•˚°.*°.˚:*.´+°.•*/
#[component]
pub fn SparklesSection(#[prop(into, optional)] class: Signal<String>, children: Children) -> impl IntoView {
let class = Memo::new(move |_| tw_merge!("min-h-[500px] w-full overflow-hidden mx-auto", class()));
view! { <div class=class>{children()}</div> }
}
#[component]
pub fn SparklesHeader(#[prop(into, optional)] class: Signal<String>, children: Children) -> impl IntoView {
let class = Memo::new(move |_| {
tw_merge!(
"mx-auto w-full max-w-2xl relative z-10 flex flex-col gap-4 items-center justify-center",
class()
)
});
view! { <div class=class>{children()}</div> }
}
#[component]
pub fn SparklesVerticalLines(#[prop(into, optional)] class: Signal<String>) -> impl IntoView {
let class = Memo::new(move |_| {
tw_merge!("absolute bottom-0 left-0 right-0 top-0 bg-[linear-gradient(to_right,#ffffff2c_1px,transparent_1px),linear-gradient(to_bottom,#3a3a3a01_1px,transparent_1px)] bg-[size:70px_80px]", class())
});
view! { <div class=class /> }
}
#[component]
pub fn SparklesDescription(
#[prop(into, optional)] class: Signal<String>,
children: Children,
) -> impl IntoView {
let class = Memo::new(move |_| {
tw_merge!(
"w-full max-w-[350px] mx-auto block text-center text-pretty",
class()
)
});
view! { <div class=class>{children()}</div> }
}
// Coming soon 🦀
use leptos::prelude::*;
use crate::components::{
extensions::sparkles::{
SparklesDescription, SparklesEffect, SparklesHeader, SparklesSection, SparklesVerticalLines,
},
icons::others::_ever_ui::LogoEverUI,
ui::headings::H3,
};
#[component]
pub fn DemoSparkles() -> impl IntoView {
view! {
<SparklesSection class="max-w-7xl bg-neutral-950">
<SparklesEffect>
<SparklesVerticalLines />
</SparklesEffect>
<SparklesHeader class="-mt-[230px]">
<LogoEverUI width=150 height=150 />
<H3 class="text-5xl text-center">Ever UI</H3>
<SparklesDescription>
Ever UI is an alternative to Shadcn UI. More components, simplified syntax, and
components... really composable.
</SparklesDescription>
</SparklesHeader>
</SparklesSection>
}
}
use leptos::prelude::*;
use crate::components::{
extensions::sparkles::{
SparklesColor, SparklesDescription, SparklesDirection, SparklesEffect, SparklesHeader,
SparklesSection, SparklesVerticalLines,
},
icons::others::_evermint::LogoEverMint,
ui::headings::H3,
};
#[component]
pub fn DemoSparklesBottom() -> impl IntoView {
view! {
<SparklesSection class="max-w-7xl bg-neutral-950">
<SparklesHeader class="pt-10">
<LogoEverMint width=110 height=110 />
<H3 class="text-4xl">EVERMINT</H3>
</SparklesHeader>
<SparklesEffect
class="-mt-32"
direction=SparklesDirection::Bottom
color=SparklesColor::Green
>
<SparklesVerticalLines />
</SparklesEffect>
<SparklesDescription class="-mt-32">
Qui commodo sint elit do officia duis laborum enim nisi. Nisi veniam cupidatat
commodo consectetur commodo excepteur mollit sit laborum.
</SparklesDescription>
</SparklesSection>
}
}
use leptos::prelude::*;
use crate::components::{
extensions::sparkles::{
SparklesColor, SparklesDescription, SparklesEffect, SparklesHeader, SparklesSection, SparklesSize,
},
icons::others::_ferris::LogoFerris,
ui::headings::H3,
};
#[component]
pub fn DemoSparklesRounded() -> impl IntoView {
view! {
<SparklesSection class="max-w-7xl bg-neutral-950">
<SparklesEffect color=SparklesColor::Orange size=SparklesSize::Rounded>
<div />
</SparklesEffect>
<SparklesHeader class="-mt-36">
<LogoFerris width=90 height=90 />
<H3 class="text-4xl text-center">RUST UI</H3>
<SparklesDescription>
{"Building Rust UI, a blazzingly fast UI library for fullstack Rust applications. Stay tuned :)"}
</SparklesDescription>
</SparklesHeader>
</SparklesSection>
}
}
# cargo install ui-cli --forceui add demo_sparklesui add sparklescomponents/ui/sparkles.rs
use leptos::prelude::*;
use tw_merge::*;
#[derive(TwClass, Clone, Copy)]
#[tw(
class = "relative h-80 w-full overflow-hidden [mask-image:radial-gradient(50%_50%,white,transparent)] before:absolute before:inset-0 before:opacity-80 after:absolute after:border-b after:border-2 after:border-input after:bg-neutral-300 dark:after:bg-neutral-900 after:-left-1/2 after:w-[200%]"
)]
pub struct SparklesClass {
pub direction: SparklesDirection,
pub color: SparklesColor,
pub size: SparklesSize,
}
#[derive(TwVariant)]
pub enum SparklesDirection {
#[tw(default, class = "after:top-1/2 after:rounded-[50%]")]
Top,
#[tw(class = "after:bottom-1/2 after:rounded-[100%]")]
Bottom,
}
#[derive(TwVariant)]
pub enum SparklesColor {
#[tw(
default,
class = "before:bg-[radial-gradient(circle_at_bottom_center,#9C9DA1,transparent_90%)]"
)]
Gray,
#[tw(class = "before:bg-[radial-gradient(circle_at_bottom_center,#369eff,transparent_90%)]")]
Sky,
#[tw(class = "before:bg-[radial-gradient(circle_at_bottom_center,#36b36f,transparent_90%)]")]
Green,
#[tw(class = "before:bg-[radial-gradient(circle_at_bottom_center,#e07b39,transparent_90%)]")]
Orange,
}
#[derive(TwVariant)]
pub enum SparklesSize {
#[tw(default, class = "after:aspect-[1/0.8]")]
Normal,
#[tw(class = "after:aspect-[1/1.8]")]
Rounded,
}
#[component]
pub fn SparklesEffect(
#[prop(into, optional)] direction: Signal<SparklesDirection>,
#[prop(into, optional)] color: Signal<SparklesColor>,
#[prop(into, optional)] size: Signal<SparklesSize>,
#[prop(into, optional)] class: Signal<String>,
children: Children,
) -> impl IntoView {
let class = Memo::new(move |_| {
let direction = direction.get();
let color = color.get();
let size = size.get();
let sparkles = SparklesClass {
direction,
color,
size,
};
sparkles.with_class(class.get())
});
view! { <div class=class>{children()}</div> }
}
/*´:°•.°+.*•´.*:˚.°*.˚•´.°:°•.°•.*•´.*:˚.°*.˚•´.°:°•.°+.*•´.*:*/
/* ✨ FUNCTIONS ✨ */
/*.•°:°.´+˚.*°.˚:*.´•*.+°.•°:´*.´•*.•°.•°:°.´:•˚°.*°.˚:*.´+°.•*/
#[component]
pub fn SparklesSection(#[prop(into, optional)] class: Signal<String>, children: Children) -> impl IntoView {
let class = Memo::new(move |_| tw_merge!("min-h-[500px] w-full overflow-hidden mx-auto", class()));
view! { <div class=class>{children()}</div> }
}
#[component]
pub fn SparklesHeader(#[prop(into, optional)] class: Signal<String>, children: Children) -> impl IntoView {
let class = Memo::new(move |_| {
tw_merge!(
"mx-auto w-full max-w-2xl relative z-10 flex flex-col gap-4 items-center justify-center",
class()
)
});
view! { <div class=class>{children()}</div> }
}
#[component]
pub fn SparklesVerticalLines(#[prop(into, optional)] class: Signal<String>) -> impl IntoView {
let class = Memo::new(move |_| {
tw_merge!("absolute bottom-0 left-0 right-0 top-0 bg-[linear-gradient(to_right,#ffffff2c_1px,transparent_1px),linear-gradient(to_bottom,#3a3a3a01_1px,transparent_1px)] bg-[size:70px_80px]", class())
});
view! { <div class=class /> }
}
#[component]
pub fn SparklesDescription(
#[prop(into, optional)] class: Signal<String>,
children: Children,
) -> impl IntoView {
let class = Memo::new(move |_| {
tw_merge!(
"w-full max-w-[350px] mx-auto block text-center text-pretty",
class()
)
});
view! { <div class=class>{children()}</div> }
}
// Coming soon 🦀