Feature/chips label component

core/designsystem/src/main/java/com/suwiki/core/designsystem/component/chips/SuwikiCheckedColorChip.kt

@@ -0,0 +1,44 @@
+package com.suwiki.core.designsystem.component.chips
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.suwiki.core.designsystem.R
+import com.suwiki.core.designsystem.component.chips.ui.theme.TestTheme
+
+@Composable
+fun SuwikiCheckedColorChip(
+  onClicked: () -> Unit,
+) {
+  Box(
+    modifier = Modifier.size(40.dp),
+  ) {
+    Image(
+      painter = painterResource(id = R.drawable.ic_color_checked_chip),
+      contentDescription = "",
+      modifier = Modifier.clickable { onClicked() },
+    )
+  }
+}
+
+@Preview
+@Composable
+fun SuwikiCheckedColorChipPreview() {
+  TestTheme {
+    Column(
+      verticalArrangement = Arrangement.Center,
+      horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+      SuwikiCheckedColorChip { }
+    }
+  }
+}

core/designsystem/src/main/java/com/suwiki/core/designsystem/component/chips/SuwikiColorChip.kt

@@ -0,0 +1,43 @@
+package com.suwiki.core.designsystem.component.chips
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.suwiki.core.designsystem.component.chips.ui.theme.TestTheme
+
+@Composable
+fun SuwikiColorChip() {
+  var chipState by rememberSaveable { mutableStateOf(false) }
+
+  when (chipState) {
+    true -> {
+      SuwikiCheckedColorChip { chipState = !chipState }
+    }
+    false -> {
+      SuwikiNonCheckedColorChip { chipState = !chipState }
+    }
+  }
+}
+
+@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
+@Composable
+fun SuwikiColorChipPreview() {
+  TestTheme {
+    Column(
+      modifier = Modifier.size(300.dp),
+      verticalArrangement = Arrangement.Center,
+      horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+      SuwikiColorChip()
+    }
+  }
+}

core/designsystem/src/main/java/com/suwiki/core/designsystem/component/chips/SuwikiContainedChip.kt

@@ -0,0 +1,111 @@
+package com.suwiki.core.designsystem.component.chips
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+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.runtime.setValue
+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.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.suwiki.core.designsystem.component.chips.ui.theme.F6
+import com.suwiki.core.designsystem.component.chips.ui.theme.TestTheme
+import com.suwiki.core.designsystem.component.chips.ui.theme.blue10
+import com.suwiki.core.designsystem.component.chips.ui.theme.blue100
+import com.suwiki.core.designsystem.component.chips.ui.theme.c95
+import com.suwiki.core.designsystem.component.chips.ui.theme.green10
+import com.suwiki.core.designsystem.component.chips.ui.theme.green100
+import com.suwiki.core.designsystem.component.chips.ui.theme.orange10
+import com.suwiki.core.designsystem.component.chips.ui.theme.orange100
+enum class SuwikiLabelType(val type: String) {
+  ORANGE("orange"),
+  BLUE("blue"),
+  GREEN("green"),
+}
+
+@Composable
+fun SuwikiContainedChip(type: SuwikiLabelType, text: String) {
+  var chipState by remember { mutableStateOf(false) }
+
+  val backgroundColor: Color
+  val contentColor: Color
+
+  when (chipState) {
+    false -> {
+      backgroundColor = F6
+      contentColor = c95
+    }
+    true -> {
+      when (type) {
+        SuwikiLabelType.ORANGE -> {
+          backgroundColor = orange10
+          contentColor = orange100
+        }
+        SuwikiLabelType.BLUE -> {
+          backgroundColor = blue10
+          contentColor = blue100
+        }
+        SuwikiLabelType.GREEN -> {
+          backgroundColor = green10
+          contentColor = green100
+        }
+      }
+    }
+  }
+
+  SuwikiContainedChipItem(
+    text = text,
+    backgroundColor = backgroundColor,
+    contentColor = contentColor,
+    onBtnClicked = { chipState = !chipState },
+  )
+}
+
+@Composable
+fun SuwikiContainedChipItem(
+  text: String,
+  backgroundColor: Color,
+  contentColor: Color,
+  onBtnClicked: () -> Unit,
+) {
+  Box(
+    modifier = Modifier
+      .clip(RoundedCornerShape(5.dp))
+      .background(color = backgroundColor)
+      .clickable { onBtnClicked() }
+      .size(41.dp, 26.dp),
+  ) {
+    Text(
+      text = text,
+      color = contentColor,
+      modifier = Modifier
+        .align(Alignment.Center),
+      fontSize = 12.sp,
+    )
+  }
+}
+
+@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
+@Composable
+fun SuwikiContainedChipPreview() {
+  TestTheme {
+    Column(
+      verticalArrangement = Arrangement.Center,
+      horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+      SuwikiContainedChip(SuwikiLabelType.ORANGE, "label")
+    }
+  }
+}

core/designsystem/src/main/java/com/suwiki/core/designsystem/component/chips/SuwikiNonCheckedColorChip.kt

@@ -0,0 +1,44 @@
+package com.suwiki.core.designsystem.component.chips
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.suwiki.core.designsystem.R
+import com.suwiki.core.designsystem.component.chips.ui.theme.TestTheme
+
+@Composable
+fun SuwikiNonCheckedColorChip(
+  onClicked: () -> Unit,
+) {
+  Box(
+    modifier = Modifier.size(40.dp),
+  ) {
+    Image(
+      painter = painterResource(id = R.drawable.ic_color_chip),
+      contentDescription = "",
+      modifier = Modifier.clickable { onClicked() },
+    )
+  }
+}
+
+@Preview
+@Composable
+fun SuwikiNonCheckedColorChipPreview() {
+  TestTheme {
+    Column(
+      verticalArrangement = Arrangement.Center,
+      horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+      SuwikiNonCheckedColorChip { }
+    }
+  }
+}

core/designsystem/src/main/java/com/suwiki/core/designsystem/component/chips/SuwikiOutlinedChip.kt

@@ -0,0 +1,92 @@
+package com.suwiki.core.designsystem.component.chips
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+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.runtime.setValue
+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.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.suwiki.core.designsystem.component.chips.ui.theme.DA
+import com.suwiki.core.designsystem.component.chips.ui.theme.Main
+import com.suwiki.core.designsystem.component.chips.ui.theme.TestTheme
+import com.suwiki.core.designsystem.component.chips.ui.theme.c95
+import com.suwiki.core.designsystem.component.chips.ui.theme.white
+
+@Composable
+fun SuwikiOutlinedChip(text: String) {
+  var labelState by remember { mutableStateOf(false) }
+
+  val backgroundColor: Color
+  val contentColor: Color
+
+  when (labelState) {
+    false -> {
+      backgroundColor = DA
+      contentColor = c95
+    }
+    true -> {
+      backgroundColor = Main
+      contentColor = Main
+    }
+  }
+
+  SuwikiOutlinedChipItem(
+    text = text,
+    backgroundColor = backgroundColor,
+    contentColor = contentColor,
+    onBtnClicked = { labelState = !labelState },
+  )
+}
+
+@Composable
+fun SuwikiOutlinedChipItem(
+  text: String,
+  backgroundColor: Color,
+  contentColor: Color,
+  onBtnClicked: () -> Unit,
+) {
+  Box(
+    modifier = Modifier
+      .clip(RoundedCornerShape(5.dp))
+      .clickable { onBtnClicked() }
+      .size(41.dp, 26.dp)
+      .background(color = white)
+      .border(width = 1.dp, color = backgroundColor, shape = RoundedCornerShape(5.dp)),
+  ) {
+    Text(
+      text = text,
+      color = contentColor,
+      modifier = Modifier
+        .align(Alignment.Center),
+      fontSize = 12.sp,
+    )
+  }
+}
+
+@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
+@Composable
+fun SuwikiOutlinedChipPreview() {
+  TestTheme {
+    Column(
+      verticalArrangement = Arrangement.Center,
+      horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+      SuwikiOutlinedChip("label")
+    }
+  }
+}

core/designsystem/src/main/java/com/suwiki/core/designsystem/component/chips/ui/theme/TestColor.kt

@@ -0,0 +1,23 @@
+package com.suwiki.core.designsystem.component.chips.ui.theme
+
+import androidx.compose.ui.graphics.Color
+
+val Purple80 = Color(0xFFD0BCFF)
+val PurpleGrey80 = Color(0xFFCCC2DC)
+val Pink80 = Color(0xFFEFB8C8)
+
+val Purple40 = Color(0xFF6650a4)
+val PurpleGrey40 = Color(0xFF625b71)
+val Pink40 = Color(0xFF7D5260)
+
+val Main = Color(0xFF346CFD)
+val DA = Color(0xFFDADADA)
+val F6 = Color(0xFFF6F6F6)
+val c95 = Color(0xFF959595)
+val orange10 = Color(0xFFFFF3EB)
+val orange100 = Color(0xFFFD873B)
+val blue10 = Color(0xFFECEDFF)
+val blue100 = Color(0xFF3D4EFB)
+val green10 = Color(0xFFEAF8EC)
+val green100 = Color(0xFF2DB942)
+val white = Color(0xFFFFFFFF)