@opexa/portal-components 0.0.158 → 0.0.159

package/dist/components/NewsFeed/News.d.ts

@@ -0,0 +1,6 @@
+import type { News } from '../../types';
+export interface NewsProps {
+    news: News;
+    viewDetailsUrl: string;
+}
+export declare function News({ news, viewDetailsUrl }: NewsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/NewsFeed/News.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import Link from 'next/link';
+import { Button } from '../../ui/Button/index.js';
+export function News({ news, viewDetailsUrl }) {
+    return (_jsxs("div", { className: "bg-bg-primary-alt border-border-primary flex flex-col overflow-hidden rounded-2xl border shadow-md", children: [_jsx(Image, { src: news.image, alt: "", width: 400, height: 274, loading: "lazy", unoptimized: true, className: "block h-[15.25rem] w-full object-cover" }), _jsxs("div", { className: "flex grow flex-col p-3xl", children: [_jsxs("div", { className: "grow", children: [_jsx("p", { className: "text-brand-400 text-sm font-semibold", children: news.category }), _jsx("h2", { className: "mt-2 line-clamp-1 text-lg font-semibold", children: news.title }), _jsx("p", { className: "text-text-tertiary-600 mt-xs line-clamp-3", dangerouslySetInnerHTML: {
+                                    __html: news.content,
+                                } })] }), _jsx(Button, { asChild: true, className: "mt-2xl", children: _jsx(Link, { href: `${viewDetailsUrl}/${news.id}`, "aria-label": `Read more about ${news.title}`, children: "Read More" }) })] })] }, news.id));
+}

package/dist/components/NewsFeed/NewsFeedCarousel.d.ts

@@ -1,8 +1,8 @@
 import { type CSSProperties } from 'react';
-import type { News } from '../../types';
+import type { News as TNews } from '../../types';
 export interface NewsFeedCarouselProps {
     layout: 'carousel';
-    newsFeed: News[];
+    newsFeed: TNews[];
     /** @default 'News' */
     heading?: string;
     /** @default '/news' */

package/dist/components/NewsFeed/NewsFeedCarousel.js

@@ -1,7 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import useEmblaCarousel, {} from 'embla-carousel-react';
-import Image from 'next/image';
 import Link from 'next/link';
 import { useCallback, useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
@@ -11,6 +10,7 @@ import { ChevronRightIcon } from '../../icons/ChevronRightIcon.js';
 import { Tv03Icon } from '../../icons/Tv03Icon.js';
 import { Button } from '../../ui/Button/index.js';
 import { Empty } from '../shared/Empty.js';
+import { News } from './News.js';
 export function NewsFeedCarousel(props) {
     const empty = props.newsFeed.length <= 0;
     const heading = props.heading ?? 'News';
@@ -41,7 +41,5 @@ export function NewsFeedCarousel(props) {
         onSelect(emblaApi);
         emblaApi.on('reInit', onSelect).on('select', onSelect);
     }, [emblaApi, onSelect]);
-    return (_jsxs("div", { style: props.style, className: props.className, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "text-lg font-semibold", children: heading }), _jsx("div", { className: "grow" }), _jsxs("div", { className: "flex items-center justify-center gap-xl", children: [_jsxs(Link, { href: viewAllUrl, className: "text-button-tertiary-fg flex gap-sm text-sm font-semibold", children: ["See All", _jsx(ChevronRightIcon, { className: "size-5 lg:hidden" })] }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", onClick: onPrevButtonClick, disabled: prevBtnDisabled, "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-l-none", onClick: onNextButtonClick, disabled: nextBtnDisabled, "aria-label": "Next", children: _jsx(ArrowRightIcon, { className: "size-5" }) })] })] })] }), empty && (_jsx(Empty, { icon: Tv03Icon, title: "No News", message: "No news is currently available.", className: "mt-8" })), !empty && (_jsx(_Fragment, { children: _jsx("div", { ref: emblaRef, className: "relative mt-lg lg:overflow-hidden", children: _jsx("div", { className: twMerge('grid auto-cols-[100%] grid-flow-col gap-1.5 lg:auto-cols-[calc((100%-(1.25rem*2))/3)] lg:gap-2xl'), children: props.newsFeed.map((news) => (_jsxs("div", { className: "bg-bg-primary-alt border-border-primary flex flex-col overflow-hidden rounded-2xl border shadow-md", children: [_jsx(Image, { src: news.image, alt: "", width: 400, height: 274, loading: "lazy", unoptimized: true, className: "block h-[15.25rem] w-full object-cover" }), _jsxs("div", { className: "flex grow flex-col p-3xl", children: [_jsxs("div", { className: "grow", children: [_jsx("p", { className: "text-brand-400 text-sm font-semibold", children: news.category }), _jsx("h2", { className: "mt-2 line-clamp-1 text-lg font-semibold", children: news.title }), _jsx("p", { className: "text-text-tertiary-600 mt-xs line-clamp-3", dangerouslySetInnerHTML: {
-                                                        __html: news.content,
-                                                    } })] }), _jsx(Button, { asChild: true, className: "mt-2xl", children: _jsx(Link, { href: `${viewDetailsUrl}/${news.id}`, children: "Read More" }) })] })] }, news.id))) }) }) }))] }));
+    return (_jsxs("div", { style: props.style, className: props.className, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "text-lg font-semibold", children: heading }), _jsx("div", { className: "grow" }), _jsxs("div", { className: "flex items-center justify-center gap-xl", children: [_jsxs(Link, { href: viewAllUrl, className: "text-button-tertiary-fg flex gap-sm text-sm font-semibold", children: ["See All", _jsx(ChevronRightIcon, { className: "size-5 lg:hidden" })] }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", onClick: onPrevButtonClick, disabled: prevBtnDisabled, "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-l-none", onClick: onNextButtonClick, disabled: nextBtnDisabled, "aria-label": "Next", children: _jsx(ArrowRightIcon, { className: "size-5" }) })] })] })] }), empty && (_jsx(Empty, { icon: Tv03Icon, title: "No News", message: "No news is currently available.", className: "mt-8" })), !empty && (_jsx(_Fragment, { children: _jsx("div", { ref: emblaRef, className: "relative mt-lg lg:overflow-hidden", children: _jsx("div", { className: twMerge('grid auto-cols-[100%] grid-flow-col gap-1.5 lg:auto-cols-[calc((100%-(1.25rem*2))/3)] lg:gap-2xl'), children: props.newsFeed.map((news) => (_jsx(News, { news: news, viewDetailsUrl: viewDetailsUrl }, news.id))) }) }) }))] }));
 }

package/dist/components/NewsFeed/NewsFeedList.d.ts

@@ -1,8 +1,8 @@
 import type { CSSProperties } from 'react';
-import type { News } from '../../types';
+import type { News as TNews } from '../../types';
 export interface NewsFeedListProps {
     layout: 'list';
-    newsFeed: News[];
+    newsFeed: TNews[];
     /** @default 'News' */
     heading?: string;
     /**

package/dist/components/NewsFeed/NewsFeedList.js

@@ -1,14 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Image from 'next/image';
-import Link from 'next/link';
 import { Tv03Icon } from '../../icons/Tv03Icon.js';
-import { Button } from '../../ui/Button/index.js';
 import { Empty } from '../shared/Empty.js';
+import { News } from './News.js';
 export function NewsFeedList(props) {
     const empty = props.newsFeed.length <= 0;
     const heading = props.heading ?? 'News';
     const viewDetailsUrl = props.viewDetailsUrl ?? '/news';
-    return (_jsxs("div", { style: props.style, className: props.className, children: [_jsx("h2", { className: "text-lg font-semibold", children: heading }), empty && (_jsx(Empty, { icon: Tv03Icon, title: "No News", message: "No news is currently available.", className: "mt-8" })), !empty && (_jsx("div", { className: "mt-lg grid gap-3xl lg:grid-cols-3 lg:gap-2xl", children: props.newsFeed.map((news) => (_jsxs("div", { className: "bg-bg-primary-alt border-border-primary flex flex-col overflow-hidden rounded-2xl border shadow-md", children: [_jsx(Image, { src: news.image, alt: "", width: 400, height: 274, className: "block h-[15.25rem] w-full object-cover" }), _jsxs("div", { className: "flex grow flex-col p-3xl", children: [_jsxs("div", { className: "grow", children: [_jsx("p", { className: "text-brand-400 text-sm font-semibold", children: news.category }), _jsx("h2", { className: "mt-2 line-clamp-1 text-lg font-semibold", children: news.title }), _jsx("p", { className: "text-text-tertiary-600 mt-xs line-clamp-3", dangerouslySetInnerHTML: {
-                                                __html: news.content,
-                                            } })] }), _jsx(Button, { asChild: true, className: "mt-2xl", children: _jsx(Link, { href: `${viewDetailsUrl}/${news.id}`, children: "Read More" }) })] })] }, news.id))) }))] }));
+    return (_jsxs("div", { style: props.style, className: props.className, children: [_jsx("h2", { className: "text-lg font-semibold", children: heading }), empty && (_jsx(Empty, { icon: Tv03Icon, title: "No News", message: "No news is currently available.", className: "mt-8" })), !empty && (_jsx("div", { className: "mt-lg grid gap-3xl lg:grid-cols-3 lg:gap-2xl", children: props.newsFeed.map((news) => (_jsx(News, { news: news, viewDetailsUrl: viewDetailsUrl }, news.id))) }))] }));
 }

package/dist/components/Promos/Cashback.js

@@ -14,5 +14,5 @@ export function Cashback({ data, viewDetailsUrl }) {
     return (_jsxs("div", { className: "border-border-secondary bg-accent-50 bg-bg-primary-alt relative flex h-full flex-col overflow-hidden rounded-2xl border", children: [data.banner.url && (_jsx(Image, { src: data.banner.url, alt: data.name, width: 400, height: 202, loading: "lazy", unoptimized: true, className: "block aspect-[365/180] w-full object-cover" })), _jsxs("div", { className: "flex flex-grow flex-col px-4 pb-3xl pt-2xl", children: [_jsx("div", { className: "w-full grow text-center text-xl font-semibold", children: data.name }), _jsxs("div", { className: "mt-auto flex flex-col gap-3 pt-4 lg:flex-row", children: [claimable && (_jsx(Button, { size: "sm", onClick: () => {
                                     globalStore.depositWithdrawal.setOpen(true);
                                     globalStore.depositWithdrawal.setPromo(data.id);
-                                }, children: "Get bonus" })), _jsx(Button, { size: "sm", variant: "outline", asChild: true, children: _jsx(Link, { href: `${viewDetailsUrl}/${data.id}`, children: "Read more" }) })] })] })] }));
+                                }, children: "Get bonus" })), _jsx(Button, { size: "sm", variant: "outline", asChild: true, children: _jsx(Link, { href: `${viewDetailsUrl}/${data.id}`, "aria-label": `Read more about ${data.name}`, children: "Read more" }) })] })] })] }));
 }

package/dist/components/Promos/CustomPromo.js

@@ -3,5 +3,5 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { Button } from '../../ui/Button/index.js';
 export function CustomPromo({ data, viewDetailsUrl }) {
-    return (_jsxs("div", { className: "border-border-secondary bg-accent-50 bg-bg-primary-alt relative flex h-full flex-col overflow-hidden rounded-2xl border", children: [_jsx(Image, { src: data.banner, alt: data.name, width: 400, height: 202, loading: "lazy", unoptimized: true, className: "block aspect-[365/180] w-full object-cover" }), _jsxs("div", { className: "flex flex-grow flex-col px-4 pb-3xl pt-2xl", children: [_jsx("div", { className: "w-full grow text-center text-xl font-semibold", children: data.name }), _jsx("div", { className: "mt-auto flex flex-col gap-3 pt-4 lg:flex-row", children: _jsx(Button, { size: "sm", variant: "outline", asChild: true, children: _jsx(Link, { href: `${viewDetailsUrl}/${data.id}`, children: "Read more" }) }) })] })] }));
+    return (_jsxs("div", { className: "border-border-secondary bg-accent-50 bg-bg-primary-alt relative flex h-full flex-col overflow-hidden rounded-2xl border", children: [_jsx(Image, { src: data.banner, alt: data.name, width: 400, height: 202, loading: "lazy", unoptimized: true, className: "block aspect-[365/180] w-full object-cover" }), _jsxs("div", { className: "flex flex-grow flex-col px-4 pb-3xl pt-2xl", children: [_jsx("div", { className: "w-full grow text-center text-xl font-semibold", children: data.name }), _jsx("div", { className: "mt-auto flex flex-col gap-3 pt-4 lg:flex-row", children: _jsx(Button, { size: "sm", variant: "outline", asChild: true, children: _jsx(Link, { href: `${viewDetailsUrl}/${data.id}`, "aria-label": `Read more about ${data.name}`, children: "Read more" }) }) })] })] }));
 }

package/dist/components/Promos/Promo.js

@@ -14,5 +14,5 @@ export function Promo({ data, viewDetailsUrl }) {
     return (_jsxs("div", { className: "border-border-secondary bg-accent-50 bg-bg-primary-alt relative flex h-full flex-col overflow-hidden rounded-2xl border", children: [data.banner.url && (_jsx(Image, { src: data.banner.url, alt: data.name, width: 400, height: 202, loading: "lazy", unoptimized: true, className: "block aspect-[365/180] w-full object-cover" })), _jsxs("div", { className: "flex flex-grow flex-col px-4 pb-3xl pt-2xl", children: [_jsx("div", { className: "w-full grow text-center text-xl font-semibold", children: data.name }), _jsxs("div", { className: "mt-auto flex flex-col gap-3 pt-4 lg:flex-row", children: [claimable && (_jsx(Button, { size: "sm", onClick: () => {
                                     globalStore.depositWithdrawal.setOpen(true);
                                     globalStore.depositWithdrawal.setPromo(data.id);
-                                }, children: "Get bonus" })), _jsx(Button, { size: "sm", variant: "outline", asChild: true, children: _jsx(Link, { href: `${viewDetailsUrl}/${data.id}`, children: "Read more" }) })] })] })] }));
+                                }, children: "Get bonus" })), _jsx(Button, { size: "sm", variant: "outline", asChild: true, children: _jsx(Link, { href: `${viewDetailsUrl}/${data.id}`, "aria-label": `Read more about ${data.name}`, children: "Read more" }) })] })] })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opexa/portal-components",
-  "version": "0.0.158",
+  "version": "0.0.159",
   "exports": {
     "./ui/*": {
       "types": "./dist/ui/*/index.d.ts",