Updated readme, sample.json, and devcontainer
This commit is contained in:
Hugo Bernier
parent
9ca0643603
commit
b8d5edb10f
|
|
@ -0,0 +1,38 @@
|
|||
{
|
||||
"name": "SPFx 1.18.2",
|
||||
"image": "docker.io/m365pnp/spfx:1.18.2",
|
||||
"customizations": {
|
||||
"vscode": {
|
||||
"extensions": [
|
||||
"editorconfig.editorconfig",
|
||||
"dbaeumer.vscode-eslint"
|
||||
]
|
||||
}
|
||||
},
|
||||
"forwardPorts": [
|
||||
4321,
|
||||
35729,
|
||||
5432
|
||||
],
|
||||
"portsAttributes": {
|
||||
"4321": {
|
||||
"protocol": "https",
|
||||
"label": "Manifest",
|
||||
"onAutoForward": "silent",
|
||||
"requireLocalPort": true
|
||||
},
|
||||
"5432": {
|
||||
"protocol": "https",
|
||||
"label": "Workbench",
|
||||
"onAutoForward": "silent"
|
||||
},
|
||||
"35729": {
|
||||
"protocol": "https",
|
||||
"label": "LiveReload",
|
||||
"onAutoForward": "silent",
|
||||
"requireLocalPort": true
|
||||
}
|
||||
},
|
||||
"postCreateCommand": "bash .devcontainer/spfx-startup.sh",
|
||||
"remoteUser": "node"
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
echo
|
||||
echo -e "\e[1;94mInstalling Node dependencies\e[0m"
|
||||
npm install
|
||||
|
||||
## commands to create dev certificate and copy it to the root folder of the project
|
||||
echo
|
||||
echo -e "\e[1;94mGenerating dev certificate\e[0m"
|
||||
gulp trust-dev-cert
|
||||
|
||||
# Convert the generated PEM certificate to a CER certificate
|
||||
openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer
|
||||
|
||||
# Copy the PEM ecrtificate for non-Windows hosts
|
||||
cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem
|
||||
|
||||
## add *.cer to .gitignore to prevent certificates from being saved in repo
|
||||
if ! grep -Fxq '*.cer' ./.gitignore
|
||||
then
|
||||
echo "# .CER Certificates" >> .gitignore
|
||||
echo "*.cer" >> .gitignore
|
||||
fi
|
||||
|
||||
## add *.pem to .gitignore to prevent certificates from being saved in repo
|
||||
if ! grep -Fxq '*.pem' ./.gitignore
|
||||
then
|
||||
echo "# .PEM Certificates" >> .gitignore
|
||||
echo "*.pem" >> .gitignore
|
||||
fi
|
||||
|
||||
echo
|
||||
echo -e "\e[1;92mReady!\e[0m"
|
||||
|
||||
echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********"
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
# React Modern Carousel Web Part
|
||||
# Modern Carousel
|
||||
|
||||
## Summary
|
||||
|
||||
This SharePoint Framework (SPFx) webpart introduces a contemporary carousel component leveraging Swiper, facilitating seamless traversal through content housed within a SharePoint site. This innovative feature enhances user experience by providing fluid navigation through various pieces of content, thereby adding a touch of elegance and sophistication to the SharePoint environment.
|
||||
This SharePoint Framework (SPFx) web part introduces a contemporary carousel component leveraging Swiper, facilitating seamless traversal through content housed within a SharePoint site. This innovative feature enhances user experience by providing fluid navigation through various pieces of content, thereby adding a touch of elegance and sophistication to the SharePoint environment.
|
||||
|
||||
|
||||
|
||||
|
||||
## Compatibility
|
||||
|
||||
|
|
@ -49,7 +49,7 @@ Create a SharePoint custom list `Award Recognition` in the SPO site with below c
|
|||
|
||||
| Solution | Author(s) |
|
||||
| ----------- | ------------------------------------------------------- |
|
||||
| react-modern-carousel| Sandeep P S ( [Linkedin](https://www.linkedin.com/in/sandeepps1299/) ) / Quadrasystems.net ( [Twitter](https://www.linkedin.com/company/quadrasystems.net-india-pvt-ltd) / [Linkedin](https://www.linkedin.com/company/quadrasystems.net-india-pvt-ltd) ) |
|
||||
| react-modern-carousel| Sandeep P S ( [LinkedIn](https://www.linkedin.com/in/sandeepps1299/) ) / Quadrasystems.net ( [Twitter](https://www.linkedin.com/company/quadrasystems.net-india-pvt-ltd) / [LinkedIn](https://www.linkedin.com/company/quadrasystems.net-india-pvt-ltd) ) |
|
||||
|
||||
## Contributors🧑💻
|
||||
|
||||
|
|
@ -91,7 +91,7 @@ Key features demonstrated by this solution:
|
|||
- [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp) - Guidance, tooling, samples and open-source controls for your Microsoft 365 development.
|
||||
- [SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
|
||||
- [PnP JS](https://pnp.github.io/pnpjs/)
|
||||
- [Pnp React Hooks](https://superioone.github.io/pnp-react-hooks/)
|
||||
- [PnP React Hooks](https://superioone.github.io/pnp-react-hooks/)
|
||||
- [SwiperJS](https://swiperjs.com)
|
||||
- [React Docs](https://react.dev/learn)
|
||||
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.3 MiB After Width: | Height: | Size: 2.3 MiB |
|
|
@ -0,0 +1,51 @@
|
|||
[
|
||||
{
|
||||
"name": "pnp-sp-dev-spfx-web-parts-react-modern-carousel",
|
||||
"source": "pnp",
|
||||
"title": "Modern Carousel",
|
||||
"shortDescription": "This SharePoint Framework (SPFx) web part introduces a contemporary carousel component leveraging Swiper, facilitating seamless traversal through content housed within a SharePoint site.",
|
||||
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-modern-carousel",
|
||||
"downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-modern-carousel",
|
||||
"longDescription": [
|
||||
"This SharePoint Framework (SPFx) web part introduces a contemporary carousel component leveraging Swiper, facilitating seamless traversal through content housed within a SharePoint site. This innovative feature enhances user experience by providing fluid navigation through various pieces of content, thereby adding a touch of elegance and sophistication to the SharePoint environment."
|
||||
],
|
||||
"creationDateTime": "2024-12-25",
|
||||
"updateDateTime": "2024-12-31",
|
||||
"products": [
|
||||
"SharePoint"
|
||||
],
|
||||
"metadata": [
|
||||
{
|
||||
"key": "CLIENT-SIDE-DEV",
|
||||
"value": "React"
|
||||
},
|
||||
{
|
||||
"key": "SPFX-VERSION",
|
||||
"value": "1.18.2"
|
||||
}
|
||||
],
|
||||
"thumbnails": [
|
||||
{
|
||||
"name": "AwardRecognition.png",
|
||||
"type": "image",
|
||||
"order": 100,
|
||||
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-modern-carousel/assets/AwardRecognition.png",
|
||||
"alt": "Web Part Preview"
|
||||
}
|
||||
],
|
||||
"authors": [
|
||||
{
|
||||
"gitHubAccount": "Sandeep-FED",
|
||||
"pictureUrl": "https://github.com/Sandeep-FED.png",
|
||||
"name": "Sandeep P S"
|
||||
}
|
||||
],
|
||||
"references": [
|
||||
{
|
||||
"name": "Build your first SharePoint client-side web part",
|
||||
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
|
||||
"url": "https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
"typescript": "4.7.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16.13.0 <17.0.0"
|
||||
"node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@aashutoshrathi/word-wrap": {
|
||||
|
|
|
|||
|
|
@ -1,408 +0,0 @@
|
|||
# Upgrade project award-recognition-client-side-solution to v1.18.2
|
||||
|
||||
Date: 16/03/2024
|
||||
|
||||
## Findings
|
||||
|
||||
Following is the list of steps required to upgrade your project to SharePoint Framework version 1.18.2. [Summary](#Summary) of the modifications is included at the end of the report.
|
||||
|
||||
### FN001001 @microsoft/sp-core-library | Required
|
||||
|
||||
Upgrade SharePoint Framework dependency package @microsoft/sp-core-library
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i -SE @microsoft/sp-core-library@1.18.2
|
||||
```
|
||||
|
||||
File: [./package.json:16:5](./package.json)
|
||||
|
||||
### FN001002 @microsoft/sp-lodash-subset | Required
|
||||
|
||||
Upgrade SharePoint Framework dependency package @microsoft/sp-lodash-subset
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i -SE @microsoft/sp-lodash-subset@1.18.2
|
||||
```
|
||||
|
||||
File: [./package.json:17:5](./package.json)
|
||||
|
||||
### FN001003 @microsoft/sp-office-ui-fabric-core | Required
|
||||
|
||||
Upgrade SharePoint Framework dependency package @microsoft/sp-office-ui-fabric-core
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i -SE @microsoft/sp-office-ui-fabric-core@1.18.2
|
||||
```
|
||||
|
||||
File: [./package.json:18:5](./package.json)
|
||||
|
||||
### FN001004 @microsoft/sp-webpart-base | Required
|
||||
|
||||
Upgrade SharePoint Framework dependency package @microsoft/sp-webpart-base
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i -SE @microsoft/sp-webpart-base@1.18.2
|
||||
```
|
||||
|
||||
File: [./package.json:20:5](./package.json)
|
||||
|
||||
### FN001021 @microsoft/sp-property-pane | Required
|
||||
|
||||
Upgrade SharePoint Framework dependency package @microsoft/sp-property-pane
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i -SE @microsoft/sp-property-pane@1.18.2
|
||||
```
|
||||
|
||||
File: [./package.json:19:5](./package.json)
|
||||
|
||||
### FN001034 @microsoft/sp-adaptive-card-extension-base | Optional
|
||||
|
||||
Install SharePoint Framework dependency package @microsoft/sp-adaptive-card-extension-base
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i -SE @microsoft/sp-adaptive-card-extension-base@1.18.2
|
||||
```
|
||||
|
||||
File: [./package.json:14:3](./package.json)
|
||||
|
||||
### FN002001 @microsoft/sp-build-web | Required
|
||||
|
||||
Upgrade SharePoint Framework dev dependency package @microsoft/sp-build-web
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i -DE @microsoft/sp-build-web@1.18.2
|
||||
```
|
||||
|
||||
File: [./package.json:33:5](./package.json)
|
||||
|
||||
### FN002002 @microsoft/sp-module-interfaces | Required
|
||||
|
||||
Upgrade SharePoint Framework dev dependency package @microsoft/sp-module-interfaces
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i -DE @microsoft/sp-module-interfaces@1.18.2
|
||||
```
|
||||
|
||||
File: [./package.json:34:5](./package.json)
|
||||
|
||||
### FN002022 @microsoft/eslint-plugin-spfx | Required
|
||||
|
||||
Upgrade SharePoint Framework dev dependency package @microsoft/eslint-plugin-spfx
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i -DE @microsoft/eslint-plugin-spfx@1.18.2
|
||||
```
|
||||
|
||||
File: [./package.json:31:5](./package.json)
|
||||
|
||||
### FN002023 @microsoft/eslint-config-spfx | Required
|
||||
|
||||
Upgrade SharePoint Framework dev dependency package @microsoft/eslint-config-spfx
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i -DE @microsoft/eslint-config-spfx@1.18.2
|
||||
```
|
||||
|
||||
File: [./package.json:30:5](./package.json)
|
||||
|
||||
### FN010001 .yo-rc.json version | Recommended
|
||||
|
||||
Update version in .yo-rc.json
|
||||
|
||||
```json
|
||||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"version": "1.18.2"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
File: [./.yo-rc.json:15:5](./.yo-rc.json)
|
||||
|
||||
### FN001022 office-ui-fabric-react | Required
|
||||
|
||||
Remove SharePoint Framework dependency package office-ui-fabric-react
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm un -S office-ui-fabric-react
|
||||
```
|
||||
|
||||
File: [./package.json:22:5](./package.json)
|
||||
|
||||
### FN014010 Exclude Jest output files in .vscode/settings.json | Required
|
||||
|
||||
Add excluding Jest output files in .vscode/settings.json
|
||||
|
||||
```json
|
||||
{
|
||||
"files.exclude": {
|
||||
"**/jest-output": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
File: [.vscode/settings.json:4:3](.vscode/settings.json)
|
||||
|
||||
### FN001035 @fluentui/react | Required
|
||||
|
||||
Install SharePoint Framework dependency package @fluentui/react
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i -SE @fluentui/react@8.106.4
|
||||
```
|
||||
|
||||
File: [./package.json:14:3](./package.json)
|
||||
|
||||
### FN002026 typescript | Required
|
||||
|
||||
Upgrade SharePoint Framework dev dependency package typescript
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i -DE typescript@4.7.4
|
||||
```
|
||||
|
||||
File: [./package.json:43:5](./package.json)
|
||||
|
||||
### FN002028 @microsoft/rush-stack-compiler-4.7 | Required
|
||||
|
||||
Install SharePoint Framework dev dependency package @microsoft/rush-stack-compiler-4.7
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm i -DE @microsoft/rush-stack-compiler-4.7@0.1.0
|
||||
```
|
||||
|
||||
File: [./package.json:29:3](./package.json)
|
||||
|
||||
### FN010010 .yo-rc.json @microsoft/teams-js SDK version | Recommended
|
||||
|
||||
Update @microsoft/teams-js SDK version in .yo-rc.json
|
||||
|
||||
```json
|
||||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"sdkVersions": {
|
||||
"@microsoft/teams-js": "2.12.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
File: [./.yo-rc.json:2:3](./.yo-rc.json)
|
||||
|
||||
### FN012017 tsconfig.json extends property | Required
|
||||
|
||||
Update tsconfig.json extends property
|
||||
|
||||
```json
|
||||
{
|
||||
"extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-web.json"
|
||||
}
|
||||
```
|
||||
|
||||
File: [./tsconfig.json:2:3](./tsconfig.json)
|
||||
|
||||
### FN021003 package.json engines.node | Required
|
||||
|
||||
Update package.json engines.node property
|
||||
|
||||
```json
|
||||
{
|
||||
"engines": {
|
||||
"node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
File: [./package.json:6:5](./package.json)
|
||||
|
||||
### FN014008 Hosted workbench type in .vscode/launch.json | Recommended
|
||||
|
||||
In the .vscode/launch.json file, update the type property for the hosted workbench launch configuration
|
||||
|
||||
```json
|
||||
{
|
||||
"configurations": [
|
||||
{
|
||||
"type": "msedge"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
File: [.vscode/launch.json:8:7](.vscode/launch.json)
|
||||
|
||||
### FN007002 serve.json initialPage | Required
|
||||
|
||||
Update serve.json initialPage URL
|
||||
|
||||
```json
|
||||
{
|
||||
"initialPage": "https://{tenantDomain}/_layouts/workbench.aspx"
|
||||
}
|
||||
```
|
||||
|
||||
File: [./config/serve.json:5:3](./config/serve.json)
|
||||
|
||||
### FN014009 Hosted workbench URL in .vscode/launch.json | Recommended
|
||||
|
||||
In the .vscode/launch.json file, update the url property for the hosted workbench launch configuration
|
||||
|
||||
```json
|
||||
{
|
||||
"configurations": [
|
||||
{
|
||||
"url": "https://{tenantDomain}/_layouts/workbench.aspx"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
File: [.vscode/launch.json:8:7](.vscode/launch.json)
|
||||
|
||||
### FN017001 Run npm dedupe | Optional
|
||||
|
||||
If, after upgrading npm packages, when building the project you have errors similar to: "error TS2345: Argument of type 'SPHttpClientConfiguration' is not assignable to parameter of type 'SPHttpClientConfiguration'", try running 'npm dedupe' to cleanup npm packages.
|
||||
|
||||
Execute the following command:
|
||||
|
||||
```sh
|
||||
npm dedupe
|
||||
```
|
||||
|
||||
File: [./package.json](./package.json)
|
||||
|
||||
## Summary
|
||||
|
||||
### Execute script
|
||||
|
||||
```sh
|
||||
npm un -S office-ui-fabric-react
|
||||
npm i -SE @microsoft/sp-core-library@1.18.2 @microsoft/sp-lodash-subset@1.18.2 @microsoft/sp-office-ui-fabric-core@1.18.2 @microsoft/sp-webpart-base@1.18.2 @microsoft/sp-property-pane@1.18.2 @microsoft/sp-adaptive-card-extension-base@1.18.2 @fluentui/react@8.106.4
|
||||
npm i -DE @microsoft/sp-build-web@1.18.2 @microsoft/sp-module-interfaces@1.18.2 @microsoft/eslint-plugin-spfx@1.18.2 @microsoft/eslint-config-spfx@1.18.2 typescript@4.7.4 @microsoft/rush-stack-compiler-4.7@0.1.0
|
||||
npm dedupe
|
||||
```
|
||||
|
||||
### Modify files
|
||||
|
||||
#### [./.yo-rc.json](./.yo-rc.json)
|
||||
|
||||
Update version in .yo-rc.json:
|
||||
|
||||
```json
|
||||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"version": "1.18.2"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Update @microsoft/teams-js SDK version in .yo-rc.json:
|
||||
|
||||
```json
|
||||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"sdkVersions": {
|
||||
"@microsoft/teams-js": "2.12.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### [.vscode/settings.json](.vscode/settings.json)
|
||||
|
||||
Add excluding Jest output files in .vscode/settings.json:
|
||||
|
||||
```json
|
||||
{
|
||||
"files.exclude": {
|
||||
"**/jest-output": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### [./tsconfig.json](./tsconfig.json)
|
||||
|
||||
Update tsconfig.json extends property:
|
||||
|
||||
```json
|
||||
{
|
||||
"extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-web.json"
|
||||
}
|
||||
```
|
||||
|
||||
#### [./package.json](./package.json)
|
||||
|
||||
Update package.json engines.node property:
|
||||
|
||||
```json
|
||||
{
|
||||
"engines": {
|
||||
"node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### [.vscode/launch.json](.vscode/launch.json)
|
||||
|
||||
In the .vscode/launch.json file, update the type property for the hosted workbench launch configuration:
|
||||
|
||||
```json
|
||||
{
|
||||
"configurations": [
|
||||
{
|
||||
"type": "msedge"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
In the .vscode/launch.json file, update the url property for the hosted workbench launch configuration:
|
||||
|
||||
```json
|
||||
{
|
||||
"configurations": [
|
||||
{
|
||||
"url": "https://{tenantDomain}/_layouts/workbench.aspx"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
#### [./config/serve.json](./config/serve.json)
|
||||
|
||||
Update serve.json initialPage URL:
|
||||
|
||||
```json
|
||||
{
|
||||
"initialPage": "https://{tenantDomain}/_layouts/workbench.aspx"
|
||||
}
|
||||
```
|
||||
|
|
@ -17,7 +17,7 @@ import { AwardItems } from "../types/AwardItems"
|
|||
import styles from "../webparts/awardRecognition/components/AwardRecognition.module.scss"
|
||||
import { Content } from "./Content"
|
||||
|
||||
export const Carousel = () => {
|
||||
export const Carousel = (): JSX.Element => {
|
||||
const [awardList, setAwardList] = useState<AwardItems[]>([])
|
||||
const [selectedUser, setSelectedUser] = useState<AwardItems | null>(null)
|
||||
|
||||
|
|
@ -44,7 +44,8 @@ export const Carousel = () => {
|
|||
}
|
||||
}, [listItems, selectedUser, siteInfo])
|
||||
|
||||
const handleSlideChange = (swiper: any) => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const handleSlideChange = (swiper: any): void => {
|
||||
const activeIndex = swiper.activeIndex
|
||||
setSelectedUser(awardList[activeIndex])
|
||||
}
|
||||
|
|
@ -83,8 +84,8 @@ export const Carousel = () => {
|
|||
loop={false}
|
||||
onSlideChange={(swiper) => handleSlideChange(swiper)}
|
||||
>
|
||||
{awardList?.map((user) => (
|
||||
<SwiperSlide>
|
||||
{awardList?.map((user, index) => (
|
||||
<SwiperSlide key={index}>
|
||||
<Card
|
||||
style={{
|
||||
width: "300px",
|
||||
|
|
@ -93,7 +94,7 @@ export const Carousel = () => {
|
|||
}}
|
||||
>
|
||||
<CardPreview>
|
||||
<img src={user.ImageUrl} />
|
||||
<img src={user.ImageUrl} alt={user.Title}/>
|
||||
</CardPreview>
|
||||
</Card>
|
||||
</SwiperSlide>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { ContentProps } from "../types/ContentProps"
|
|||
import { useContext } from "react";
|
||||
import { WebpartContext } from "../webparts/awardRecognition/components/AwardRecognition";
|
||||
|
||||
export const Content = ({ user }: ContentProps) => {
|
||||
export const Content = ({ user }: ContentProps): JSX.Element => {
|
||||
const contextInfo = useContext(WebpartContext);
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { AwardItems } from "./AwardItems";
|
||||
|
||||
export interface ContentProps {
|
||||
user: AwardItems | null;
|
||||
user: AwardItems | undefined;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { createContext } from "react";
|
|||
|
||||
export const WebpartContext = createContext<IAwardRecognitionProps>(null);
|
||||
|
||||
export const AwardRecognition = (props: IAwardRecognitionProps) => {
|
||||
export const AwardRecognition = (props: IAwardRecognitionProps): JSX.Element => {
|
||||
return (
|
||||
<WebpartContext.Provider value={props}>
|
||||
<FluentProvider
|
||||
|
|
|
|||
Loading…
Reference in New Issue