Save workspace changes
This commit is contained in:
@@ -0,0 +1,56 @@
|
||||
import React from 'react'
|
||||
|
||||
const TONES = {
|
||||
sky: 'border-sky-300/20 bg-sky-300/10',
|
||||
amber: 'border-amber-300/20 bg-amber-400/10',
|
||||
white: 'border-white/10 bg-black/20',
|
||||
}
|
||||
|
||||
export default function HelpGuideCard({ item, links }) {
|
||||
const primaryHref = item.primaryLinkKey ? links[item.primaryLinkKey] : null
|
||||
const secondaryHref = item.secondaryLinkKey ? links[item.secondaryLinkKey] : null
|
||||
|
||||
return (
|
||||
<article className={`rounded-[30px] border p-5 shadow-[0_18px_50px_rgba(2,6,23,0.18)] transition hover:-translate-y-0.5 hover:border-white/20 ${TONES[item.tone] || TONES.white}`}>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-300">{item.eyebrow}</p>
|
||||
<h3 className="mt-2 text-xl font-semibold tracking-[-0.03em] text-white">{item.title}</h3>
|
||||
</div>
|
||||
<span className="rounded-full border border-white/10 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.12em] text-slate-300">
|
||||
{item.status}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p className="mt-4 text-sm leading-7 text-slate-200/90">{item.description}</p>
|
||||
|
||||
{item.plannedPath ? (
|
||||
<p className="mt-4 text-xs uppercase tracking-[0.16em] text-slate-400">Planned help route: {item.plannedPath}</p>
|
||||
) : null}
|
||||
|
||||
{Array.isArray(item.highlights) && item.highlights.length > 0 ? (
|
||||
<ul className="mt-4 space-y-2 text-sm text-slate-200/90">
|
||||
{item.highlights.map((highlight) => (
|
||||
<li key={highlight} className="flex gap-3">
|
||||
<span className="mt-2 h-2 w-2 shrink-0 rounded-full bg-white/80" />
|
||||
<span>{highlight}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : null}
|
||||
|
||||
<div className="mt-5 flex flex-wrap gap-3">
|
||||
{primaryHref ? (
|
||||
<a href={primaryHref} className="rounded-full border border-white/15 bg-white/[0.08] px-4 py-2.5 text-sm font-semibold text-white transition hover:border-white/25 hover:bg-white/[0.12]">
|
||||
{item.primaryLabel}
|
||||
</a>
|
||||
) : null}
|
||||
{secondaryHref ? (
|
||||
<a href={secondaryHref} className="rounded-full border border-white/10 px-4 py-2.5 text-sm font-semibold text-slate-200 transition hover:border-white/20 hover:bg-white/[0.05]">
|
||||
{item.secondaryLabel}
|
||||
</a>
|
||||
) : null}
|
||||
</div>
|
||||
</article>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import React from 'react'
|
||||
|
||||
export default function HelpSearchBar({ value, onChange, onSelectSuggestion, onClear, resultSummary, suggestions = [] }) {
|
||||
return (
|
||||
<div className="rounded-[30px] border border-white/10 bg-[linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.03))] p-4 shadow-[0_22px_70px_rgba(2,6,23,0.22)] md:p-5">
|
||||
<label htmlFor="help-center-search" className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-400">
|
||||
Search the help hub
|
||||
</label>
|
||||
<div className="mt-3 flex flex-col gap-3 lg:flex-row">
|
||||
<div className="relative flex-1">
|
||||
<span className="pointer-events-none absolute inset-y-0 left-4 flex items-center text-slate-500">
|
||||
<i className="fa-solid fa-magnifying-glass" />
|
||||
</span>
|
||||
<input
|
||||
id="help-center-search"
|
||||
type="search"
|
||||
value={value}
|
||||
onChange={(event) => onChange(event.target.value)}
|
||||
placeholder="Search upload image, group roles, create card, login issue..."
|
||||
className="w-full rounded-[22px] border border-white/10 bg-black/20 py-3.5 pl-11 pr-4 text-sm text-white outline-none placeholder:text-slate-500"
|
||||
/>
|
||||
</div>
|
||||
{value ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClear}
|
||||
className="rounded-[22px] border border-white/10 bg-white/[0.05] px-4 py-3 text-sm font-semibold text-white transition hover:border-white/20 hover:bg-white/[0.08]"
|
||||
>
|
||||
Clear search
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="mt-4 flex flex-wrap gap-2">
|
||||
{suggestions.map((suggestion) => (
|
||||
<button
|
||||
key={suggestion}
|
||||
type="button"
|
||||
onClick={() => onSelectSuggestion(suggestion)}
|
||||
className="rounded-full border border-white/10 bg-black/20 px-3 py-2 text-xs font-semibold uppercase tracking-[0.14em] text-slate-300 transition hover:border-white/20 hover:text-white"
|
||||
>
|
||||
{suggestion}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<p className="mt-4 text-sm text-slate-400">{resultSummary}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import React from 'react'
|
||||
|
||||
export default function HelpSupportCta({ items }) {
|
||||
return (
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
{items.map((item) => (
|
||||
<a key={item.title} href={item.href} className="rounded-[30px] border border-white/10 bg-[linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.03))] p-5 transition hover:-translate-y-0.5 hover:border-white/20">
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">{item.eyebrow}</p>
|
||||
<h3 className="mt-2 text-lg font-semibold text-white">{item.title}</h3>
|
||||
<p className="mt-3 text-sm leading-6 text-slate-300">{item.description}</p>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
import React from 'react'
|
||||
|
||||
export default function HelpTopicCard({ item, links }) {
|
||||
const primaryHref = item.primaryLinkKey ? links[item.primaryLinkKey] : null
|
||||
const secondaryHref = item.secondaryLinkKey ? links[item.secondaryLinkKey] : null
|
||||
|
||||
return (
|
||||
<article className="rounded-[28px] border border-white/10 bg-black/20 p-5 transition hover:border-white/20 hover:bg-white/[0.05]">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">{item.eyebrow}</p>
|
||||
<h3 className="mt-2 text-lg font-semibold text-white">{item.title}</h3>
|
||||
</div>
|
||||
<span className="rounded-full border border-white/10 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.12em] text-slate-400">
|
||||
{item.status}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p className="mt-3 text-sm leading-6 text-slate-300">{item.description}</p>
|
||||
|
||||
{item.plannedPath ? (
|
||||
<p className="mt-3 text-xs uppercase tracking-[0.16em] text-slate-500">Planned route: {item.plannedPath}</p>
|
||||
) : null}
|
||||
|
||||
{Array.isArray(item.tags) && item.tags.length > 0 ? (
|
||||
<div className="mt-4 flex flex-wrap gap-2">
|
||||
{item.tags.map((tag) => (
|
||||
<span key={tag} className="rounded-full border border-white/10 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.12em] text-slate-400">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="mt-5 flex flex-wrap gap-3">
|
||||
{primaryHref ? (
|
||||
<a href={primaryHref} className="rounded-full border border-sky-300/20 bg-sky-300/10 px-4 py-2.5 text-sm font-semibold text-sky-100 transition hover:border-sky-300/35 hover:bg-sky-300/15">
|
||||
{item.primaryLabel}
|
||||
</a>
|
||||
) : null}
|
||||
{secondaryHref ? (
|
||||
<a href={secondaryHref} className="rounded-full border border-white/10 px-4 py-2.5 text-sm font-semibold text-slate-200 transition hover:border-white/20 hover:bg-white/[0.05]">
|
||||
{item.secondaryLabel}
|
||||
</a>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{Array.isArray(item.linkItems) && item.linkItems.length > 0 ? (
|
||||
<div className="mt-4 flex flex-wrap gap-3">
|
||||
{item.linkItems.map((linkItem) => (
|
||||
<a key={linkItem.label} href={links[linkItem.linkKey]} className="text-sm font-semibold text-sky-200 underline underline-offset-4">
|
||||
{linkItem.label}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</article>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user