Feeds

Direct

NetWire_Seed: d869db7fe62fb07c25a0403ecaea55031744b5fb

What's this? A fake Slack or Discord type of app inspired by Cyberpunk 2077. This app is static, eg. not implementing much logic. The goal is: showcasing a start of a UI kit. If you've played the game, you' might be able to pick-up some similarities with the in-game menus.

); } function NavSection({ children, renderTitle }) { return (

{renderTitle({ className: "nav-section__title" })}

{children}

); } function FeedMessage({ message }) { return (

{ "I got a gig lined up in Watson, no biggie. If you prove useful, expect more side gigs coming your way. I need a half-decent netrunner. Hit me up, provide credentials, eddies on completion." }

V. M. Vargas {" - 11:04pm"}

); } function ChannelNav({ activeChannel = null, channels = [] }) { return (

{name}

); } function ConversationNav({ activeConversation = null, conversations = [] }) { return (

); } function ChannelLink({ icon, name, unread }) { return ( 0 ? "conversation-link--unread" : "" }`} > # {name} {unread > 0 && ( {unread} )} ); } function ConversationLink({ conversation }) { return ( 0 ? "conversation-link--unread" : ""}`} > {conversation.members && conversation.members.length > 2 ? ( ) : ( )} {conversation.name} {conversation.unread > 0 && ( {conversation.unread} )} ); } function Badge({ children }) { return {children}; } function Button({ children, type = "button", size = "default", variant = "default" }) { return ( ); } function Pad({ children, renderCap = null }) { return (

{children}

); } function NavItem({ navItem }) { return (

{navItem.text} {navItem.notificationCount > 0 && ( {navItem.notificationCount} )}

); } function MakeTextBase(classNameDefault, $asDefault) { return ({ $as = null, children, className }) => { const AsComponent = $as || $asDefault; return ( {children} ); }; } const TextHeading1 = MakeTextBase("text-heading1", "h1"); const TextHeading2 = MakeTextBase("text-heading2", "h2"); const TextHeading3 = MakeTextBase("text-heading3", "h3"); const TextHeading4 = MakeTextBase("text-heading4", "h4"); const TextHeading5 = MakeTextBase("text-heading5", "h5"); const TextHeading6 = MakeTextBase("text-heading6", "h6"); const TextParagraph1 = MakeTextBase("text-paragraph1", "p"); const TextOverline = MakeTextBase("segment-topbar__overline", "span"); function MakeIcon(svg) { return ({ className }) => ( ); } const IconFeedMute = MakeIcon( ); const IconFeedSettings = MakeIcon( ); const IconMenuMore = MakeIcon( ); const IconFeedAdd = MakeIcon( ); const IconSearchSubmit = MakeIcon( ); const IconShop = MakeIcon( ); const FIXTURES = { headerMenu: [ { notificationCount: 0, text: "Home" }, { isActive: true, notificationCount: 11, text: "Messages" }, { notificationCount: 0, text: "Shop" }, { notificationCount: 0, text: "Map" }, { notificationCount: 0, text: "Files" } ], feed: [ { id: "5ba5", name: "Afterlife", unread: 3 }, { id: "4f22", name: "NCPD-Gigs" }, { id: "fee9", name: "Pacifica" }, { id: "a0cc", name: "Watson" }, { id: "dee3", name: "_T_SQUAD", isPrivate: true, unread: 2 } ], conversation: [ { id: "cc23", isOnline: true, unread: 5, name: "Rogue Amendiares" }, { id: "95b4", isOnline: true, name: "Takemura", unread: 1 }, { id: "10cf", name: "Wakado O., Regina Jones" }, { id: "e466", name: "Dexter DeShawn" }, { id: "ca0b", name: "Megabuilding H10 Administration" } ], messages: [ { id: "fd0cf", content: "I got a gig lined up in Watson, no biggie. If you prove useful, expect more side gigs coming your way. I need a half-decent netrunner. Hit me up, provide credentials, eddies on completion.", dateTime: "2077-10-09T11:04:57Z", author: { id: "d12c", name: "V.M. Vargas" } } ] }; render(, document.getElementById("root"));

作品「赛博朋克2077风格的页面设计 - Preact」预览