+
+
+
+
+
+
+ {state.isLoading ? (
+
+ ) : (
+ <>
+ { // has sites ?
+
+ state.sites.length > 0 ?
+
+ {state.sites.map((site:any, i: number) => {
+ return (
+
+ );
+ })}
+
+ :
+ <>
+
+
+
+
+ >
+
+ }
+
+ {state.totalPages > 1 && (
+ <>
+
+
{
+ const rs = await _searchResults.getPage(page);
+ _searchResults = rs;
+ setState({
+ ...state,
+ currentPage: page,
+ sites: _searchResults.PrimarySearchResults,
+ });
+ }}
+ />
+
+ >
+ )}
+ >
+ )}
+
+ >
+ );
+};
diff --git a/samples/react-my-sites/src/webparts/mySites/components/MySites/paginationOverride.module.scss b/samples/react-my-sites/src/webparts/mySites/components/MySites/paginationOverride.module.scss
new file mode 100644
index 000000000..493b34f0b
--- /dev/null
+++ b/samples/react-my-sites/src/webparts/mySites/components/MySites/paginationOverride.module.scss
@@ -0,0 +1,127 @@
+@import "~office-ui-fabric-react/dist/sass/References.scss";
+@import "./node_modules/spfx-uifabric-themes/office.theme";
+@import "~office-ui-fabric-react/dist/sass/semanticSlots";
+
+
+/*}*/
+:global {
+ // default theme
+ $default-background: #f3f2f1;
+ $default-color: #252423;
+ $default-button-background: #6264a7;
+ $default-Button-color: #f3f2f1;
+
+ // dark theme
+ $dark-background: #2d2c2c;
+ $dark-color: #ffffff;
+ $dark-button-background: #6264a7;
+ $dark-button-color: #2d2c2c;
+
+ // contrast theme
+ $contrast-background: #000000;
+ $contrast-color: #ffffff;
+ $contrast-button-background: #b5c01c;
+ $contrast-Button-color: #000000;
+
+ .MuiPaginationItem-root {
+ /* color: rgba(0, 0, 0, 0.87); */
+ color: $ms-color-neutralPrimary !important;
+ }
+
+ .MuiButtonBase-root {
+ /* color: inherit; */
+ color: $ms-color-neutralPrimary !important;
+ }
+
+ .MuiPaginationItem-textPrimary.Mui-selected {
+ color: $ms-color-white !important;
+ background-color: $ms-themePrimary !important;
+ }
+
+ .MuiPaginationItem-page:hover {
+ background-color: $ms-themePrimary !important;
+ }
+
+ [data-theme="dark"] {
+ .MuiPaginationItem-root {
+ /* color: rgba(0, 0, 0, 0.87); */
+ color: $dark-color !important;
+ }
+
+ .MuiButtonBase-root {
+ /* color: inherit; */
+ color: $dark-color !important;
+ }
+
+ .MuiPaginationItem-textPrimary.Mui-selected {
+ color: $dark-color !important;
+ background-color: $dark-button-background !important;
+ }
+
+ .MuiPaginationItem-page:hover {
+ background-color: $dark-button-background !important;
+ }
+
+ .ms-Dropdown-optionText {
+ color: $ms-color-white !important;
+ }
+
+ [class^="propertyPaneFooter_"] {
+ background-color: $dark-background;
+ }
+ }
+
+ [data-theme="default"] {
+ .MuiPaginationItem-root {
+ /* color: rgba(0, 0, 0, 0.87); */
+ color: $default-color !important;
+ }
+
+ .MuiButtonBase-root {
+ /* color: inherit; */
+ color: $default-color !important;
+ }
+
+ .MuiPaginationItem-textPrimary.Mui-selected {
+ color: $ms-color-white !important;
+ background-color: $default-button-background !important;
+ }
+
+ .MuiPaginationItem-page:hover {
+ background-color: $default-button-background !important;
+ }
+
+ [class^="propertyPaneFooter_"] {
+ background-color: $default-background;
+ }
+ }
+
+ [data-theme="contrast"] {
+ .MuiPaginationItem-root {
+ /* color: rgba(0, 0, 0, 0.87); */
+ color: $contrast-color !important;
+ }
+
+ .MuiButtonBase-root {
+ /* color: inherit; */
+ color: $contrast-color !important;
+ }
+
+ .MuiPaginationItem-textPrimary.Mui-selected {
+ color: $contrast-color !important;
+ background-color: $contrast-button-background !important;
+ }
+
+ .MuiPaginationItem-page:hover {
+ background-color: $contrast-button-background !important;
+ }
+
+ .ms-Dropdown-optionText {
+ color: $ms-color-white !important;
+ }
+
+ [class^="propertyPaneFooter_"] {
+ background-color: $contrast-background;
+ }
+ }
+}
diff --git a/samples/react-my-sites/src/webparts/mySites/components/SiteTile/ISiteTileProps.ts b/samples/react-my-sites/src/webparts/mySites/components/SiteTile/ISiteTileProps.ts
new file mode 100644
index 000000000..581ba84fa
--- /dev/null
+++ b/samples/react-my-sites/src/webparts/mySites/components/SiteTile/ISiteTileProps.ts
@@ -0,0 +1,8 @@
+
+import { IReadonlyTheme } from '@microsoft/sp-component-base';
+import { MSGraphClient, AadTokenProvider } from "@microsoft/sp-http";
+export interface ISiteTileProps {
+ msGraphClient:MSGraphClient;
+ site:any;
+ themeVariant: IReadonlyTheme | undefined;
+}
diff --git a/samples/react-my-sites/src/webparts/mySites/components/SiteTile/ISiteTileState.ts b/samples/react-my-sites/src/webparts/mySites/components/SiteTile/ISiteTileState.ts
new file mode 100644
index 000000000..8f18bda14
--- /dev/null
+++ b/samples/react-my-sites/src/webparts/mySites/components/SiteTile/ISiteTileState.ts
@@ -0,0 +1,10 @@
+export interface ISiteTileState {
+hasTeam:boolean;
+tileData: {
+ activityUserEmail:string ,
+ activityUser:string,
+ activityDate:string,
+ activityMessage:string,
+ userPhoto:string
+};
+}
diff --git a/samples/react-my-sites/src/webparts/mySites/components/SiteTile/SiteTile.module.scss b/samples/react-my-sites/src/webparts/mySites/components/SiteTile/SiteTile.module.scss
new file mode 100644
index 000000000..aefec4cc7
--- /dev/null
+++ b/samples/react-my-sites/src/webparts/mySites/components/SiteTile/SiteTile.module.scss
@@ -0,0 +1 @@
+@import '~office-ui-fabric-react/dist/sass/References.scss';
diff --git a/samples/react-my-sites/src/webparts/mySites/components/SiteTile/SiteTile.tsx b/samples/react-my-sites/src/webparts/mySites/components/SiteTile/SiteTile.tsx
new file mode 100644
index 000000000..2810e845e
--- /dev/null
+++ b/samples/react-my-sites/src/webparts/mySites/components/SiteTile/SiteTile.tsx
@@ -0,0 +1,266 @@
+import * as React from "react";
+import { getUserPhoto } from "../../../../Utils/Utils";
+import { ISiteTileProps } from "./ISiteTileProps";
+import { ISiteTileState } from "./ISiteTileState";
+import { escape } from "@microsoft/sp-lodash-subset";
+import { ITitleData } from "../../../../Entities/ITitleData";
+import strings from "MySitesWebPartStrings";
+import styles from './SiteTile.module.scss';
+import { useUserSites } from '../../../../Hooks/useUserSites';
+import {
+ mergeStyleSets,
+ IDocumentCardStyles,
+ DocumentCardTitle,
+ DocumentCardPreview,
+ DocumentCardDetails,
+ DocumentCardActivity,
+ ImageFit,
+ Label,
+ Icon,
+ IIconStyles,
+ DocumentCard,
+ DocumentCardType,
+ FontSizes,
+ IDocumentCardActivityStyles,
+ IDocumentCardActivityStyleProps,
+ FontIcon,
+ ImageIcon,
+ css,
+ TooltipHost,
+} from "office-ui-fabric-react";
+
+
+const _siteLogoSP: string =
+ "https://static2.sharepointonline.com/files/fabric-cdn-prod_20200430.002/assets/brand-icons/product/svg/sharepoint_48x1.svg";
+
+const _siteLogoOndrive: string =
+ "https://static2.sharepointonline.com/files/fabric-cdn-prod_20200430.002/assets/brand-icons/product/svg/onedrive_48x1.svg";
+
+const _teamsLogo:string = "https://static2.sharepointonline.com/files/fabric-cdn-prod_20200430.002/assets/brand-icons/product/svg/teams_48x1.svg";
+
+export const SiteTile: React.FunctionComponent