Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weโ€™ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/mz 156 badge #22

Merged
merged 10 commits into from
Jan 1, 2024
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
package com.susu.core.designsystem.component.badge

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.susu.core.designsystem.theme.Gray20
import com.susu.core.designsystem.theme.Gray30
import com.susu.core.designsystem.theme.Gray40
import com.susu.core.designsystem.theme.Gray70
import com.susu.core.designsystem.theme.Gray90
import com.susu.core.designsystem.theme.SusuTheme

@Composable
fun SusuExtraSmallBadge(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

SusuBadge ํ•˜๋‚˜๋กœ ๋งŒ๋“ค ์ˆ˜ ์žˆ์ง€ ์•Š์„๊นŒ์š”?

modifier: Modifier = Modifier,
shape: Shape = RoundedCornerShape(4.dp),
backgroundColor: Color,
textColor: Color,
text: String,
horizontalPadding: Dp = SusuTheme.spacing.spacing_xxs,
) {
Box(
modifier = modifier.background(backgroundColor, shape),
) {
Text(
text = text,
style = SusuTheme.typography.title_xxxs,
color = textColor,
modifier = modifier.padding(horizontal = horizontalPadding),
)
}
}

@Preview(showBackground = true)
@Composable
fun SusuExtraSmallBadgePreview() {
SusuTheme {
Column(
modifier = Modifier.fillMaxWidth(),
verticalArrangement = Arrangement.spacedBy(8.dp),
) {
SusuExtraSmallBadge(
backgroundColor = Gray20,
textColor = Gray70,
text = "์ „์ฒด 100,000์›",
)
SusuExtraSmallBadge(
backgroundColor = SusuTheme.colorScheme.primary,
textColor = SusuTheme.colorScheme.background10,
text = "๊ฐ€์กฑ",
)
SusuExtraSmallBadge(
backgroundColor = SusuTheme.colorScheme.accent,
textColor = SusuTheme.colorScheme.background10,
text = "๋ฏธ๋ฐฉ๋ฌธ",
)
SusuExtraSmallBadge(
backgroundColor = Gray90,
textColor = SusuTheme.colorScheme.background10,
text = "์„ ๋ฌผ O",
)
SusuExtraSmallBadge(
backgroundColor = Gray40,
textColor = SusuTheme.colorScheme.background10,
text = "์„ ๋ฌผ O",
)
SusuExtraSmallBadge(
backgroundColor = Gray30,
textColor = Gray70,
text = "์ „์ฒด 100,000์›",
)
SusuExtraSmallBadge(
backgroundColor = SusuTheme.colorScheme.error,
textColor = SusuTheme.colorScheme.background10,
text = "๋ฏธ๋ฐฉ๋ฌธ",
)
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
package com.susu.core.designsystem.component.badge

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.susu.core.designsystem.theme.Gray20
import com.susu.core.designsystem.theme.Gray30
import com.susu.core.designsystem.theme.Gray40
import com.susu.core.designsystem.theme.Gray70
import com.susu.core.designsystem.theme.Gray90
import com.susu.core.designsystem.theme.SusuTheme

@Composable
fun SusuSmallBadge(
modifier: Modifier = Modifier,
shape: Shape = RoundedCornerShape(4.dp),
backgroundColor: Color,
textColor: Color,
text: String,
horizontalPadding: Dp = SusuTheme.spacing.spacing_xxs,
verticalPadding: Dp = SusuTheme.spacing.spacing_xxxxxs,
) {
Box(
modifier = modifier.background(backgroundColor, shape),
) {
Text(
text = text,
style = SusuTheme.typography.title_xxxs,
color = textColor,
modifier = modifier.padding(horizontal = horizontalPadding, vertical = verticalPadding),
)
}
}

@Preview(showBackground = true)
@Composable
fun SusuSmallBadgePreview() {
SusuTheme {
Column(
modifier = Modifier.fillMaxWidth(),
verticalArrangement = Arrangement.spacedBy(8.dp),
) {
SusuSmallBadge(
backgroundColor = Gray20,
textColor = Gray70,
text = "์ „์ฒด 100,000์›",
)
SusuSmallBadge(
backgroundColor = SusuTheme.colorScheme.primary,
textColor = SusuTheme.colorScheme.background10,
text = "๊ฐ€์กฑ",
)
SusuSmallBadge(
backgroundColor = SusuTheme.colorScheme.accent,
textColor = SusuTheme.colorScheme.background10,
text = "๋ฏธ๋ฐฉ๋ฌธ",
)
SusuSmallBadge(
backgroundColor = Gray90,
textColor = SusuTheme.colorScheme.background10,
text = "์„ ๋ฌผ O",
)
SusuSmallBadge(
backgroundColor = Gray40,
textColor = SusuTheme.colorScheme.background10,
text = "์„ ๋ฌผ O",
)
SusuSmallBadge(
backgroundColor = Gray30,
textColor = Gray70,
text = "์ „์ฒด 100,000์›",
)
SusuSmallBadge(
backgroundColor = SusuTheme.colorScheme.error,
textColor = SusuTheme.colorScheme.background10,
text = "๋ฏธ๋ฐฉ๋ฌธ",
)
}
}
}