@ant-design/icons#CoffeeOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#CoffeeOutlined.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: SideBar.tsx From posthog-foss with MIT License | 4 votes |
|
function Pages(): JSX.Element {
const { currentOrganization } = useValues(organizationLogic)
const { hideSideBarMobile } = useActions(navigationLogic)
const { pinnedDashboards } = useValues(dashboardsModel)
const { featureFlags } = useValues(featureFlagLogic)
const { showGroupsOptions } = useValues(groupsModel)
const [arePinnedDashboardsShown, setArePinnedDashboardsShown] = useState(false)
return (
<div className="Pages">
{currentOrganization?.setup.is_active && (
<>
<PageButton
title="Setup"
icon={<IconSettings />}
identifier={Scene.OnboardingSetup}
to={urls.onboardingSetup()}
/>
<LemonSpacer />
</>
)}
<PageButton
icon={<IconGauge />}
identifier={Scene.Dashboards}
to={urls.dashboards()}
sideAction={{
icon: <IconArrowDropDown />,
identifier: 'pinned-dashboards',
tooltip: 'Pinned dashboards',
onClick: () => setArePinnedDashboardsShown((state) => !state),
popup: {
visible: arePinnedDashboardsShown,
onClickOutside: () => setArePinnedDashboardsShown(false),
onClickInside: hideSideBarMobile,
overlay: (
<div className="SideBar__pinned-dashboards">
<h5>Pinned dashboards</h5>
<LemonSpacer />
{pinnedDashboards.length > 0 ? (
pinnedDashboards.map((dashboard) => (
<PageButton
key={dashboard.id}
title={dashboard.name}
identifier={dashboard.id}
onClick={() => setArePinnedDashboardsShown(false)}
to={urls.dashboard(dashboard.id)}
/>
))
) : (
<div className="text-muted text-center" style={{ maxWidth: 220 }}>
<PushpinOutlined style={{ marginRight: 4 }} /> Pinned dashboards will show here.{' '}
<Link onClick={() => setArePinnedDashboardsShown(false)} to={urls.dashboards()}>
Go to dashboards
</Link>
.
</div>
)}
</div>
),
},
}}
/>
<PageButton
icon={<IconBarChart />}
identifier={Scene.SavedInsights}
to={urls.savedInsights()}
sideAction={{
icon: <IconPlus />,
to: urls.insightNew({ insight: InsightType.TRENDS }),
tooltip: 'New insight',
identifier: Scene.Insight,
onClick: hideSideBarMobile,
}}
/>
<PageButton icon={<IconRecording />} identifier={Scene.SessionRecordings} to={urls.sessionRecordings()} />
<PageButton icon={<IconFlag />} identifier={Scene.FeatureFlags} to={urls.featureFlags()} />
{featureFlags[FEATURE_FLAGS.EXPERIMENTATION] && (
<PageButton icon={<IconExperiment />} identifier={Scene.Experiments} to={urls.experiments()} />
)}
{featureFlags[FEATURE_FLAGS.APM] && (
<PageButton icon={<CoffeeOutlined />} identifier={Scene.APM} to={urls.apm()} />
)}
<LemonSpacer />
<PageButton icon={<IconGroupedEvents />} identifier={Scene.Events} to={urls.events()} />
<PageButton
icon={<IconPerson />}
identifier={Scene.Persons}
to={urls.persons()}
title={`Persons${showGroupsOptions ? ' & Groups' : ''}`}
/>
<PageButton icon={<IconCohort />} identifier={Scene.Cohorts} to={urls.cohorts()} />
<PageButton icon={<IconComment />} identifier={Scene.Annotations} to={urls.annotations()} />
<LemonSpacer />
{canViewPlugins(currentOrganization) && (
<PageButton icon={<IconExtension />} identifier={Scene.Plugins} to={urls.plugins()} />
)}
<PageButton icon={<IconTools />} identifier={Scene.ToolbarLaunch} to={urls.toolbarLaunch()} />
<PageButton icon={<IconSettings />} identifier={Scene.ProjectSettings} to={urls.projectSettings()} />
</div>
)
}
Example #2
| Source File: Icon.tsx From html2sketch with MIT License | 4 votes |
|
IconSymbol: FC = () => {
return (
<Row>
{/*<CaretUpOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/1.CaretUpOutlined'}*/}
{/*/>*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.MailOutlined'}*/}
{/*/>*/}
{/*<StepBackwardOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
{/*/>*/}
{/*<StepForwardOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
{/*/>*/}
<StepForwardOutlined />
<ShrinkOutlined />
<ArrowsAltOutlined />
<DownOutlined />
<UpOutlined />
<LeftOutlined />
<RightOutlined />
<CaretUpOutlined />
<CaretDownOutlined />
<CaretLeftOutlined />
<CaretRightOutlined />
<VerticalAlignTopOutlined />
<RollbackOutlined />
<FastBackwardOutlined />
<FastForwardOutlined />
<DoubleRightOutlined />
<DoubleLeftOutlined />
<VerticalLeftOutlined />
<VerticalRightOutlined />
<VerticalAlignMiddleOutlined />
<VerticalAlignBottomOutlined />
<ForwardOutlined />
<BackwardOutlined />
<EnterOutlined />
<RetweetOutlined />
<SwapOutlined />
<SwapLeftOutlined />
<SwapRightOutlined />
<ArrowUpOutlined />
<ArrowDownOutlined />
<ArrowLeftOutlined />
<ArrowRightOutlined />
<LoginOutlined />
<LogoutOutlined />
<MenuFoldOutlined />
<MenuUnfoldOutlined />
<BorderBottomOutlined />
<BorderHorizontalOutlined />
<BorderInnerOutlined />
<BorderOuterOutlined />
<BorderLeftOutlined />
<BorderRightOutlined />
<BorderTopOutlined />
<BorderVerticleOutlined />
<PicCenterOutlined />
<PicLeftOutlined />
<PicRightOutlined />
<RadiusBottomleftOutlined />
<RadiusBottomrightOutlined />
<RadiusUpleftOutlined />
<RadiusUprightOutlined />
<FullscreenOutlined />
<FullscreenExitOutlined />
<QuestionOutlined />
<PauseOutlined />
<MinusOutlined />
<PauseCircleOutlined />
<InfoOutlined />
<CloseOutlined />
<ExclamationOutlined />
<CheckOutlined />
<WarningOutlined />
<IssuesCloseOutlined />
<StopOutlined />
<EditOutlined />
<CopyOutlined />
<ScissorOutlined />
<DeleteOutlined />
<SnippetsOutlined />
<DiffOutlined />
<HighlightOutlined />
<AlignCenterOutlined />
<AlignLeftOutlined />
<AlignRightOutlined />
<BgColorsOutlined />
<BoldOutlined />
<ItalicOutlined />
<UnderlineOutlined />
<StrikethroughOutlined />
<RedoOutlined />
<UndoOutlined />
<ZoomInOutlined />
<ZoomOutOutlined />
<FontColorsOutlined />
<FontSizeOutlined />
<LineHeightOutlined />
<SortAscendingOutlined />
<SortDescendingOutlined />
<DragOutlined />
<OrderedListOutlined />
<UnorderedListOutlined />
<RadiusSettingOutlined />
<ColumnWidthOutlined />
<ColumnHeightOutlined />
<AreaChartOutlined />
<PieChartOutlined />
<BarChartOutlined />
<DotChartOutlined />
<LineChartOutlined />
<RadarChartOutlined />
<HeatMapOutlined />
<FallOutlined />
<RiseOutlined />
<StockOutlined />
<BoxPlotOutlined />
<FundOutlined />
<SlidersOutlined />
<AndroidOutlined />
<AppleOutlined />
<WindowsOutlined />
<IeOutlined />
<ChromeOutlined />
<GithubOutlined />
<AliwangwangOutlined />
<DingdingOutlined />
<WeiboSquareOutlined />
<WeiboCircleOutlined />
<TaobaoCircleOutlined />
<Html5Outlined />
<WeiboOutlined />
<TwitterOutlined />
<WechatOutlined />
<AlipayCircleOutlined />
<TaobaoOutlined />
<SkypeOutlined />
<FacebookOutlined />
<CodepenOutlined />
<CodeSandboxOutlined />
<AmazonOutlined />
<GoogleOutlined />
<AlipayOutlined />
<AntDesignOutlined />
<AntCloudOutlined />
<ZhihuOutlined />
<SlackOutlined />
<SlackSquareOutlined />
<BehanceSquareOutlined />
<DribbbleOutlined />
<DribbbleSquareOutlined />
<InstagramOutlined />
<YuqueOutlined />
<AlibabaOutlined />
<YahooOutlined />
<RedditOutlined />
<SketchOutlined />
<AccountBookOutlined />
<AlertOutlined />
<ApartmentOutlined />
<ApiOutlined />
<QqOutlined />
<MediumWorkmarkOutlined />
<GitlabOutlined />
<MediumOutlined />
<GooglePlusOutlined />
<AppstoreAddOutlined />
<AppstoreOutlined />
<AudioOutlined />
<AudioMutedOutlined />
<AuditOutlined />
<BankOutlined />
<BarcodeOutlined />
<BarsOutlined />
<BellOutlined />
<BlockOutlined />
<BookOutlined />
<BorderOutlined />
<BranchesOutlined />
<BuildOutlined />
<BulbOutlined />
<CalculatorOutlined />
<CalendarOutlined />
<CameraOutlined />
<CarOutlined />
<CarryOutOutlined />
<CiCircleOutlined />
<CiOutlined />
<CloudOutlined />
<ClearOutlined />
<ClusterOutlined />
<CodeOutlined />
<CoffeeOutlined />
<CompassOutlined />
<CompressOutlined />
<ContactsOutlined />
<ContainerOutlined />
<ControlOutlined />
<CopyrightCircleOutlined />
<CopyrightOutlined />
<CreditCardOutlined />
<CrownOutlined />
<CustomerServiceOutlined />
<DashboardOutlined />
<DatabaseOutlined />
<DeleteColumnOutlined />
<DeleteRowOutlined />
<DisconnectOutlined />
<DislikeOutlined />
<DollarCircleOutlined />
<DollarOutlined />
<DownloadOutlined />
<EllipsisOutlined />
<EnvironmentOutlined />
<EuroCircleOutlined />
<EuroOutlined />
<ExceptionOutlined />
<ExpandAltOutlined />
<ExpandOutlined />
<ExperimentOutlined />
<ExportOutlined />
<EyeOutlined />
<FieldBinaryOutlined />
<FieldNumberOutlined />
<FieldStringOutlined />
<DesktopOutlined />
<DingtalkOutlined />
<FileAddOutlined />
<FileDoneOutlined />
<FileExcelOutlined />
<FileExclamationOutlined />
<FileOutlined />
<FileImageOutlined />
<FileJpgOutlined />
<FileMarkdownOutlined />
<FilePdfOutlined />
<FilePptOutlined />
<FileProtectOutlined />
<FileSearchOutlined />
<FileSyncOutlined />
<FileTextOutlined />
<FileUnknownOutlined />
<FileWordOutlined />
<FilterOutlined />
<FireOutlined />
<FlagOutlined />
<FolderAddOutlined />
<FolderOutlined />
<FolderOpenOutlined />
<ForkOutlined />
<FormatPainterOutlined />
<FrownOutlined />
<FunctionOutlined />
<FunnelPlotOutlined />
<GatewayOutlined />
<GifOutlined />
<GiftOutlined />
<GlobalOutlined />
<GoldOutlined />
<GroupOutlined />
<HddOutlined />
<HeartOutlined />
<HistoryOutlined />
<HomeOutlined />
<HourglassOutlined />
<IdcardOutlined />
<ImportOutlined />
<InboxOutlined />
<InsertRowAboveOutlined />
<InsertRowBelowOutlined />
<InsertRowLeftOutlined />
<InsertRowRightOutlined />
<InsuranceOutlined />
<InteractionOutlined />
<KeyOutlined />
<LaptopOutlined />
<LayoutOutlined />
<LikeOutlined />
<LineOutlined />
<LinkOutlined />
<Loading3QuartersOutlined />
<LoadingOutlined />
<LockOutlined />
<MailOutlined />
<ManOutlined />
<MedicineBoxOutlined />
<MehOutlined />
<MenuOutlined />
<MergeCellsOutlined />
<MessageOutlined />
<MobileOutlined />
<MoneyCollectOutlined />
<MonitorOutlined />
<MoreOutlined />
<NodeCollapseOutlined />
<NodeExpandOutlined />
<NodeIndexOutlined />
<NotificationOutlined />
<NumberOutlined />
<PaperClipOutlined />
<PartitionOutlined />
<PayCircleOutlined />
<PercentageOutlined />
<PhoneOutlined />
<PictureOutlined />
<PoundCircleOutlined />
<PoundOutlined />
<PoweroffOutlined />
<PrinterOutlined />
<ProfileOutlined />
<ProjectOutlined />
<PropertySafetyOutlined />
<PullRequestOutlined />
<PushpinOutlined />
<QrcodeOutlined />
<ReadOutlined />
<ReconciliationOutlined />
<RedEnvelopeOutlined />
<ReloadOutlined />
<RestOutlined />
<RobotOutlined />
<RocketOutlined />
<SafetyCertificateOutlined />
<SafetyOutlined />
<ScanOutlined />
<ScheduleOutlined />
<SearchOutlined />
<SecurityScanOutlined />
<SelectOutlined />
<SendOutlined />
<SettingOutlined />
<ShakeOutlined />
<ShareAltOutlined />
<ShopOutlined />
<ShoppingCartOutlined />
<ShoppingOutlined />
<SisternodeOutlined />
<SkinOutlined />
<SmileOutlined />
<SolutionOutlined />
<SoundOutlined />
<SplitCellsOutlined />
<StarOutlined />
<SubnodeOutlined />
<SyncOutlined />
<TableOutlined />
<TabletOutlined />
<TagOutlined />
<TagsOutlined />
<TeamOutlined />
<ThunderboltOutlined />
<ToTopOutlined />
<ToolOutlined />
<TrademarkCircleOutlined />
<TrademarkOutlined />
<TransactionOutlined />
<TrophyOutlined />
<UngroupOutlined />
<UnlockOutlined />
<UploadOutlined />
<UsbOutlined />
<UserAddOutlined />
<UserDeleteOutlined />
<UserOutlined />
<UserSwitchOutlined />
<UsergroupAddOutlined />
<UsergroupDeleteOutlined />
<VideoCameraOutlined />
<WalletOutlined />
<WifiOutlined />
<BorderlessTableOutlined />
<WomanOutlined />
<BehanceOutlined />
<DropboxOutlined />
<DeploymentUnitOutlined />
<UpCircleOutlined />
<DownCircleOutlined />
<LeftCircleOutlined />
<RightCircleOutlined />
<UpSquareOutlined />
<DownSquareOutlined />
<LeftSquareOutlined />
<RightSquareOutlined />
<PlayCircleOutlined />
<QuestionCircleOutlined />
<PlusCircleOutlined />
<PlusSquareOutlined />
<MinusSquareOutlined />
<MinusCircleOutlined />
<InfoCircleOutlined />
<ExclamationCircleOutlined />
<CloseCircleOutlined />
<CloseSquareOutlined />
<CheckCircleOutlined />
<CheckSquareOutlined />
<ClockCircleOutlined />
<FormOutlined />
<DashOutlined />
<SmallDashOutlined />
<YoutubeOutlined />
<CodepenCircleOutlined />
<AliyunOutlined />
<PlusOutlined />
<LinkedinOutlined />
<AimOutlined />
<BugOutlined />
<CloudDownloadOutlined />
<CloudServerOutlined />
<CloudSyncOutlined />
<CloudUploadOutlined />
<CommentOutlined />
<ConsoleSqlOutlined />
<EyeInvisibleOutlined />
<FileGifOutlined />
<DeliveredProcedureOutlined />
<FieldTimeOutlined />
<FileZipOutlined />
<FolderViewOutlined />
<FundProjectionScreenOutlined />
<FundViewOutlined />
<MacCommandOutlined />
<PlaySquareOutlined />
<OneToOneOutlined />
<RotateLeftOutlined />
<RotateRightOutlined />
<SaveOutlined />
<SwitcherOutlined />
<TranslationOutlined />
<VerifiedOutlined />
<VideoCameraAddOutlined />
<WhatsAppOutlined />
{/*</Col>*/}
</Row>
);
}
Example #3
| Source File: index.tsx From foodie with MIT License | 4 votes |
|
Home: React.FC<IProps> = (props) => {
const state = useSelector((state: IRootReducer) => ({
newsFeed: state.newsFeed,
auth: state.auth,
error: state.error.newsFeedError,
isLoadingFeed: state.loading.isLoadingFeed,
isLoadingCreatePost: state.loading.isLoadingCreatePost
}), shallowEqual);
const dispatch = useDispatch();
const { isOpen, openModal, closeModal } = useModal();
const from = props.location.state?.from || null;
useDocumentTitle('Foodie | Social Network');
useEffect(() => {
console.log('TRIGGER', from)
if (state.newsFeed.items.length === 0 || from === '/') {
dispatch(clearNewsFeed());
dispatch(getNewsFeedStart({ offset: 0 }));
}
socket.on('newFeed', () => {
dispatch(hasNewFeed());
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const fetchNewsFeed = () => {
dispatch(getNewsFeedStart({ offset: state.newsFeed.offset }));
};
const likeCallback = (postID: string, state: boolean, newLikeCount: number) => {
dispatch(updatePostLikes(postID, state, newLikeCount));
}
const updateSuccessCallback = (post: IPost) => {
dispatch(updateFeedPost(post));
}
const deleteSuccessCallback = (postID: string) => {
dispatch(deleteFeedPost(postID));
}
const dispatchCreatePost = (form: FormData) => {
dispatch(createPostStart(form));
}
const onClickNewFeed = () => {
dispatch(clearNewsFeed());
dispatch(getNewsFeedStart({ offset: 0 }));
dispatch(hasNewFeed(false));
}
const infiniteRef = useInfiniteScroll({
loading: state.isLoadingFeed,
hasNextPage: !state.error && state.newsFeed.offset > 0,
onLoadMore: fetchNewsFeed,
scrollContainer: 'window',
});
return (
<div className="laptop:px-6% pt-20 flex items-start">
{/* --- SIDE MENU --- */}
<div className="hidden laptop:block laptop:w-1/4 laptop:rounded-md bg-white laptop:sticky laptop:top-20 mr-4 laptop:shadow-lg divide-y-2 dark:bg-indigo-1000">
{props.isAuth && (
<SideMenu username={state.auth.username} profilePicture={state.auth.profilePicture?.url} />
)}
</div>
<div className="w-full laptop:w-2/4 relative">
{/* --- CREATE POST INPUT ---- */}
{props.isAuth && (
<div className="flex items-center justify-start mb-4 px-4 laptop:px-0">
<Avatar url={state.auth.profilePicture?.url} className="mr-2" />
<div className="flex-grow">
<input
className="dark:bg-indigo-1000 dark:!border-gray-800 dark:text-white"
type="text"
placeholder="Create a post."
onClick={() => (!state.isLoadingCreatePost && !state.isLoadingFeed) && openModal()}
readOnly={state.isLoadingFeed || state.isLoadingCreatePost}
/>
</div>
</div>
)}
{/* --- HAS NEW FEED NOTIF --- */}
{state.newsFeed.hasNewFeed && (
<button
className="sticky mt-2 top-16 left-0 right-0 mx-auto z-20 flex items-center"
onClick={onClickNewFeed}
>
<UndoOutlined className="flex items-center justify-center text-xl mr-4" />
New Feed Available
</button>
)}
{/* --- CREATE POST MODAL ----- */}
{(props.isAuth && isOpen) && (
<CreatePostModal
isOpen={isOpen}
openModal={openModal}
closeModal={closeModal}
dispatchCreatePost={dispatchCreatePost}
/>
)}
{(state.error && state.newsFeed.items.length === 0 && !state.isLoadingCreatePost) && (
<div className="flex flex-col w-full min-h-24rem px-8 items-center justify-center text-center">
{state.error.status_code === 404 ? (
<>
<CoffeeOutlined className="text-8xl text-gray-300 mb-4 dark:text-gray-800" />
<h5 className="text-gray-500">News feed is empty</h5>
<p className="text-gray-400">Start following people or create your first post.</p>
<br />
<Link className="underline dark:text-indigo-400" to={SUGGESTED_PEOPLE}>
See Suggested People
</Link>
</>
) : (
<h5 className="text-gray-500 italic">
{state.error?.error?.message || 'Something went wrong :('}
</h5>
)}
</div>
)}
{/* ---- LOADING INDICATOR ----- */}
{(state.isLoadingFeed && state.newsFeed.items.length === 0) && (
<div className="mt-4 px-2 overflow-hidden space-y-6 pb-10">
<PostLoader />
<PostLoader />
</div>
)}
{state.isLoadingCreatePost && (
<div className="mt-4 px-2 overflow-hidden pb-10">
<PostLoader />
</div>
)}
{(!props.isAuth && !state.isLoadingFeed) && (
<div className="px-4 laptop:px-0 py-4 mb-4">
<h2 className="dark:text-white">Public posts that might <br />interest you.</h2>
</div>
)}
{/* ---- NEWS FEED ---- */}
{(state.newsFeed.items.length !== 0) && (
<div className="mb-8">
<TransitionGroup component={null}>
<div ref={infiniteRef as React.RefObject<HTMLDivElement>}>
{state.newsFeed.items.map((post: IPost) => post.author && ( // avoid render posts with null author
<CSSTransition
timeout={500}
classNames="fade"
key={post.id}
>
<PostItem
key={post.id}
post={post}
likeCallback={likeCallback}
/>
</CSSTransition>
))}
</div>
</TransitionGroup>
{state.isLoadingFeed && (
<div className="flex justify-center py-6">
<Loader />
</div>
)}
{state.error && (
<div className="flex justify-center py-6">
<p className="text-gray-400 italic">
{state.error.error?.message || 'Something went wrong.'}
</p>
</div>
)}
</div>
)}
</div>
{/* --- SUGGESTED PEOPLE --- */}
<div className="hidden laptop:block laptop:w-1/4 laptop:sticky laptop:top-20 ml-4">
{props.isAuth && (
<SuggestedPeople />
)}
</div>
{/* --- ALL POST MODALS (DELETE COMMENT NOT INCLUDED) --- */}
<PostModals
deleteSuccessCallback={deleteSuccessCallback}
updateSuccessCallback={updateSuccessCallback}
/>
</div >
);
}
