2 lines
3.8 KiB
JavaScript
2 lines
3.8 KiB
JavaScript
import{j as r}from"./chunk-UIGDSWPH-BhuNDbxn.js";import{C as i}from"./ComponentCard-C2b5w2__.js";import{P as b}from"./main-af3pcbZa.js";const a=({children:d,text:t,variant:o="rounded",position:u="top-left",color:e="primary",className:n=""})=>{const s={primary:"bg-brand-500",success:"bg-success-500",error:"bg-error-500",warning:"bg-warning-500"},l=()=>{if(o==="rounded")return r.jsx("span",{className:`absolute -left-px mt-3 inline-block rounded-r-full ${s[e]} px-4 py-1.5 text-sm font-medium text-white`,children:t});if(o==="filled")return r.jsx("span",{className:`absolute -left-9 -top-7 mt-3 flex h-14 w-24 -rotate-45 items-end justify-center ${s[e]} px-4 py-1.5 text-sm font-medium text-white shadow-theme-xs`,children:t});const c={primary:"before:border-l-brand-500 before:border-t-brand-500 after:border-b-brand-500 after:border-l-brand-500",success:"before:border-l-success-500 before:border-t-success-500 after:border-b-success-500 after:border-l-success-500",error:"before:border-l-error-500 before:border-t-error-500 after:border-b-error-500 after:border-l-error-500",warning:"before:border-l-warning-500 before:border-t-warning-500 after:border-b-warning-500 after:border-l-warning-500"};return r.jsx("span",{className:`absolute -left-px mt-3 inline-block ${s[e]} px-4 py-1.5 text-sm font-medium text-white before:absolute before:-right-4 before:top-0 before:border-[13px] before:border-transparent before:content-[''] after:absolute after:-right-4 after:bottom-0 after:border-[13px] after:border-transparent after:content-[''] ${c[e]}`,children:t})};return r.jsxs("div",{className:`relative overflow-hidden ${n}`,children:[l(),d]})};function f(){return r.jsxs(r.Fragment,{children:[r.jsx(b,{title:"React.js Ribbons Dashboard | TailAdmin - React.js Admin Dashboard Template",description:"This is React.js Ribbons Dashboard page for TailAdmin - React.js Tailwind CSS Admin Dashboard Template"}),r.jsxs("div",{className:"grid grid-cols-1 gap-5 sm:gap-6 lg:grid-cols-2",children:[r.jsx(i,{title:"Rounded Ribbon",children:r.jsx(a,{text:"Popular",variant:"rounded",color:"primary",children:r.jsx("div",{className:"rounded-xl border border-gray-200 dark:border-gray-800 dark:bg-white/[0.03]",children:r.jsx("div",{className:"p-5 pt-16",children:r.jsx("p",{className:"text-sm text-gray-500 dark:text-gray-400",children:"Lorem ipsum dolor sit amet consectetur. Eget nulla suscipit arcu rutrum amet vel nec fringilla vulputate. Sed aliquam fringilla vulputate imperdiet arcu natoque purus ac nec ultricies nulla ultrices."})})})})}),r.jsx(i,{title:"Filled Ribbon",children:r.jsx(a,{text:"New",variant:"filled",color:"primary",children:r.jsx("div",{className:"rounded-xl border border-gray-200 dark:border-gray-800 dark:bg-white/[0.03]",children:r.jsx("div",{className:"p-5 pt-16",children:r.jsx("p",{className:"text-sm text-gray-500 dark:text-gray-400",children:"Lorem ipsum dolor sit amet consectetur. Eget nulla suscipit arcu rutrum amet vel nec fringilla vulputate. Sed aliquam fringilla vulputate imperdiet arcu natoque purus ac nec ultricies nulla ultrices."})})})})}),r.jsx(i,{title:"Ribbon with Different Colors",children:r.jsxs("div",{className:"space-y-4",children:[r.jsx(a,{text:"Success",variant:"rounded",color:"success",children:r.jsx("div",{className:"rounded-xl border border-gray-200 dark:border-gray-800 dark:bg-white/[0.03]",children:r.jsx("div",{className:"p-5 pt-16",children:r.jsx("p",{className:"text-sm text-gray-500 dark:text-gray-400",children:"Success ribbon example."})})})}),r.jsx(a,{text:"Warning",variant:"rounded",color:"warning",children:r.jsx("div",{className:"rounded-xl border border-gray-200 dark:border-gray-800 dark:bg-white/[0.03]",children:r.jsx("div",{className:"p-5 pt-16",children:r.jsx("p",{className:"text-sm text-gray-500 dark:text-gray-400",children:"Warning ribbon example."})})})})]})})]})]})}export{f as default};
|