Selin Aydar
4.6(18 reviews)
Porto, PT
820 miles away
$142
avg. daily rate
Recently active — Available
A candidate/freelancer card: avatar with verified badge, star rating or new label, a location/rate split, and toggleable wishlist and invite actions that track their own state. Ideal for talent marketplaces and staffing grids.
The import and the props worth knowing about, in one place.
import { TalentCard } from "@/components/beste/component/talent-card";
<TalentCard
name="Selin Aydar"
verified
rating={4.6}
reviews={18}
location="Porto, PT"
distance="820 miles away"
rate="$142"
availability="Recently active — Available"
onWishlist={(saved) => console.log("wishlist:", saved)}
onInvite={(invited) => console.log("invite:", invited)}
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
Selin Aydar
4.6(18 reviews)
Porto, PT
820 miles away
$142
avg. daily rate
Recently active — Available
import { TalentCard } from "@/components/beste/component/talent-card";
<TalentCard
name="Selin Aydar"
avatar="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=128&auto=format&fit=crop"
verified
location="Porto, PT"
distance="820 miles away"
rate="$142"
availability="Recently active — Available"
/>Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| The heart | Toggles the shortlist and calls `onWishlist` with what it became — the card keeps the state so the page does not have to. |
|---|---|
| The invite button | Flips between inviting and invited, and calls `onInvite`. |
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
name* | string | — | |
avatar | string | — | |
verified | boolean | — | |
rating | number | — | Average rating; omit to show the "New" label instead |
reviews | number | — | |
location* | string | — | |
distance* | string | — | |
rate* | string | — | |
availability | string | — | Muted availability line under the actions |
defaultWishlisted | boolean | — | |
defaultInvited | boolean | — | |
onWishlist | (next: boolean) => void | — | |
onInvite | (next: boolean) => void | — | |
className | string | — |
Topbar account menu: avatar trigger with name and email, dropdown with icon items, keyboard shortcuts, and a destructive sign-out row. Compact avatar-only mode for dense headers.
| Actions | ||||||
|---|---|---|---|---|---|---|
A Amara Okaforamara@northwind.io | Scale | Active | $4,820 | Jan 4, 2026 | ||
D Diego Santosdiego@lumen.app | Starter | Trial | $0 | Feb 18, 2026 | ||
P Priya Nairpriya@vertex.co | Growth | Active | $2,140 | Nov 22, 2025 | ||
T Tom Fischertom@basecamp.dev | Starter | Churned | $380 | Aug 9, 2025 | ||
L Lena Björklena@aurora.se | Scale | Active | $6,390 | Mar 2, 2026 | ||
M Marcus Reedmarcus@hexa.io | Starter | Trial | $0 | Feb 27, 2026 |
8 row(s)
Client-side data-table engine: column-driven config with custom cell renderers, sortable headers, keyword search, row selection, per-row action menus, and pagination. Owns all state; blocks pass columns + rows as data.
A month grid with selectable days, a today marker, colored event dots per day, and prev/next month controls. Data-driven (weekStart + daysInMonth) so it renders deterministically; controlled or self-managed selection.
Dashboard sidebar with a brand header, grouped nav items, Lucide icons, trailing count badges, and an active state. Collapse is driven from the shell topbar via the `collapsed` prop (icon rail when true).