Patterns
Session Item
A row in an active-sessions / signed-in-devices list — device glyph, name with current/inactive badges, browser·OS, IP + last-seen, and a revoke button.
One row in an active-sessions / signed-in-devices list: a device glyph, the device name with current / inactive badges, a browser · OS detail line, an IP + last-seen footer, and a revoke button. Presentation only — the host maps the device type to an icon, formats the time, and owns the revoke action.
Import
import { SessionItem } from "@yuhuanowo/yunui/patterns";
Example
current shows a badge and hides the revoke button; inactive dims the row. The device icon and the relative time are host-supplied slots.
SessionItem
MacBook ProCurrent
Chrome on macOS
203.0.113.7Active now
iPhone 15
Safari on iOS
198.51.100.223h ago
Windows PCInactive
Edge on Windows
192.0.2.442d ago
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | |
| current | boolean | — | Marks the current session — shows a badge and hides the revoke button. |
| currentLabel | ReactNode | — | |
| detail | ReactNode | — | Secondary detail line, e.g. "Chrome on macOS". |
| icon | ReactNode | — | Device glyph (host maps the device type to an icon). |
| inactive | boolean | — | Dims the row and shows an "inactive" badge. |
| inactiveLabel | ReactNode | — | |
| ip | ReactNode | — | IP address (rendered after a globe glyph). |
| name* | ReactNode | — | Device name / label. |
| onRevoke | (() => void) | — | Revoke handler — when set (and not current), shows the revoke button. |
| revokeLabel | string | — | |
| revoking | boolean | — | |
| time | ReactNode | — | Host-formatted relative time (rendered after a clock glyph). |