Updates
* Refactor code with LazyVerticalGrid and LazyColumn * Add MIT License
This commit is contained in:
parent
626eccb038
commit
cc5d19a405
GPG key ID:
69698042BA46B2B5
8 changed files with 368 additions and 251 deletions
21
LICENSE
Normal file
21
LICENSE
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2024 Anand Bose
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
|
|
@ -1,251 +0,0 @@
|
||||||
package dev.anandbose
|
|
||||||
|
|
||||||
import anandbose.composeapp.generated.resources.Res
|
|
||||||
import anandbose.composeapp.generated.resources.compose_multiplatform
|
|
||||||
import anandbose.composeapp.generated.resources.social_bluesky
|
|
||||||
import anandbose.composeapp.generated.resources.social_github
|
|
||||||
import anandbose.composeapp.generated.resources.social_linkedin
|
|
||||||
import anandbose.composeapp.generated.resources.social_mastodon
|
|
||||||
import anandbose.composeapp.generated.resources.social_medium
|
|
||||||
import anandbose.composeapp.generated.resources.social_twitter
|
|
||||||
import androidx.compose.foundation.Image
|
|
||||||
import androidx.compose.foundation.background
|
|
||||||
import androidx.compose.foundation.isSystemInDarkTheme
|
|
||||||
import androidx.compose.foundation.layout.Arrangement
|
|
||||||
import androidx.compose.foundation.layout.BoxWithConstraints
|
|
||||||
import androidx.compose.foundation.layout.Column
|
|
||||||
import androidx.compose.foundation.layout.Row
|
|
||||||
import androidx.compose.foundation.layout.fillMaxSize
|
|
||||||
import androidx.compose.foundation.layout.fillMaxWidth
|
|
||||||
import androidx.compose.foundation.layout.padding
|
|
||||||
import androidx.compose.foundation.layout.size
|
|
||||||
import androidx.compose.foundation.layout.widthIn
|
|
||||||
import androidx.compose.foundation.rememberScrollState
|
|
||||||
import androidx.compose.foundation.shape.CircleShape
|
|
||||||
import androidx.compose.foundation.verticalScroll
|
|
||||||
import androidx.compose.material3.Button
|
|
||||||
import androidx.compose.material3.MaterialTheme
|
|
||||||
import androidx.compose.material3.Scaffold
|
|
||||||
import androidx.compose.material3.Text
|
|
||||||
import androidx.compose.material3.darkColorScheme
|
|
||||||
import androidx.compose.material3.lightColorScheme
|
|
||||||
import androidx.compose.runtime.Composable
|
|
||||||
import androidx.compose.ui.Alignment
|
|
||||||
import androidx.compose.ui.Modifier
|
|
||||||
import androidx.compose.ui.draw.clip
|
|
||||||
import androidx.compose.ui.graphics.ColorFilter
|
|
||||||
import androidx.compose.ui.graphics.painter.Painter
|
|
||||||
import androidx.compose.ui.text.style.TextAlign
|
|
||||||
import androidx.compose.ui.unit.dp
|
|
||||||
import coil3.compose.AsyncImage
|
|
||||||
import kotlinx.browser.window
|
|
||||||
import org.jetbrains.compose.resources.painterResource
|
|
||||||
|
|
||||||
@Composable
|
|
||||||
fun App() {
|
|
||||||
MaterialTheme(
|
|
||||||
colorScheme = if (isSystemInDarkTheme()) {
|
|
||||||
darkColorScheme()
|
|
||||||
} else {
|
|
||||||
lightColorScheme()
|
|
||||||
}
|
|
||||||
) {
|
|
||||||
Scaffold(modifier = Modifier.fillMaxSize()) {
|
|
||||||
BoxWithConstraints(
|
|
||||||
modifier = Modifier.fillMaxSize(),
|
|
||||||
contentAlignment = Alignment.TopCenter,
|
|
||||||
) {
|
|
||||||
val scrollState = rememberScrollState()
|
|
||||||
Column(
|
|
||||||
modifier = Modifier
|
|
||||||
.widthIn(max = 760.dp)
|
|
||||||
.padding(horizontal = 32.dp)
|
|
||||||
.verticalScroll(state = scrollState),
|
|
||||||
horizontalAlignment = Alignment.CenterHorizontally,
|
|
||||||
) {
|
|
||||||
AsyncImage(
|
|
||||||
model = "https://avatars.githubusercontent.com/u/64779880?v=4",
|
|
||||||
modifier = Modifier
|
|
||||||
.padding(top = 32.dp)
|
|
||||||
.clip(CircleShape)
|
|
||||||
.size(size = 128.dp),
|
|
||||||
contentDescription = null
|
|
||||||
)
|
|
||||||
Text(
|
|
||||||
modifier = Modifier.padding(top = 16.dp),
|
|
||||||
text = "Anand Bose",
|
|
||||||
style = MaterialTheme.typography.titleLarge,
|
|
||||||
)
|
|
||||||
Text(
|
|
||||||
modifier = Modifier.padding(top = 8.dp),
|
|
||||||
text = "I'm passionate about building software with Kotlin and Compose.",
|
|
||||||
style = MaterialTheme.typography.labelLarge,
|
|
||||||
textAlign = TextAlign.Center,
|
|
||||||
)
|
|
||||||
if (this@BoxWithConstraints.maxWidth > 480.dp) {
|
|
||||||
Row(
|
|
||||||
modifier = Modifier.padding(top = 48.dp),
|
|
||||||
horizontalArrangement = Arrangement.spacedBy(16.dp),
|
|
||||||
) {
|
|
||||||
UrlButtonLarge(
|
|
||||||
modifier = Modifier.weight(1f),
|
|
||||||
icon = painterResource(Res.drawable.social_medium),
|
|
||||||
text = "Medium",
|
|
||||||
url = "https://medium.com/@anandbose",
|
|
||||||
)
|
|
||||||
UrlButtonLarge(
|
|
||||||
modifier = Modifier.weight(1f),
|
|
||||||
icon = painterResource(Res.drawable.social_linkedin),
|
|
||||||
text = "LinkedIn",
|
|
||||||
url = "https://linkedin.com/in/anandbosedev",
|
|
||||||
)
|
|
||||||
}
|
|
||||||
Row(
|
|
||||||
modifier = Modifier.padding(top = 16.dp),
|
|
||||||
horizontalArrangement = Arrangement.spacedBy(16.dp),
|
|
||||||
) {
|
|
||||||
UrlButtonLarge(
|
|
||||||
modifier = Modifier.weight(1f),
|
|
||||||
icon = painterResource(Res.drawable.social_github),
|
|
||||||
text = "GitHub",
|
|
||||||
url = "https://github.com/anandbosedev",
|
|
||||||
)
|
|
||||||
UrlButtonLarge(
|
|
||||||
modifier = Modifier.weight(1f),
|
|
||||||
icon = painterResource(Res.drawable.social_mastodon),
|
|
||||||
text = "Mastodon",
|
|
||||||
url = "https://mastodon.social/@anandbosedev",
|
|
||||||
)
|
|
||||||
}
|
|
||||||
Row(
|
|
||||||
modifier = Modifier.padding(top = 16.dp),
|
|
||||||
horizontalArrangement = Arrangement.spacedBy(16.dp),
|
|
||||||
) {
|
|
||||||
UrlButtonLarge(
|
|
||||||
modifier = Modifier.weight(1f),
|
|
||||||
icon = painterResource(Res.drawable.social_bluesky),
|
|
||||||
text = "Bluesky",
|
|
||||||
url = "https://bsky.app/profile/anandbose.dev",
|
|
||||||
)
|
|
||||||
UrlButtonLarge(
|
|
||||||
modifier = Modifier.weight(1f),
|
|
||||||
icon = painterResource(Res.drawable.social_twitter),
|
|
||||||
text = "Twitter",
|
|
||||||
url = "https://x.com/@anandbosedev",
|
|
||||||
)
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
UrlButtonSmall(
|
|
||||||
modifier = Modifier.fillMaxWidth().padding(top = 24.dp),
|
|
||||||
icon = painterResource(Res.drawable.social_medium),
|
|
||||||
text = "Medium",
|
|
||||||
url = "https://medium.com/@anandbose",
|
|
||||||
)
|
|
||||||
UrlButtonSmall(
|
|
||||||
modifier = Modifier.fillMaxWidth().padding(top = 16.dp),
|
|
||||||
icon = painterResource(Res.drawable.social_linkedin),
|
|
||||||
text = "LinkedIn",
|
|
||||||
url = "https://linkedin.com/in/anandbosedev",
|
|
||||||
)
|
|
||||||
UrlButtonSmall(
|
|
||||||
modifier = Modifier.fillMaxWidth().padding(top = 16.dp),
|
|
||||||
icon = painterResource(Res.drawable.social_github),
|
|
||||||
text = "GitHub",
|
|
||||||
url = "https://github.com/anandbosedev",
|
|
||||||
)
|
|
||||||
UrlButtonSmall(
|
|
||||||
modifier = Modifier.fillMaxWidth().padding(top = 16.dp),
|
|
||||||
icon = painterResource(Res.drawable.social_mastodon),
|
|
||||||
text = "Mastodon",
|
|
||||||
url = "https://mastodon.social/@anandbosedev",
|
|
||||||
)
|
|
||||||
UrlButtonSmall(
|
|
||||||
modifier = Modifier.fillMaxWidth().padding(top = 16.dp),
|
|
||||||
icon = painterResource(Res.drawable.social_bluesky),
|
|
||||||
text = "Bluesky",
|
|
||||||
url = "https://bsky.app/profile/anandbose.dev",
|
|
||||||
)
|
|
||||||
UrlButtonSmall(
|
|
||||||
modifier = Modifier.fillMaxWidth().padding(top = 16.dp),
|
|
||||||
icon = painterResource(Res.drawable.social_twitter),
|
|
||||||
text = "Twitter",
|
|
||||||
url = "https://x.com/@anandbosedev",
|
|
||||||
)
|
|
||||||
}
|
|
||||||
Text(
|
|
||||||
modifier = Modifier.padding(vertical = 32.dp),
|
|
||||||
text = "This website is built with Compose Multiplatform and Kotlin/WASM. The icons are sourced from icons8.com",
|
|
||||||
textAlign = TextAlign.Center,
|
|
||||||
style = MaterialTheme.typography.bodySmall,
|
|
||||||
color = MaterialTheme.colorScheme.onSurfaceVariant,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@Composable
|
|
||||||
fun UrlButtonLarge(
|
|
||||||
modifier: Modifier = Modifier,
|
|
||||||
icon: Painter,
|
|
||||||
text: String,
|
|
||||||
url: String,
|
|
||||||
) {
|
|
||||||
Button(
|
|
||||||
modifier = modifier,
|
|
||||||
shape = MaterialTheme.shapes.small,
|
|
||||||
content = {
|
|
||||||
Column(
|
|
||||||
horizontalAlignment = Alignment.CenterHorizontally,
|
|
||||||
verticalArrangement = Arrangement.spacedBy(4.dp),
|
|
||||||
) {
|
|
||||||
Image(
|
|
||||||
modifier = Modifier.size(48.dp),
|
|
||||||
painter = icon,
|
|
||||||
contentDescription = null,
|
|
||||||
colorFilter = ColorFilter.tint(
|
|
||||||
color = MaterialTheme.colorScheme.onPrimary,
|
|
||||||
),
|
|
||||||
)
|
|
||||||
Text(
|
|
||||||
text = text,
|
|
||||||
style = MaterialTheme.typography.labelLarge,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onClick = {
|
|
||||||
window.open(url, "_blank")
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
@Composable
|
|
||||||
fun UrlButtonSmall(
|
|
||||||
modifier: Modifier = Modifier,
|
|
||||||
icon: Painter,
|
|
||||||
text: String,
|
|
||||||
url: String,
|
|
||||||
) {
|
|
||||||
Button(
|
|
||||||
modifier = modifier,
|
|
||||||
content = {
|
|
||||||
Image(
|
|
||||||
modifier = Modifier.size(32.dp),
|
|
||||||
painter = icon,
|
|
||||||
contentDescription = null,
|
|
||||||
colorFilter = ColorFilter.tint(
|
|
||||||
color = MaterialTheme.colorScheme.onPrimary,
|
|
||||||
),
|
|
||||||
)
|
|
||||||
Text(
|
|
||||||
modifier = Modifier.padding(start = 4.dp),
|
|
||||||
text = text,
|
|
||||||
style = MaterialTheme.typography.labelLarge,
|
|
||||||
)
|
|
||||||
},
|
|
||||||
onClick = {
|
|
||||||
window.open(url, "_blank")
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
53
composeApp/src/commonMain/kotlin/dev/anandbose/data/Links.kt
Normal file
53
composeApp/src/commonMain/kotlin/dev/anandbose/data/Links.kt
Normal file
|
|
@ -0,0 +1,53 @@
|
||||||
|
package dev.anandbose.data
|
||||||
|
|
||||||
|
import anandbose.composeapp.generated.resources.Res
|
||||||
|
import anandbose.composeapp.generated.resources.social_bluesky
|
||||||
|
import anandbose.composeapp.generated.resources.social_github
|
||||||
|
import anandbose.composeapp.generated.resources.social_linkedin
|
||||||
|
import anandbose.composeapp.generated.resources.social_mastodon
|
||||||
|
import anandbose.composeapp.generated.resources.social_medium
|
||||||
|
import anandbose.composeapp.generated.resources.social_twitter
|
||||||
|
import androidx.compose.runtime.Immutable
|
||||||
|
import androidx.compose.runtime.Stable
|
||||||
|
import org.jetbrains.compose.resources.DrawableResource
|
||||||
|
|
||||||
|
@Stable
|
||||||
|
@Immutable
|
||||||
|
data class LinkData(
|
||||||
|
val icon: DrawableResource,
|
||||||
|
val title: String,
|
||||||
|
val url: String,
|
||||||
|
)
|
||||||
|
|
||||||
|
val Links = listOf(
|
||||||
|
LinkData(
|
||||||
|
icon = Res.drawable.social_medium,
|
||||||
|
title = "Medium",
|
||||||
|
url = "https://medium.com/@anandbose"
|
||||||
|
),
|
||||||
|
LinkData(
|
||||||
|
icon = Res.drawable.social_linkedin,
|
||||||
|
title = "LinkedIn",
|
||||||
|
url = "https://linkedin.com/in/anandbosedev",
|
||||||
|
),
|
||||||
|
LinkData(
|
||||||
|
icon = Res.drawable.social_github,
|
||||||
|
title = "GitHub",
|
||||||
|
url = "https://github.com/anandbosedev",
|
||||||
|
),
|
||||||
|
LinkData(
|
||||||
|
icon = Res.drawable.social_mastodon,
|
||||||
|
title = "Mastodon",
|
||||||
|
url = "https://mastodon.social/@anandbosedev",
|
||||||
|
),
|
||||||
|
LinkData(
|
||||||
|
icon = Res.drawable.social_bluesky,
|
||||||
|
title = "Bluesky",
|
||||||
|
url = "https://bsky.app/profile/anandbose.dev",
|
||||||
|
),
|
||||||
|
LinkData(
|
||||||
|
icon = Res.drawable.social_twitter,
|
||||||
|
title = "Twitter",
|
||||||
|
url = "https://x.com/@anandbosedev",
|
||||||
|
),
|
||||||
|
)
|
||||||
|
|
@ -2,6 +2,7 @@ package dev.anandbose
|
||||||
|
|
||||||
import androidx.compose.ui.ExperimentalComposeUiApi
|
import androidx.compose.ui.ExperimentalComposeUiApi
|
||||||
import androidx.compose.ui.window.ComposeViewport
|
import androidx.compose.ui.window.ComposeViewport
|
||||||
|
import dev.anandbose.ui.app.App
|
||||||
import kotlinx.browser.document
|
import kotlinx.browser.document
|
||||||
|
|
||||||
@OptIn(ExperimentalComposeUiApi::class)
|
@OptIn(ExperimentalComposeUiApi::class)
|
||||||
|
|
|
||||||
160
composeApp/src/commonMain/kotlin/dev/anandbose/ui/app/App.kt
Normal file
160
composeApp/src/commonMain/kotlin/dev/anandbose/ui/app/App.kt
Normal file
|
|
@ -0,0 +1,160 @@
|
||||||
|
package dev.anandbose.ui.app
|
||||||
|
|
||||||
|
import anandbose.composeapp.generated.resources.Res
|
||||||
|
import anandbose.composeapp.generated.resources.social_bluesky
|
||||||
|
import anandbose.composeapp.generated.resources.social_github
|
||||||
|
import anandbose.composeapp.generated.resources.social_linkedin
|
||||||
|
import anandbose.composeapp.generated.resources.social_mastodon
|
||||||
|
import anandbose.composeapp.generated.resources.social_medium
|
||||||
|
import anandbose.composeapp.generated.resources.social_twitter
|
||||||
|
import androidx.compose.foundation.isSystemInDarkTheme
|
||||||
|
import androidx.compose.foundation.layout.Arrangement
|
||||||
|
import androidx.compose.foundation.layout.BoxWithConstraints
|
||||||
|
import androidx.compose.foundation.layout.Column
|
||||||
|
import androidx.compose.foundation.layout.Row
|
||||||
|
import androidx.compose.foundation.layout.fillMaxSize
|
||||||
|
import androidx.compose.foundation.layout.fillMaxWidth
|
||||||
|
import androidx.compose.foundation.layout.padding
|
||||||
|
import androidx.compose.foundation.layout.size
|
||||||
|
import androidx.compose.foundation.layout.widthIn
|
||||||
|
import androidx.compose.foundation.lazy.LazyColumn
|
||||||
|
import androidx.compose.foundation.lazy.grid.GridCells
|
||||||
|
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
|
||||||
|
import androidx.compose.foundation.lazy.grid.items
|
||||||
|
import androidx.compose.foundation.lazy.items
|
||||||
|
import androidx.compose.foundation.rememberScrollState
|
||||||
|
import androidx.compose.foundation.shape.CircleShape
|
||||||
|
import androidx.compose.foundation.verticalScroll
|
||||||
|
import androidx.compose.material3.MaterialTheme
|
||||||
|
import androidx.compose.material3.Scaffold
|
||||||
|
import androidx.compose.material3.Text
|
||||||
|
import androidx.compose.material3.darkColorScheme
|
||||||
|
import androidx.compose.material3.lightColorScheme
|
||||||
|
import androidx.compose.runtime.Composable
|
||||||
|
import androidx.compose.ui.Alignment
|
||||||
|
import androidx.compose.ui.Modifier
|
||||||
|
import androidx.compose.ui.draw.clip
|
||||||
|
import androidx.compose.ui.text.buildAnnotatedString
|
||||||
|
import androidx.compose.ui.text.style.TextAlign
|
||||||
|
import androidx.compose.ui.unit.dp
|
||||||
|
import coil3.compose.AsyncImage
|
||||||
|
import dev.anandbose.data.Links
|
||||||
|
import dev.anandbose.ui.util.styledLink
|
||||||
|
import dev.anandbose.ui.widget.UrlButtonLarge
|
||||||
|
import dev.anandbose.ui.widget.UrlButtonSmall
|
||||||
|
import org.jetbrains.compose.resources.painterResource
|
||||||
|
|
||||||
|
@Composable
|
||||||
|
fun App() {
|
||||||
|
MaterialTheme(
|
||||||
|
colorScheme = if (isSystemInDarkTheme()) {
|
||||||
|
darkColorScheme()
|
||||||
|
} else {
|
||||||
|
lightColorScheme()
|
||||||
|
}
|
||||||
|
) {
|
||||||
|
Scaffold(modifier = Modifier.fillMaxSize()) {
|
||||||
|
BoxWithConstraints(
|
||||||
|
modifier = Modifier.fillMaxSize(),
|
||||||
|
contentAlignment = Alignment.TopCenter,
|
||||||
|
) {
|
||||||
|
//val scrollState = rememberScrollState()
|
||||||
|
Column(
|
||||||
|
modifier = Modifier
|
||||||
|
.widthIn(max = 760.dp)
|
||||||
|
.padding(horizontal = 32.dp),
|
||||||
|
//.verticalScroll(state = scrollState),
|
||||||
|
horizontalAlignment = Alignment.CenterHorizontally,
|
||||||
|
) {
|
||||||
|
AsyncImage(
|
||||||
|
model = "https://avatars.githubusercontent.com/u/64779880?v=4",
|
||||||
|
modifier = Modifier
|
||||||
|
.padding(top = 32.dp)
|
||||||
|
.clip(CircleShape)
|
||||||
|
.size(size = 128.dp),
|
||||||
|
contentDescription = null
|
||||||
|
)
|
||||||
|
Text(
|
||||||
|
modifier = Modifier.padding(top = 16.dp),
|
||||||
|
text = "Anand Bose",
|
||||||
|
style = MaterialTheme.typography.titleLarge,
|
||||||
|
)
|
||||||
|
Text(
|
||||||
|
modifier = Modifier.padding(top = 8.dp),
|
||||||
|
text = "I'm passionate about building software with Kotlin and Compose.",
|
||||||
|
style = MaterialTheme.typography.labelLarge,
|
||||||
|
textAlign = TextAlign.Center,
|
||||||
|
)
|
||||||
|
if (this@BoxWithConstraints.maxWidth > 480.dp) {
|
||||||
|
LazyVerticalGrid(
|
||||||
|
modifier = Modifier.padding(top = 32.dp),
|
||||||
|
columns = GridCells.Adaptive(minSize = 200.dp),
|
||||||
|
horizontalArrangement = Arrangement.spacedBy(16.dp),
|
||||||
|
verticalArrangement = Arrangement.spacedBy(16.dp),
|
||||||
|
) {
|
||||||
|
items(items = Links) {
|
||||||
|
UrlButtonLarge(
|
||||||
|
modifier = Modifier.fillMaxWidth(),
|
||||||
|
icon = painterResource(it.icon),
|
||||||
|
text = it.title,
|
||||||
|
url = it.url,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
LazyColumn(
|
||||||
|
modifier = Modifier.padding(top = 32.dp),
|
||||||
|
verticalArrangement = Arrangement.spacedBy(16.dp),
|
||||||
|
) {
|
||||||
|
items(items = Links) {
|
||||||
|
UrlButtonSmall(
|
||||||
|
modifier = Modifier.fillMaxWidth(),
|
||||||
|
icon = painterResource(it.icon),
|
||||||
|
text = it.title,
|
||||||
|
url = it.url,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Text(
|
||||||
|
modifier = Modifier.padding(vertical = 32.dp),
|
||||||
|
text = buildAnnotatedString {
|
||||||
|
append("This website is built with ")
|
||||||
|
styledLink(
|
||||||
|
url = "https://www.jetbrains.com/compose-multiplatform/",
|
||||||
|
text = "Compose Multiplatform",
|
||||||
|
)
|
||||||
|
append(" and ")
|
||||||
|
styledLink(
|
||||||
|
url = "https://kotlinlang.org/docs/wasm-overview.html",
|
||||||
|
text = "Kotlin/WASM",
|
||||||
|
)
|
||||||
|
append(". The icons are sourced from ")
|
||||||
|
styledLink(
|
||||||
|
url = "https://icons8.com",
|
||||||
|
text = "icons8.com",
|
||||||
|
)
|
||||||
|
append(" and converted to Vector Drawable using ")
|
||||||
|
styledLink(
|
||||||
|
url = "https://shapeshifter.design",
|
||||||
|
text = "ShapeShifter",
|
||||||
|
)
|
||||||
|
append(". Source code is available on ")
|
||||||
|
styledLink(
|
||||||
|
url = "https://github.com/anandbosedev/anandbosedev.github.io",
|
||||||
|
text = "GitHub",
|
||||||
|
)
|
||||||
|
append(".")
|
||||||
|
},
|
||||||
|
textAlign = TextAlign.Center,
|
||||||
|
style = MaterialTheme.typography.bodySmall,
|
||||||
|
color = MaterialTheme.colorScheme.onSurfaceVariant,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
package dev.anandbose.ui.util
|
||||||
|
|
||||||
|
import androidx.compose.material3.MaterialTheme
|
||||||
|
import androidx.compose.runtime.Composable
|
||||||
|
import androidx.compose.ui.text.AnnotatedString
|
||||||
|
import androidx.compose.ui.text.LinkAnnotation
|
||||||
|
import androidx.compose.ui.text.SpanStyle
|
||||||
|
import androidx.compose.ui.text.TextLinkStyles
|
||||||
|
import androidx.compose.ui.text.style.TextDecoration
|
||||||
|
import androidx.compose.ui.text.withLink
|
||||||
|
|
||||||
|
@Composable
|
||||||
|
fun AnnotatedString.Builder.styledLink(url: String, text: String) {
|
||||||
|
withLink(
|
||||||
|
link = LinkAnnotation.Url(
|
||||||
|
url = url,
|
||||||
|
styles = TextLinkStyles(
|
||||||
|
style = SpanStyle(
|
||||||
|
color = MaterialTheme.colorScheme.primary,
|
||||||
|
),
|
||||||
|
focusedStyle = SpanStyle(
|
||||||
|
color = MaterialTheme.colorScheme.primary,
|
||||||
|
textDecoration = TextDecoration.Underline,
|
||||||
|
),
|
||||||
|
hoveredStyle = SpanStyle(
|
||||||
|
color = MaterialTheme.colorScheme.primary,
|
||||||
|
textDecoration = TextDecoration.Underline,
|
||||||
|
),
|
||||||
|
pressedStyle = SpanStyle(
|
||||||
|
color = MaterialTheme.colorScheme.primary,
|
||||||
|
textDecoration = TextDecoration.Underline,
|
||||||
|
)
|
||||||
|
)
|
||||||
|
),
|
||||||
|
) {
|
||||||
|
append(text)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
package dev.anandbose.ui.widget
|
||||||
|
|
||||||
|
import androidx.compose.foundation.Image
|
||||||
|
import androidx.compose.foundation.layout.Arrangement
|
||||||
|
import androidx.compose.foundation.layout.Column
|
||||||
|
import androidx.compose.foundation.layout.size
|
||||||
|
import androidx.compose.material3.Button
|
||||||
|
import androidx.compose.material3.MaterialTheme
|
||||||
|
import androidx.compose.material3.Text
|
||||||
|
import androidx.compose.runtime.Composable
|
||||||
|
import androidx.compose.ui.Alignment
|
||||||
|
import androidx.compose.ui.Modifier
|
||||||
|
import androidx.compose.ui.graphics.ColorFilter
|
||||||
|
import androidx.compose.ui.graphics.painter.Painter
|
||||||
|
import androidx.compose.ui.unit.dp
|
||||||
|
import kotlinx.browser.window
|
||||||
|
|
||||||
|
@Composable
|
||||||
|
fun UrlButtonLarge(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
icon: Painter,
|
||||||
|
text: String,
|
||||||
|
url: String,
|
||||||
|
) {
|
||||||
|
Button(
|
||||||
|
modifier = modifier,
|
||||||
|
shape = MaterialTheme.shapes.small,
|
||||||
|
content = {
|
||||||
|
Column(
|
||||||
|
horizontalAlignment = Alignment.CenterHorizontally,
|
||||||
|
verticalArrangement = Arrangement.spacedBy(4.dp),
|
||||||
|
) {
|
||||||
|
Image(
|
||||||
|
modifier = Modifier.size(48.dp),
|
||||||
|
painter = icon,
|
||||||
|
contentDescription = null,
|
||||||
|
colorFilter = ColorFilter.tint(
|
||||||
|
color = MaterialTheme.colorScheme.onPrimary,
|
||||||
|
),
|
||||||
|
)
|
||||||
|
Text(
|
||||||
|
text = text,
|
||||||
|
style = MaterialTheme.typography.labelLarge,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onClick = {
|
||||||
|
window.open(url, "_blank")
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
package dev.anandbose.ui.widget
|
||||||
|
|
||||||
|
import androidx.compose.foundation.Image
|
||||||
|
import androidx.compose.foundation.layout.padding
|
||||||
|
import androidx.compose.foundation.layout.size
|
||||||
|
import androidx.compose.material3.Button
|
||||||
|
import androidx.compose.material3.MaterialTheme
|
||||||
|
import androidx.compose.material3.Text
|
||||||
|
import androidx.compose.runtime.Composable
|
||||||
|
import androidx.compose.ui.Modifier
|
||||||
|
import androidx.compose.ui.graphics.ColorFilter
|
||||||
|
import androidx.compose.ui.graphics.painter.Painter
|
||||||
|
import androidx.compose.ui.unit.dp
|
||||||
|
import kotlinx.browser.window
|
||||||
|
|
||||||
|
@Composable
|
||||||
|
fun UrlButtonSmall(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
icon: Painter,
|
||||||
|
text: String,
|
||||||
|
url: String,
|
||||||
|
) {
|
||||||
|
Button(
|
||||||
|
modifier = modifier,
|
||||||
|
content = {
|
||||||
|
Image(
|
||||||
|
modifier = Modifier.size(32.dp),
|
||||||
|
painter = icon,
|
||||||
|
contentDescription = null,
|
||||||
|
colorFilter = ColorFilter.tint(
|
||||||
|
color = MaterialTheme.colorScheme.onPrimary,
|
||||||
|
),
|
||||||
|
)
|
||||||
|
Text(
|
||||||
|
modifier = Modifier.padding(start = 4.dp),
|
||||||
|
text = text,
|
||||||
|
style = MaterialTheme.typography.labelLarge,
|
||||||
|
)
|
||||||
|
},
|
||||||
|
onClick = {
|
||||||
|
window.open(url, "_blank")
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
Add table
Reference in a new issue