Add second set of components

ui-components/src/commonMain/kotlin/org/jetbrains/kotlinconf/ui/components/CardTag.kt

@@ -0,0 +1,64 @@
+package org.jetbrains.kotlinconf.ui.components
+
+import androidx.compose.animation.animateColorAsState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.unit.dp
+import org.jetbrains.compose.ui.tooling.preview.Preview
+import org.jetbrains.kotlinconf.ui.theme.KotlinConfTheme
+import org.jetbrains.kotlinconf.ui.theme.PreviewHelper
+
+private val CardTagShape = RoundedCornerShape(size = 4.dp)
+
+@Composable
+fun CardTag(
+    label: String,
+    selected: Boolean,
+    onSelect: (Boolean) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val backgroundColor by animateColorAsState(
+        if (selected) KotlinConfTheme.colors.primaryBackground
+        else KotlinConfTheme.colors.tileBackground
+    )
+    val textColor by animateColorAsState(
+        if (selected) KotlinConfTheme.colors.primaryTextInverted
+        else KotlinConfTheme.colors.secondaryText
+    )
+
+    Box(
+        modifier = modifier
+            .heightIn(min = 20.dp)
+            .clip(CardTagShape)
+            .clickable(onClick = { onSelect(!selected) })
+            .background(backgroundColor)
+            .padding(horizontal = 4.dp),
+        contentAlignment = Alignment.Center,
+    ) {
+        StyledText(
+            label,
+            style = KotlinConfTheme.typography.text2,
+            color = textColor,
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun CardTagPreview() {
+    PreviewHelper {
+        var state1 by remember { mutableStateOf(false) }
+        CardTag("Label", state1, { state1 = it })
+
+        var state2 by remember { mutableStateOf(true) }
+        CardTag("Label", state2, { state2 = it })
+    }
+}

ui-components/src/commonMain/kotlin/org/jetbrains/kotlinconf/ui/components/FiltersTag.kt

@@ -0,0 +1,74 @@
+package org.jetbrains.kotlinconf.ui.components
+
+import androidx.compose.animation.animateColorAsState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import org.jetbrains.compose.ui.tooling.preview.Preview
+import org.jetbrains.kotlinconf.ui.theme.KotlinConfTheme
+import org.jetbrains.kotlinconf.ui.theme.PreviewHelper
+
+
+private val FilterTagShape = RoundedCornerShape(size = 3.dp)
+
+@Composable
+fun FilterTag(
+    label: String,
+    selected: Boolean,
+    onSelect: (Boolean) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val backgroundColor by animateColorAsState(
+        if (selected) KotlinConfTheme.colors.primaryBackground
+        else KotlinConfTheme.colors.mainBackground
+    )
+    val textColor by animateColorAsState(
+        if (selected) KotlinConfTheme.colors.primaryTextInverted
+        else KotlinConfTheme.colors.primaryText
+    )
+    val strokeColor by animateColorAsState(
+        if (selected) Color.Transparent
+        else KotlinConfTheme.colors.strokeFull
+    )
+
+    Box(
+        modifier = modifier
+            .clip(FilterTagShape)
+            .border(
+                width = 1.dp,
+                color = strokeColor,
+                shape = FilterTagShape,
+            )
+            .clickable(onClick = { onSelect(!selected) })
+            .background(backgroundColor)
+            .padding(horizontal = 12.dp, vertical = 6.dp),
+        contentAlignment = Alignment.Center,
+    ) {
+        StyledText(
+            label,
+            style = KotlinConfTheme.typography.text1,
+            color = textColor,
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun FilterTagPreview() {
+    PreviewHelper {
+        var state1 by remember { mutableStateOf(false) }
+        FilterTag("Label", state1, { state1 = it })
+
+        var state2 by remember { mutableStateOf(true) }
+        FilterTag("Label", state2, { state2 = it })
+    }
+}

ui-components/src/commonMain/kotlin/org/jetbrains/kotlinconf/ui/components/NowButton.kt

@@ -0,0 +1,85 @@
+package org.jetbrains.kotlinconf.ui.components
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.animateColorAsState
+import androidx.compose.animation.animateContentSize
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.gestures.snapping.SnapPosition
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.unit.dp
+import kotlinconfapp.ui_components.generated.resources.Res
+import kotlinconfapp.ui_components.generated.resources.arrow_down_16
+import org.jetbrains.compose.resources.painterResource
+import org.jetbrains.compose.ui.tooling.preview.Preview
+import org.jetbrains.kotlinconf.ui.theme.KotlinConfTheme
+import org.jetbrains.kotlinconf.ui.theme.PreviewHelper
+
+private val NowButtonShape = RoundedCornerShape(
+    topEndPercent = 50,
+    bottomEndPercent = 50,
+)
+
+@Composable
+fun NowButton(
+    enabled: Boolean,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val textColor by animateColorAsState(
+        if (enabled) KotlinConfTheme.colors.primaryTextInverted
+        else KotlinConfTheme.colors.noteText
+    )
+    val background by animateColorAsState(
+        if (enabled) KotlinConfTheme.colors.primaryBackground
+        else KotlinConfTheme.colors.tileBackground
+    )
+
+    Row(
+        modifier = modifier
+            .clip(NowButtonShape)
+            .clickable(onClick = onClick, enabled = enabled)
+            .background(background)
+            .animateContentSize()
+            .width(72.dp)
+            .heightIn(min = 36.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(2.dp, Alignment.CenterHorizontally),
+    ) {
+        StyledText(
+            text = "Now",
+            style = KotlinConfTheme.typography.text2,
+            color = textColor,
+        )
+
+        AnimatedVisibility(enabled) {
+            Icon(
+                // TODO review icon sizing later
+                painter = painterResource(Res.drawable.arrow_down_16),
+                contentDescription = "Now",
+                modifier = Modifier.size(16.dp),
+                tint = textColor,
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun NowButtonPreview() {
+    PreviewHelper {
+        NowButton(true, {})
+        NowButton(false, {})
+    }
+}

ui-components/src/commonMain/kotlin/org/jetbrains/kotlinconf/ui/components/TopMenuButton.kt

@@ -0,0 +1,62 @@
+package org.jetbrains.kotlinconf.ui.components
+
+import androidx.compose.animation.animateColorAsState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.Icon
+import androidx.compose.runtime.*
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import kotlinconfapp.ui_components.generated.resources.Res
+import kotlinconfapp.ui_components.generated.resources.bookmark_24
+import org.jetbrains.compose.resources.painterResource
+import org.jetbrains.compose.ui.tooling.preview.Preview
+import org.jetbrains.kotlinconf.ui.theme.KotlinConfTheme
+import org.jetbrains.kotlinconf.ui.theme.PreviewHelper
+
+@Composable
+fun TopMenuButton(
+    selected: Boolean,
+    onSelect: (Boolean) -> Unit,
+    contentDescription: String?,
+    modifier: Modifier = Modifier,
+) {
+    val backgroundColor by animateColorAsState(
+        if (selected) KotlinConfTheme.colors.primaryBackground
+        else Color.Transparent
+    )
+    val iconColor by animateColorAsState(
+        if (selected) KotlinConfTheme.colors.primaryTextInverted
+        else KotlinConfTheme.colors.primaryText
+    )
+
+    Icon(
+        // TODO review icon sizing later
+        modifier = modifier
+            .size(30.dp)
+            .clip(CircleShape)
+            .clickable(onClick = { onSelect(!selected) })
+            .background(backgroundColor)
+            .padding(4.dp),
+        painter = painterResource(Res.drawable.bookmark_24),
+        contentDescription = contentDescription,
+        tint = iconColor,
+    )
+}
+
+@Preview
+@Composable
+private fun TopMenuButtonPreview() {
+    PreviewHelper {
+        var state1 by remember { mutableStateOf(false) }
+        TopMenuButton(state1, { state1 = it }, null)
+
+        var state2 by remember { mutableStateOf(true) }
+        TopMenuButton(state2, { state2 = it }, null)
+    }
+}

ui-components/src/commonMain/kotlin/org/jetbrains/kotlinconf/ui/components/TopMenuTitle.kt

@@ -0,0 +1,49 @@
+package org.jetbrains.kotlinconf.ui.components
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import org.jetbrains.compose.ui.tooling.preview.Preview
+import org.jetbrains.kotlinconf.ui.theme.KotlinConfTheme
+import org.jetbrains.kotlinconf.ui.theme.PreviewHelper
+
+enum class TopMenuTitleState {
+    Header, Completed, Placeholder
+}
+
+@Composable
+fun TopMenuTitle(
+    text: String,
+    state: TopMenuTitleState,
+    modifier: Modifier = Modifier,
+) {
+    StyledText(
+        text = text,
+        modifier = modifier,
+        style = when (state) {
+            TopMenuTitleState.Header ->
+                KotlinConfTheme.typography.h3
+
+            TopMenuTitleState.Completed,
+            TopMenuTitleState.Placeholder ->
+                KotlinConfTheme.typography.text1
+        },
+        color = when (state) {
+            TopMenuTitleState.Header,
+            TopMenuTitleState.Completed ->
+                KotlinConfTheme.colors.primaryText
+
+            TopMenuTitleState.Placeholder ->
+                KotlinConfTheme.colors.placeholderText
+        },
+    )
+}
+
+@Preview
+@Composable
+private fun TopMenuTitlePreview() {
+    PreviewHelper {
+        TopMenuTitle("Top Menu Title", TopMenuTitleState.Header)
+        TopMenuTitle("Top Menu Title", TopMenuTitleState.Completed)
+        TopMenuTitle("Top Menu Title", TopMenuTitleState.Placeholder)
+    }
+}