Skip to content

Commit

Permalink
Enable .svg images for the kitsGallery.js
Browse files Browse the repository at this point in the history
  • Loading branch information
jSchuetz88 committed Nov 14, 2024
1 parent fd859a8 commit 0a15fea
Show file tree
Hide file tree
Showing 4 changed files with 94 additions and 73 deletions.
11 changes: 8 additions & 3 deletions src/components/CarouselComponent/index.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
/*********************************************************************************
* Copyright (c) 2023 BMW Group AG
* Copyright (c) 2023 Mercedes Benz AG
* Copyright (c) 2023 Contributors to the Eclipse Foundation
* Copyright (c) 2024 Catena-X Automotive Network e.V.
* Copyright (c) 2024 Contributors to the Eclipse Foundation
*
* See the NOTICE file(s) distributed with this work for additional
* information regarding copyright ownership.
Expand All @@ -17,7 +18,7 @@
* under the License.
*
* SPDX-License-Identifier: Apache-2.0
********************************************************************************/
********************************************************************************/

import React from "react";
import Link from "@docusaurus/Link";
Expand Down Expand Up @@ -71,7 +72,11 @@
return (
<div key={kit.id} className={styles.slider_item}>
<Link className={styles.slider_content} to={kit.pageRoute}>
<img src={kit.img} className={styles.slider_img}/>
{typeof kit.img === 'function' ? (
<kit.img className={styles.item_img} alt={kit.name} />
) : (
<img src={kit.img} className={styles.item_img} alt={kit.name} />
)}
</Link>
</div>
)
Expand Down
106 changes: 56 additions & 50 deletions src/components/KitsGallery/index.js
Original file line number Diff line number Diff line change
@@ -1,52 +1,58 @@
/*********************************************************************************
* Copyright (c) 2023 BMW Group AG
* Copyright (c) 2023 Mercedes Benz AG
* Copyright (c) 2023 Contributors to the Eclipse Foundation
*
* See the NOTICE file(s) distributed with this work for additional
* information regarding copyright ownership.
*
* This program and the accompanying materials are made available under the
* terms of the Apache License, Version 2.0 which is available at
* https://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* SPDX-License-Identifier: Apache-2.0
********************************************************************************/
* Copyright (c) 2023 BMW Group AG
* Copyright (c) 2023 Mercedes Benz AG
* Copyright (c) 2024 Catena-X Automotive Network e.V.
* Copyright (c) 2024 Contributors to the Eclipse Foundation
*
* See the NOTICE file(s) distributed with this work for additional
* information regarding copyright ownership.
*
* This program and the accompanying materials are made available under the
* terms of the Apache License, Version 2.0 which is available at
* https://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* SPDX-License-Identifier: Apache-2.0
********************************************************************************/

import React from "react";
import Link from "@docusaurus/Link";
import styles from "./styles.module.css";

export default function KitsGallery({itemsArray, title, description}) {
return (
<section className={styles.kits_gallery}>
<div className={styles.container}>

<div className={styles.title_container}>
<h2 className="title-h2">{title}</h2>
<p className="subtitle-h3">{description}</p>
</div>

<div className={styles.gallery_container}>
{
itemsArray.map((kit, index)=> {
return(
<div key={index} className={styles.gallery_item}>
<Link to={kit.pageRoute} className={styles.gallery_link}>
<img src={kit.img} className={styles.item_img}/>
</Link>
</div>
)
})
}
</div>
</div>
</section>
);
}
import React from "react";
import Link from "@docusaurus/Link";
import styles from "./styles.module.css";

export default function KitsGallery({itemsArray, title, description}) {
return (
<section className={styles.kits_gallery}>
<div className={styles.container}>

<div className={styles.title_container}>
<h2 className="title-h2">{title}</h2>
<p className="subtitle-h3">{description}</p>
</div>

<div className={styles.gallery_container}>
{
itemsArray.map((kit, index)=> {
return(
<div key={index} className={styles.gallery_item}>
<Link to={kit.pageRoute} className={styles.gallery_link}>
{typeof kit.img === 'function' ? (
<kit.img className={styles.item_img} alt={kit.name} />
) : (
<img src={kit.img} className={styles.item_img} alt={kit.name} />
)}
</Link>
</div>
)
})
}
</div>
</div>
</section>
);
}

9 changes: 7 additions & 2 deletions src/components/KitsGalleryMDX/index.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
/*********************************************************************************
* Copyright (c) 2023 BMW Group AG
* Copyright (c) 2023 Mercedes Benz AG
* Copyright (c) 2023 Contributors to the Eclipse Foundation
* Copyright (c) 2024 Catena-X Automotive Network e.V.
* Copyright (c) 2024 Contributors to the Eclipse Foundation
*
* See the NOTICE file(s) distributed with this work for additional
* information regarding copyright ownership.
Expand Down Expand Up @@ -39,7 +40,11 @@
return(
<div key={index} className={styles.gallery_item}>
<Link to={kit.pageRoute} className={styles.gallery_link}>
<img src={kit.img} className={styles.item_img}/>
{typeof kit.img === 'function' ? (
<kit.img className={styles.item_img} alt={kit.name} />
) : (
<img src={kit.img} className={styles.item_img} alt={kit.name} />
)}
</Link>
</div>
)
Expand Down
41 changes: 23 additions & 18 deletions src/components/KitsGalleryWithFilters/index.js
Original file line number Diff line number Diff line change
@@ -1,22 +1,23 @@
/*********************************************************************************
* Copyright (c) 2023 BMW Group AG
* Copyright (c) 2023 Mercedes Benz AG
* Copyright (c) 2023 Contributors to the Eclipse Foundation
*
* See the NOTICE file(s) distributed with this work for additional
* information regarding copyright ownership.
*
* This program and the accompanying materials are made available under the
* terms of the Apache License, Version 2.0 which is available at
* https://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* SPDX-License-Identifier: Apache-2.0
* Copyright (c) 2023 Mercedes Benz AG
* Copyright (c) 2024 Catena-X Automotive Network e.V.
* Copyright (c) 2024 Contributors to the Eclipse Foundation
*
* See the NOTICE file(s) distributed with this work for additional
* information regarding copyright ownership.
*
* This program and the accompanying materials are made available under the
* terms of the Apache License, Version 2.0 which is available at
* https://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* SPDX-License-Identifier: Apache-2.0
********************************************************************************/

import React, { useState, useEffect } from "react";
Expand Down Expand Up @@ -167,7 +168,11 @@ export default function KitsGalleryWithFilters({itemsArray, title, description})
return(
<div key={index} className={styles.gallery_item}>
<Link to={kit.pageRoute} className={styles.gallery_link}>
<img src={kit.img} className={styles.item_img}/>
{typeof kit.img === 'function' ? (
<kit.img className={styles.item_img} alt={kit.name} />
) : (
<img src={kit.img} className={styles.item_img} alt={kit.name} />
)}
</Link>
</div>
)
Expand Down

0 comments on commit 0a15fea

Please sign in to comment.