Text Swiping

use leptos::prelude::*;

use crate::components::extensions::text_swiping::{TextSwiping, TextSwipingList, TextSwipingSpan};

#[component]
pub fn DemoTextSwiping() -> impl IntoView {
    view! {
        <style>
            "@keyframes text_swiping {
                0%, 16% {
                    transform: translateY(0%);
                }
                20%, 36% {
                    transform: translateY(-16.66%);
                }
                40%, 56% {
                    transform: translateY(-33.33%);
                }
                60%, 76% {
                    transform: translateY(-50%);
                }
                80%, 96% {
                    transform: translateY(-66.66%);
                }
                100% {
                    transform: translateY(-83.33%);
                }
            }
            .animate-text_swiping {
                animation: text_swiping 12.5s cubic-bezier(0.83, 0, 0.17, 1) infinite;
            }"
        </style>

        <div class="relative antialiased font-inter">

            <div class="flex overflow-hidden relative flex-col justify-center bg-card">
                <div class="py-24 px-4 mx-auto w-full max-w-6xl md:px-6">
                    <div class="text-center">

                        <TextSwiping>
                            "Trusted by the most innovative minds in "<TextSwipingSpan>
                                <TextSwipingList>
                                    <li>"Finance"</li>
                                    <li>"Tech"</li>
                                    <li>"AI"</li>
                                    <li>"Crypto"</li>
                                    <li>"eCommerce"</li>
                                    <li aria-hidden="true">"Finance"</li>
                                </TextSwipingList>
                            </TextSwipingSpan>
                        </TextSwiping>

                    </div>

                </div>
            </div>

        </div>
    }
}