diff --git a/src/Sidebar/SidebarListElement.tsx b/src/Sidebar/SidebarListElement.tsx index 5ef17e3b019fee5dca3430bf7f8f7f406473edf8..ebd09c0aac3e5b709962059d16e880368e7fa351 100644 --- a/src/Sidebar/SidebarListElement.tsx +++ b/src/Sidebar/SidebarListElement.tsx @@ -12,10 +12,9 @@ const SidebarListElement: React.FC<Props> = ({ value, ...restProps }) => { {...restProps} className="border-2 border-black border-opacity-20 hover:border-opacity-40 cursor-pointer rounded-lg overflow-hidden mx-4 my-2" > - <div className="p-4"> + <div className="p-3"> <h2 className="tracking-widest text-xs title-font font-medium text-gray-400 mb-1">{value.category}</h2> - <h1 className="title-font text-lg font-medium text-gray-900 mb-3">{value.name}</h1> - <p className="leading-relaxed">{value.description}</p> + <h1 className="title-font text-lg font-medium text-gray-900">{value.name}</h1> </div> </div> ) diff --git a/src/Sidebar/SidebarSingleView.tsx b/src/Sidebar/SidebarSingleView.tsx index 1955efbdccef58f00d7a82fc2033df8ba04a0f3e..7cde8f1df06848cdd1e32a8879fe2c1f3ec9c381 100644 --- a/src/Sidebar/SidebarSingleView.tsx +++ b/src/Sidebar/SidebarSingleView.tsx @@ -10,6 +10,7 @@ interface Props { } const SidebarSingleView: React.FC<Props> = ({ value, onClose, ...restProps }) => { + const strippedUrl = value?.website?.replace(/(^\w+:|^)\/\//, ''); return ( <SidebarContainer className="relative p-0" {...restProps}> <CloseIcon @@ -18,20 +19,16 @@ const SidebarSingleView: React.FC<Props> = ({ value, onClose, ...restProps }) => onClick={onClose} /> - <img - className="lg:h-48 md:h-36 w-full object-cover object-center" - src="https://picsum.photos/720/400" - alt="blog" - /> + <img className="lg:h-48 md:h-36 w-full object-cover object-center" src={value.image} alt="blog" /> <div className="p-6"> <h2 className="tracking-widest text-xs title-font font-medium text-gray-400 mb-1">{value.category}</h2> <h1 className="title-font text-lg font-medium text-gray-900 mb-3">{value.name}</h1> - <p className="leading-relaxed mb-3">{value.description}</p> + <p className="leading-relaxed mb-6">{value.description}</p> {value.website && ( <div className={'flex items-center'}> - <HomeIcon size={20} className={'text-gray-500 mr-2'} /> - <a className={'hover:underline'} href={value.website}> - {value.website.replace(/(^\w+:|^)\/\//, '')} + <HomeIcon size={18} className={'text-gray-500 mr-2'} /> + <a className={'text-sm text-gray-500 hover:underline'} href={value.website}> + {strippedUrl} </a> </div> )} diff --git a/src/testData.json b/src/testData.json index b19fb83458fa9147ec5a4d2a7dcc71e4f2eb0548..218bdbffd0ee410ee9a78f1028c05563cbae37c2 100644 --- a/src/testData.json +++ b/src/testData.json @@ -2,11 +2,12 @@ { "id": 1, "latlng": [53.550359, 9.986701], - "name": "Welcome Werkstatt e. V.", + "name": "Welcome Werkstatt e. V.", "description": "Eine offene Stadtteilwerkstatt in Barmbek-Süd. Hier kann mit Holz, Metall und Elektronik gearbeitet werden.", "address": "Bachstr. 98, 22083 Hamburg", "category": "OFFENE WERKSTATT", - "website": "https://www.welcome-werkstatt.de/" + "website": "https://www.welcome-werkstatt.de/", + "image": "https://picsum.photos/720/400?random=1" }, { "id": 2, @@ -15,7 +16,8 @@ "description": "Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.", "address": "Mozartstr. 8, 22081 Hamburg", "category": "OFFENE WERKSTATT", - "website": "http://www.fablab-hamburg.org/" + "website": "http://www.fablab-hamburg.org/", + "image": "https://picsum.photos/720/400?random=2" }, { "id": 3, @@ -24,7 +26,8 @@ "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.", "address": "Langer-Straßen-Name. 128, 22089 Hamburg", "category": "OFFENE WERKSTATT", - "website": "https://hofalab.de/de/home-de/" + "website": "https://hofalab.de/de/home-de/", + "image": "https://picsum.photos/720/400?random=3" }, { "id": 4, @@ -32,7 +35,8 @@ "name": "Fab City Haus", "description": "Eine offene Stadtteilwerkstatt in Barmbek-Süd. Hier kann mit Holz, Metall und Elektronik gearbeitet werden.", "address": "Jungfernstieg 1, 22083 Hamburg", - "category": "OFFENE WERKSTATT" + "category": "OFFENE WERKSTATT", + "image": "https://picsum.photos/720/400?random=4" }, { "id": 5, @@ -40,6 +44,7 @@ "name": "Haus Drei e. V.", "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.", "address": "Hein-Hoyer-Allee 36, 22083 Hamburg", - "category": "OFFENE WERKSTATT" + "category": "OFFENE WERKSTATT", + "image": "https://picsum.photos/720/400?random=5" } ] diff --git a/src/types/PointOfInterest.ts b/src/types/PointOfInterest.ts index 47bec6c14ec3dfcc6ac2daf137df0f21664eabde..bd523fb1d3d2e1e94be23506fc30d4fdf647fd2e 100644 --- a/src/types/PointOfInterest.ts +++ b/src/types/PointOfInterest.ts @@ -8,6 +8,7 @@ export interface PointOfInterest { address: string; category: string; website?: string; + image: string; } interface Map {