$re = '/Zwechfreibaum01/m';
$str = '//++++++++++08++++++++++++++++++++
/+++++++++++ App.jsx ++++++++++++
import React from "react";
import PictureListAs05 from "./components/PictureListAs05.jsx";
import PictureListAs06 from "./components/PictureListAs06.jsx";
export default function App() {
return (
<div>
<h1>AS05 – Bilderliste</h1>
<div style={{ display: "flex", gap: "2rem" }}>
<PictureListAs05 grenze={80} farbe1="green" farbe2="red" />
<PictureListAs06 grenze={100} farbe1="blue" farbe2="orange" />
</div>
</div>
);
}
//+++++++++++++ PictureList05.jsx +++++++++++++++++++++++++
import React from "react";
import ShowPictureList from "./ShowPictureList.jsx";
const BILDER = [
{ url: "https://picsum.photos/seed/a/400", alt: "Wald", datum: "2025-02-01", zahl: 120 },
{ url: "https://picsum.photos/seed/b/400", alt: "Gebirge", datum: "2025-02-02", zahl: 60 },
{ url: "https://picsum.photos/seed/c/400", alt: "Meer", datum: "2025-02-03", zahl: 200 },
{ url: "https://picsum.photos/seed/d/400", alt: "Stadt", datum: "2025-02-04", zahl: 75 },
{ url: "https://picsum.photos/seed/e/400", alt: "Wüste", datum: "2025-02-05", zahl: 95 },
{ url: "https://picsum.photos/seed/f/400", alt: "Wiese", datum: "2025-02-06", zahl: 50 },
];
export default function PictureListAs05({ grenze, farbe1, farbe2 }) {
const GRENZE = grenze;
const FARBE1 = farbe1;
const FARBE2 = farbe2;
return (
<div>
<ShowPictureList
bilder={BILDER}
grenze={GRENZE}
farbe1={FARBE1}
farbe2={FARBE2}
/>
</div>
);
}
//++++++++++++++ PictureList06.jsx+++++++++++++++++++++++
import React from "react";
import ShowPictureList from "./ShowPictureList.jsx";
const BILDER = [
{ url: "https://placebear.com/400/400", alt: "Bär im Wald", datum: "2025-02-01", zahl: 120 },
{ url: "https://placebear.com/401/400", alt: "Bär am Berg", datum: "2025-02-02", zahl: 60 },
{ url: "https://placebear.com/402/400", alt: "Bär am See", datum: "2025-02-03", zahl: 200 },
{ url: "https://placebear.com/403/400", alt: "Bär in der Stadt",datum: "2025-02-04", zahl: 75 },
{ url: "https://placebear.com/404/400", alt: "Bär in der Wüste",datum: "2025-02-05", zahl: 95 },
{ url: "https://placebear.com/405/400", alt: "Bär auf der Wiese",datum: "2025-02-06", zahl: 50 },
];
export default function PictureListAs06({ grenze, farbe1, farbe2 }) {
const GRENZE = grenze;
const FARBE1 = farbe1;
const FARBE2 = farbe2;
return (
<div>
<ShowPictureList
bilder={BILDER}
grenze={GRENZE}
farbe1={FARBE1}
farbe2={FARBE2}
/>
</div>
);
}
//+++++++++++++++++++ PictureList.jsx ++++++++++++++++++++
import React, { useState } from "react";
export default function ShowPictureList({ bilder, grenze, farbe1, farbe2 }) {
const threshold = Number(grenze) || 0;
const imageArrayIndex = useState(0);
const currentIndex = imageArrayIndex[0];
const setCurrentIndex = imageArrayIndex[1];
const borderColor = bilder[currentIndex].zahl > threshold ? farbe1 : farbe2;
const currentImage = bilder[currentIndex];
return (
<>
<ul>
return (
<li key={currentIndex}>
<img
src={currentImage.url}
alt={currentImage.alt}
width={currentImage.zahl}
style={{ border: `4px solid ${borderColor}` }}
/>
<p>{currentImage.alt}</p>
<small>{currentImage.datum}</small>
</li>
);
</ul>
<button onClick={() => setCurrentIndex(currentIndex + 1)}>
Nächstes Bild
</button>
<button onClick={() => setCurrentIndex(currentIndex - 1)}>
Vorheriges Bild
</button>
</>
);
}
//++++++++++ main.jsx +++++++++++++++++++
import { StrictMode } from \'react\'
import { createRoot } from \'react-dom/client\'
import App from \'./App.jsx\'
createRoot(document.getElementById(\'root\')).render(
<StrictMode>
<App />
</StrictMode>,
)
';
preg_match_all($re, $str, $matches, PREG_SET_ORDER, 0);
// Print the entire match result
var_dump($matches);
Please keep in mind that these code samples are automatically generated and are not guaranteed to work. If you find any syntax errors, feel free to submit a bug report. For a full regex reference for PHP, please visit: http://php.net/manual/en/ref.pcre.php