Merge pull request 'anln' (#9) from anln into main

Reviewed-on: https://git.wishpal.cn/wishpal_ironfan/tiefen_space_op/pulls/9
This commit is contained in:
yezian 2024-08-08 22:18:01 +08:00
commit b088aa6cb4
22 changed files with 21336 additions and 119 deletions

21185
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -16,6 +16,7 @@
"react": "^18.2.0", "react": "^18.2.0",
"react-cookie": "^6.1.1", "react-cookie": "^6.1.1",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-player": "^2.16.0",
"react-router-dom": "^6.14.2", "react-router-dom": "^6.14.2",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"

View File

@ -0,0 +1,17 @@
import React, { useState } from "react";
import { Select } from "antd";
import ReactPlayer from "react-player";
export default function VideoPlayer({url,key,style}) {
const [rate, setRate] = useState(1);
return (
<div key={key} >
<ReactPlayer playbackRate={rate} url={url} width={150} controls style={style}/>
<Select onChange={(e) => setRate(e)} value={rate}>
<Select.Option value={1}>x1</Select.Option>
<Select.Option value={2}>x2</Select.Option>
<Select.Option value={3}>x3</Select.Option>
<Select.Option value={5}>x5</Select.Option>
</Select>
</div>
);
}

View File

@ -1,6 +1,6 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { uploadVideo } from "../../utils/upload"; import { uploadVideo } from "../../utils/upload";
import VideoPlayer from '../VideoPlayer';
const VideoUploader = ({ setIds }) => { const VideoUploader = ({ setIds }) => {
const [selectedVideos, setSelectedVideos] = useState([]); const [selectedVideos, setSelectedVideos] = useState([]);
const [uploading, setUploading] = useState(false); const [uploading, setUploading] = useState(false);
@ -64,17 +64,12 @@ const VideoUploader = ({ setIds }) => {
<div style={{ display: "flex", flexWrap: "wrap" }}> <div style={{ display: "flex", flexWrap: "wrap" }}>
{selectedVideos.map((video, index) => ( {selectedVideos.map((video, index) => (
<div key={index} style={{ margin: "5px" }} className="relative"> <div key={index} style={{ margin: "5px" }} className="relative">
<video <VideoPlayer url={video.videoUrl} style={{
controls
src={video.videoUrl}
alt={`视频 ${index + 1}`}
style={{
width: "100px", width: "100px",
height: "100px", height: "100px",
objectFit: "cover", objectFit: "cover",
borderRadius: "8px", borderRadius: "8px",
}} }}/>
/>
{video.uploadStatus === "success" && ( {video.uploadStatus === "success" && (
<p className="absolute top-0 left-0 text-green-400 font-bold bg-black/50 flex w-full h-full items-center justify-center rounded-lg"> <p className="absolute top-0 left-0 text-green-400 font-bold bg-black/50 flex w-full h-full items-center justify-center rounded-lg">
上传成功 上传成功

View File

View File

@ -7,7 +7,7 @@ import {
useNavigate, useNavigate,
useLocation, useLocation,
} from "react-router-dom"; } from "react-router-dom";
import VideoPlayer from '../../components/VideoPlayer';
const CommentsReviewContent = (props) => { const CommentsReviewContent = (props) => {
const current = props.current; const current = props.current;
// //
@ -58,7 +58,7 @@ const CommentsReviewContent = (props) => {
style={{ marginBottom: 10 }} style={{ marginBottom: 10 }}
/> />
) : ( ) : (
<video key={item.url} src={item.url} width={150} controls /> <VideoPlayer url={item.url}/>
) )
) )
: "无"} : "无"}

View File

@ -3,7 +3,7 @@ import { Form, Input, Table, Image, Space, Button, Modal, message } from "antd";
import baseRequest from "../../utils/baseRequest"; import baseRequest from "../../utils/baseRequest";
import ImageUploader from "../../components/ImageUploader"; import ImageUploader from "../../components/ImageUploader";
import VideoUploader from "../../components/VideoUploader"; import VideoUploader from "../../components/VideoUploader";
import VideoPlayer from "../../components/VideoPlayer";
const CreateAndEditPostContent = (props) => { const CreateAndEditPostContent = (props) => {
const { TextArea } = Input; const { TextArea } = Input;
// //
@ -37,16 +37,20 @@ const CreateAndEditPostContent = (props) => {
key: "media", key: "media",
render: (data) => ( render: (data) => (
<div> <div>
{data?.images?.map((item, index) => ( <Image.PreviewGroup
<Image items={data?.images?.map((item) => item.urls[0])}
key={index} >
src={item.urls[0]} {data?.images?.map((item, index) => (
width={150} <Image
style={{ marginBottom: 10 }} key={index}
/> src={item.urls[0]}
))} width={150}
style={{ marginBottom: 10 }}
/>
))}
</Image.PreviewGroup>
{data?.videos?.map((item, index) => ( {data?.videos?.map((item, index) => (
<video key={index} src={item.urls[0]} width={150} controls /> <VideoPlayer key={index} url={item.urls[0]} />
))} ))}
</div> </div>
), ),
@ -541,12 +545,9 @@ const CreateAndEditPostContent = (props) => {
{defaultMedia.video_ids.length !== 0 && ( {defaultMedia.video_ids.length !== 0 && (
<div className="flex flex-row mt-4"> <div className="flex flex-row mt-4">
<div className="relative"> <div className="relative">
<video <div className="mr-auto">
src={defaultMedia.videos[0].urls[0]} <VideoPlayer url={defaultMedia.videos[0].urls[0]} />
width={150} </div>
controls
className="mr-auto"
/>
<Button <Button
className="absolute top-0 left-0 w-full" className="absolute top-0 left-0 w-full"
danger danger

View File

@ -1,7 +1,7 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { Form, Input, Table, Image, Space, Button, Modal, message } from "antd"; import { Form, Input, Table, Image, Space, Button, Modal, message } from "antd";
import baseRequest from "../../utils/baseRequest"; import baseRequest from "../../utils/baseRequest";
import VideoPlayer from '../../components/VideoPlayer';
export default function DeletedPostReview() { export default function DeletedPostReview() {
// //
const columns = [ const columns = [
@ -43,7 +43,7 @@ export default function DeletedPostReview() {
/> />
))} ))}
{data?.videos?.map((item, index) => ( {data?.videos?.map((item, index) => (
<video key={index} src={item.urls[0]} width={150} controls /> <VideoPlayer key={index} url={item.urls[0]}/>
))} ))}
</div> </div>
), ),

View File

@ -4,7 +4,7 @@ import baseRequest from "../../utils/baseRequest";
import ImageUploader from "../../components/ImageUploader"; import ImageUploader from "../../components/ImageUploader";
import VideoUploader from "../../components/VideoUploader"; import VideoUploader from "../../components/VideoUploader";
import { useSearchParams } from "react-router-dom"; import { useSearchParams } from "react-router-dom";
import VideoPlayer from '../../components/VideoPlayer';
const EditSpacePostContent = (props) => { const EditSpacePostContent = (props) => {
const { TextArea } = Input; const { TextArea } = Input;
const [searchParams, setSearchParams] = useSearchParams(); const [searchParams, setSearchParams] = useSearchParams();
@ -55,11 +55,13 @@ const EditSpacePostContent = (props) => {
</div> </div>
<p className="text-red-400">媒体</p> <p className="text-red-400">媒体</p>
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
<Image.PreviewGroup items={data.media.images?.map((item) => item.urls[0])}>
{data.media.images.map((item, index) => ( {data.media.images.map((item, index) => (
<Image key={index} src={item.urls[0]} width={100} /> <Image key={index} src={item.urls[0]} width={100} />
))} ))}
</Image.PreviewGroup>
{data.media.videos.map((item, index) => ( {data.media.videos.map((item, index) => (
<video key={index} src={item.urls[0]} width={150} controls /> <VideoPlayer key={index} url={item.urls[0]}/>
))} ))}
</div> </div>
</div> </div>
@ -509,12 +511,9 @@ const EditSpacePostContent = (props) => {
{defaultMedia.video_ids.length !== 0 && ( {defaultMedia.video_ids.length !== 0 && (
<div className="flex flex-row mt-4"> <div className="flex flex-row mt-4">
<div className="relative"> <div className="relative">
<video <div className="mr-auto" >
src={defaultMedia.videos[0].urls[0]} <VideoPlayer url={defaultMedia.videos[0].urls[0]}/>
width={150} </div>
controls
className="mr-auto"
/>
<Button <Button
className="absolute top-0 left-0 w-full" className="absolute top-0 left-0 w-full"
danger danger

View File

@ -8,7 +8,7 @@ import {
useLocation, useLocation,
} from "react-router-dom"; } from "react-router-dom";
import baseRequest from "../../utils/baseRequest"; import baseRequest from "../../utils/baseRequest";
import VideoPlayer from '../../components/VideoPlayer';
const FeedbackContent = (props) => { const FeedbackContent = (props) => {
const { TextArea } = Input; const { TextArea } = Input;
const current = props.current; const current = props.current;
@ -44,7 +44,7 @@ const FeedbackContent = (props) => {
/> />
))} ))}
{data.videos?.map((item, index) => ( {data.videos?.map((item, index) => (
<video key={index} src={item.urls[0]} width={150} controls /> <VideoPlayer key={index} url={item.urls[0]}/>
))} ))}
</div> </div>
), ),

View File

@ -7,7 +7,7 @@ import {
useNavigate, useNavigate,
useLocation, useLocation,
} from "react-router-dom"; } from "react-router-dom";
import VideoPlayer from '../../components/VideoPlayer';
const GoodsReviewContent = (props) => { const GoodsReviewContent = (props) => {
const { TextArea } = Input; const { TextArea } = Input;
const current = props.current; const current = props.current;
@ -49,7 +49,7 @@ const GoodsReviewContent = (props) => {
style={{ marginBottom: 10 }} style={{ marginBottom: 10 }}
/> />
) : ( ) : (
<video key={item.url} src={item.url} width={150} controls /> <VideoPlayer key={item.url} url={item.url} width={150} />
) )
) )
: "无"} : "无"}

View File

@ -53,9 +53,16 @@ const ImageMachineReviewContent = (props) => {
key: "newMedia", key: "newMedia",
render: (data) => ( render: (data) => (
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
{data?.map((item, index) => ( <Image.PreviewGroup items={data?.map((item) => item.urls[0])}>
<Image key={index} src={item.urls[0]} width={100} /> {data.map((item) => (
))} <Image
key={item.urls[0]}
src={item.urls[0]}
width={100}
style={{ marginBottom: 10 }}
/>
))}
</Image.PreviewGroup>
</div> </div>
), ),
}, },
@ -65,9 +72,9 @@ const ImageMachineReviewContent = (props) => {
key: "oldMedia", key: "oldMedia",
render: (data) => ( render: (data) => (
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
{data?.map((item, index) => ( <Image.PreviewGroup items={data?.map((item) => item.urls[0])}>
<Image key={index} src={item.urls[0]} width={100} /> <Image src={data[0].urls[0]} width={100} />
))} </Image.PreviewGroup>
</div> </div>
), ),
}, },

View File

@ -7,7 +7,7 @@ import {
useNavigate, useNavigate,
useLocation, useLocation,
} from "react-router-dom"; } from "react-router-dom";
import VideoPlayer from '../../components/VideoPlayer';
const MediaReviewContent = (props) => { const MediaReviewContent = (props) => {
const { TextArea } = Input; const { TextArea } = Input;
const current = props.current; const current = props.current;
@ -59,7 +59,7 @@ const MediaReviewContent = (props) => {
style={{ marginBottom: 10 }} style={{ marginBottom: 10 }}
/> />
) : ( ) : (
<video key={item.url} src={item.url} width={150} controls /> <VideoPlayer key={item.url} url={item.url} width={150} />
) )
) )
: "无"} : "无"}

View File

@ -8,7 +8,7 @@ import {
useLocation, useLocation,
} from "react-router-dom"; } from "react-router-dom";
import baseRequest from "../../utils/baseRequest"; import baseRequest from "../../utils/baseRequest";
import VideoPlayer from '../../components/VideoPlayer';
const PostMachineReviewContent = (props) => { const PostMachineReviewContent = (props) => {
const { TextArea } = Input; const { TextArea } = Input;
const current = props.current; const current = props.current;
@ -47,7 +47,7 @@ const PostMachineReviewContent = (props) => {
<Image key={index} src={item.urls[0]} width={100} /> <Image key={index} src={item.urls[0]} width={100} />
))} ))}
{data.media?.videos?.map((item, index) => ( {data.media?.videos?.map((item, index) => (
<video key={index} src={item.urls[0]} width={150} controls /> <VideoPlayer key={index} url={item.urls[0]} width={150} />
))} ))}
</div> </div>
</div> </div>
@ -68,7 +68,7 @@ const PostMachineReviewContent = (props) => {
<Image key={index} src={item.urls[0]} width={100} /> <Image key={index} src={item.urls[0]} width={100} />
))} ))}
{data.media?.videos?.map((item, index) => ( {data.media?.videos?.map((item, index) => (
<video key={index} src={item.urls[0]} width={150} controls /> <VideoPlayer key={index} url={item.urls[0]} width={150} />
))} ))}
</div> </div>
</div> </div>

View File

@ -53,9 +53,11 @@ const StreamerImageMachineReviewContent = (props) => {
key: "newMedia", key: "newMedia",
render: (data) => ( render: (data) => (
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
{data?.map((item, index) => ( <Image.PreviewGroup items={data?.map((item) => item.urls[0])}>
<Image key={index} src={item.urls[0]} width={100} /> {data?.map((item, index) => (
))} <Image key={index} src={item.urls[0]} width={100} />
))}
</Image.PreviewGroup>
</div> </div>
), ),
}, },
@ -65,9 +67,11 @@ const StreamerImageMachineReviewContent = (props) => {
key: "oldMedia", key: "oldMedia",
render: (data) => ( render: (data) => (
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
{data?.map((item, index) => ( <Image.PreviewGroup items={data?.map((item) => item.urls[0])}>
<Image key={index} src={item.urls[0]} width={100} /> {data?.map((item, index) => (
))} <Image key={index} src={item.urls[0]} width={100} />
))}
</Image.PreviewGroup>
</div> </div>
), ),
}, },

View File

@ -13,7 +13,7 @@ import Modal from "../../components/Modal";
import VideoUploader from "../../components/VideoUploader"; import VideoUploader from "../../components/VideoUploader";
import ImageUploader from "../../components/ImageUploader"; import ImageUploader from "../../components/ImageUploader";
import baseRequest from "../../utils/baseRequest"; import baseRequest from "../../utils/baseRequest";
import VideoPlayer from '../../components/VideoPlayer';
//tab //tab
const StreamerInformationContent = () => { const StreamerInformationContent = () => {
const { TextArea } = Input; const { TextArea } = Input;
@ -120,7 +120,7 @@ const StreamerInformationContent = () => {
dataIndex: "displayVideo", dataIndex: "displayVideo",
key: "displayVideo", key: "displayVideo",
render: (data) => ( render: (data) => (
<video src={data[0].urls[0]} width={150} controls /> <VideoPlayer url={data[0].urls[0]} width={150} />
), ),
}; };
case "displayGallery": case "displayGallery":
@ -130,14 +130,16 @@ const StreamerInformationContent = () => {
key: "displayGallery", key: "displayGallery",
render: (data) => ( render: (data) => (
<div> <div>
{data.map((item) => ( <Image.PreviewGroup items={data?.map((item) => item.urls[0])}>
<Image {data.map((item) => (
key={item.urls[0]} <Image
src={item.urls[0]} key={item.urls[0]}
width={100} src={item.urls[0]}
style={{ marginBottom: 10 }} width={100}
/> style={{ marginBottom: 10 }}
))} />
))}
</Image.PreviewGroup>
</div> </div>
), ),
}; };
@ -751,11 +753,7 @@ const StreamerInformationContent = () => {
</p> </p>
{defaultMedia.displayVideo.length !== 0 && ( {defaultMedia.displayVideo.length !== 0 && (
<div className="relative"> <div className="relative">
<video <VideoPlayer url={defaultMedia.displayVideo[0].urls[0]} width={150} />
src={defaultMedia.displayVideo[0].urls[0]}
width={150}
controls
/>
<Button <Button
className="absolute top-0 left-0 w-full" className="absolute top-0 left-0 w-full"
danger danger

View File

@ -8,7 +8,7 @@ import {
useLocation, useLocation,
} from "react-router-dom"; } from "react-router-dom";
import baseRequest from "../../utils/baseRequest"; import baseRequest from "../../utils/baseRequest";
import VideoPlayer from '../../components/VideoPlayer';
const JoinContent = (props) => { const JoinContent = (props) => {
const { TextArea } = Input; const { TextArea } = Input;
const current = props.current; const current = props.current;
@ -104,7 +104,7 @@ const JoinContent = (props) => {
title: "封面视频", title: "封面视频",
dataIndex: "displayVideo", dataIndex: "displayVideo",
key: "displayVideo", key: "displayVideo",
render: (data) => <video src={data[0].urls[0]} width={150} controls />, render: (data) => <VideoPlayer url={data[0].urls[0]} width={150} />,
}, },
{ {
title: "相册", title: "相册",
@ -112,14 +112,16 @@ const JoinContent = (props) => {
key: "displayGallery", key: "displayGallery",
render: (data) => ( render: (data) => (
<div> <div>
{data.map((item) => ( <Image.PreviewGroup items={data?.map((item) => item.urls[0])}>
<Image {data.map((item) => (
key={item.urls[0]} <Image
src={item.urls[0]} key={item.urls[0]}
width={100} src={item.urls[0]}
style={{ marginBottom: 10 }} width={100}
/> style={{ marginBottom: 10 }}
))} />
))}
</Image.PreviewGroup>
</div> </div>
), ),
}, },

View File

@ -1,5 +1,5 @@
import React, { useState, useRef, useEffect } from "react"; import React, { useState, useRef, useEffect } from "react";
import { Form, Input, Button, Space, Table, Menu, Image } from "antd"; import { Form, Input, Button, Space, Table, Menu, Image, Select } from "antd";
import { import {
Routes, Routes,
Route, Route,
@ -8,7 +8,7 @@ import {
useLocation, useLocation,
} from "react-router-dom"; } from "react-router-dom";
import baseRequest from "../../utils/baseRequest"; import baseRequest from "../../utils/baseRequest";
import VideoPlayer from "../../components/VideoPlayer"
const JoinContent = (props) => { const JoinContent = (props) => {
const { TextArea } = Input; const { TextArea } = Input;
const current = props.current; const current = props.current;
@ -133,7 +133,7 @@ const JoinContent = (props) => {
title: "封面视频", title: "封面视频",
dataIndex: "displayVideo", dataIndex: "displayVideo",
key: "displayVideo", key: "displayVideo",
render: (data) => <video src={data} width={150} controls />, render: (data) => <VideoPlayer url={data}/>,
}, },
{ {
title: "相册", title: "相册",
@ -141,14 +141,16 @@ const JoinContent = (props) => {
key: "displayGallery", key: "displayGallery",
render: (data) => ( render: (data) => (
<div> <div>
{data.map((item) => ( <Image.PreviewGroup items={data?.map((item) => item.urls[0])}>
<Image {data.map((item) => (
key={item.urls[0]} <Image
src={item.urls[0]} key={item.urls[0]}
width={100} src={item.urls[0]}
style={{ marginBottom: 10 }} width={100}
/> style={{ marginBottom: 10 }}
))} />
))}
</Image.PreviewGroup>
</div> </div>
), ),
}, },

View File

@ -51,14 +51,16 @@ const VerificationContent = (props) => {
key: "ID_card_photos", key: "ID_card_photos",
render: (data) => ( render: (data) => (
<div> <div>
{data.map((item, index) => ( <Image.PreviewGroup items={data?.map((item) => item.urls[0])}>
<Image {data.map((item) => (
key={index} <Image
className="mb-2" key={item.urls[0]}
src={item.urls[0]} src={item.urls[0]}
width={100} width={100}
/> style={{ marginBottom: 10 }}
))} />
))}
</Image.PreviewGroup>
</div> </div>
), ),
}, },

View File

@ -8,7 +8,7 @@ import {
useLocation, useLocation,
} from "react-router-dom"; } from "react-router-dom";
import baseRequest from "../../utils/baseRequest"; import baseRequest from "../../utils/baseRequest";
import VideoPlayer from '../../components/VideoPlayer';
const StreamerVideoMachineReviewContent = (props) => { const StreamerVideoMachineReviewContent = (props) => {
const { TextArea } = Input; const { TextArea } = Input;
const current = props.current; const current = props.current;
@ -48,7 +48,7 @@ const StreamerVideoMachineReviewContent = (props) => {
render: (data) => ( render: (data) => (
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
{data?.map((item, index) => ( {data?.map((item, index) => (
<video key={index} src={item.urls[0]} width={150} controls /> <VideoPlayer url={item.urls[0]}width={150}/>
))} ))}
</div> </div>
), ),
@ -60,7 +60,7 @@ const StreamerVideoMachineReviewContent = (props) => {
render: (data) => ( render: (data) => (
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
{data?.map((item, index) => ( {data?.map((item, index) => (
<video key={index} src={item.urls[0]} width={150} controls /> <VideoPlayer key={index} url={item.urls[0]} width={150} />
))} ))}
</div> </div>
), ),

View File

@ -1,7 +1,7 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { Form, Input, Table, Image, Space, Button, Modal, message } from "antd"; import { Form, Input, Table, Image, Space, Button, Modal, message } from "antd";
import baseRequest from "../../utils/baseRequest"; import baseRequest from "../../utils/baseRequest";
import VideoPlayer from "../../components/VideoPlayer";
const TopPostsContent = (props) => { const TopPostsContent = (props) => {
// //
const columns = [ const columns = [
@ -34,16 +34,18 @@ const TopPostsContent = (props) => {
key: "media", key: "media",
render: (data) => ( render: (data) => (
<div> <div>
{data?.images?.map((item, index) => ( <Image.PreviewGroup items={data?.images?.map((item) => item.urls[0])}>
<Image {data?.images?.map((item, index) => (
key={index} <Image
src={item.urls[0]} key={index}
width={150} src={item.urls[0]}
style={{ marginBottom: 10 }} width={150}
/> style={{ marginBottom: 10 }}
))} />
))}
</Image.PreviewGroup>
{data?.videos?.map((item, index) => ( {data?.videos?.map((item, index) => (
<video key={index} src={item.urls[0]} width={150} controls /> <VideoPlayer key={index} url={item.urls[0]} width={150} />
))} ))}
</div> </div>
), ),

View File

@ -8,7 +8,7 @@ import {
useLocation, useLocation,
} from "react-router-dom"; } from "react-router-dom";
import baseRequest from "../../utils/baseRequest"; import baseRequest from "../../utils/baseRequest";
import VideoPlayer from "../../components/VideoPlayer";
const ZonePostMachineReviewContent = (props) => { const ZonePostMachineReviewContent = (props) => {
const { TextArea } = Input; const { TextArea } = Input;
const current = props.current; const current = props.current;
@ -48,11 +48,13 @@ const ZonePostMachineReviewContent = (props) => {
</div> </div>
<p className="text-red-400">媒体</p> <p className="text-red-400">媒体</p>
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
{data.media.images.map((item, index) => ( <Image.PreviewGroup items={data.media.images?.map((item) => item.urls[0])}>
<Image key={index} src={item.urls[0]} width={100} /> {data.media.images.map((item, index) => (
))} <Image key={index} src={item.urls[0]} width={100} />
))}
</Image.PreviewGroup>
{data.media.videos.map((item, index) => ( {data.media.videos.map((item, index) => (
<video key={index} src={item.urls[0]} width={150} controls /> <VideoPlayer key={index} url={item.urls[0]} width={150} />
))} ))}
</div> </div>
</div> </div>