implement Speakers screen

fixes #242

shared/src/commonMain/composeResources/values/strings.xml

@@ -88,4 +88,5 @@ We will process your data in accordance with the App Privacy Policy. You can adj
     <string name="privacy_policy_for_visitors_title">KotlinConf 2024 Privacy Policy for Visitors</string>
     <string name="privacy_policy_for_visitors_version">Version 1.0 of May 1, 2024</string>
 
+    <string name="speakers_title">Speakers</string>
 </resources>

shared/src/commonMain/kotlin/org/jetbrains/kotlinconf/screens/Speakers.kt

@@ -1,34 +1,53 @@
 package org.jetbrains.kotlinconf.screens
 
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.unit.dp
 import kotlinconfapp.shared.generated.resources.Res
-import kotlinconfapp.shared.generated.resources.arrow_left_24
-import org.jetbrains.compose.resources.painterResource
+import kotlinconfapp.shared.generated.resources.speakers_title
+import org.jetbrains.compose.resources.stringResource
 import org.jetbrains.kotlinconf.SpeakerId
 import org.jetbrains.kotlinconf.Speakers
-import org.jetbrains.kotlinconf.ui.components.StyledText
+import org.jetbrains.kotlinconf.ui.components.Divider
+import org.jetbrains.kotlinconf.ui.components.MainHeaderTitleBar
+import org.jetbrains.kotlinconf.ui.theme.KotlinConfTheme
 
 @Composable
 fun Speakers(
     speakers: Speakers,
     onSpeaker: (SpeakerId) -> Unit,
     onBack: () -> Unit,
 ) {
-    Column {
-        Image(
-            painterResource(Res.drawable.arrow_left_24),
-            "back",
-            modifier = Modifier.clickable { onBack() })
-        StyledText("Speakers")
-        for (speaker in speakers.all) {
-            StyledText(
-                speaker.name,
-                modifier = Modifier.clickable { onSpeaker(speaker.id) }
-            )
+    Column(Modifier.fillMaxSize()) {
+        MainHeaderTitleBar(stringResource(Res.string.speakers_title))
+        Divider(1.dp, KotlinConfTheme.colors.strokePale)
+
+        Column(
+            Modifier
+                .verticalScroll(rememberScrollState())
+                .fillMaxSize()
+        ) {
+            for (speaker in speakers.all) {
+                org.jetbrains.kotlinconf.ui.components.Speaker(
+                    name = speaker.name,
+                    title = speaker.position,
+                    photoUrl = speaker.photoUrl,
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(12.dp)
+                        .clip(RoundedCornerShape(8.dp))
+                        .clickable { onSpeaker(speaker.id) }
+                )
+            }
         }
     }
 }