opensource/dashboard-icons
1
0
Fork 0
mirror of https://github.com/walkxcode/dashboard-icons.git synced 2025-06-28 23:40:21 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix(web): add margin to section headers in IconDetails component

Browse Source
This commit is contained in:
Bjorn Lammers 2025-04-23 01:09:10 +02:00
parent b4c4fe2634
commit 07c52fa9e6
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/src/components/icon-details.tsx
View File

@ -318,7 +318,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
{iconData.categories && iconData.categories.length > 0 && ( {iconData.categories && iconData.categories.length > 0 && (
<div> <div>
<h3 className="text-sm font-semibold text-muted-foreground">Categories</h3> <h3 className="text-sm font-semibold text-muted-foreground mb-2">Categories</h3>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{iconData.categories.map((category) => ( {iconData.categories.map((category) => (
<Link key={category} href={`/icons?category=${encodeURIComponent(category)}`} className="cursor-pointer"> <Link key={category} href={`/icons?category=${encodeURIComponent(category)}`} className="cursor-pointer">
@ -339,7 +339,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
{iconData.aliases && iconData.aliases.length > 0 && ( {iconData.aliases && iconData.aliases.length > 0 && (
<div> <div>
<h3 className="text-sm font-semibold text-muted-foreground">Aliases</h3> <h3 className="text-sm font-semibold text-muted-foreground mb-2">Aliases</h3>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{iconData.aliases.map((alias) => ( {iconData.aliases.map((alias) => (
<Badge <Badge
@ -356,7 +356,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
)} )}
<div> <div>
<h3 className="text-sm font-semibold text-muted-foreground">About this icon</h3> <h3 className="text-sm font-semibold text-muted-foreground mb-2">About this icon</h3>
<div className="text-xs text-muted-foreground space-y-2"> <div className="text-xs text-muted-foreground space-y-2">
<p> <p>
Available in {availableFormats.length > 1 Available in {availableFormats.length > 1
@ -422,7 +422,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
<CardContent> <CardContent>
<div className="space-y-6"> <div className="space-y-6">
<div className=""> <div className="">
<h3 className="text-sm font-semibold text-muted-foreground">Base format</h3> <h3 className="text-sm font-semibold text-muted-foreground mb-2">Base format</h3>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<FileType className="w-4 h-4 text-blue-500" /> <FileType className="w-4 h-4 text-blue-500" />
<div className="px-3 py-1.5 border border-border rounded-lg text-sm font-medium">{iconData.base.toUpperCase()}</div> <div className="px-3 py-1.5 border border-border rounded-lg text-sm font-medium">{iconData.base.toUpperCase()}</div>
@ -430,7 +430,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
</div> </div>
<div className=""> <div className="">
<h3 className="text-sm font-semibold text-muted-foreground">Available formats</h3> <h3 className="text-sm font-semibold text-muted-foreground mb-2">Available formats</h3>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{availableFormats.map((format) => ( {availableFormats.map((format) => (
<div key={format} className="px-3 py-1.5 border border-border rounded-lg text-xs font-medium"> <div key={format} className="px-3 py-1.5 border border-border rounded-lg text-xs font-medium">
@ -442,7 +442,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
{iconData.colors && ( {iconData.colors && (
<div className=""> <div className="">
<h3 className="text-sm font-semibold text-muted-foreground">Color variants</h3> <h3 className="text-sm font-semibold text-muted-foreground mb-2">Color variants</h3>
<div className="space-y-2"> <div className="space-y-2">
{Object.entries(iconData.colors).map(([theme, variant]) => ( {Object.entries(iconData.colors).map(([theme, variant]) => (
<div key={theme} className="flex items-center gap-2"> <div key={theme} className="flex items-center gap-2">
@ -456,7 +456,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
)} )}
<div className=""> <div className="">
<h3 className="text-sm font-semibold text-muted-foreground">Source</h3> <h3 className="text-sm font-semibold text-muted-foreground mb-2">Source</h3>
<Button variant="outline" className="w-full" asChild> <Button variant="outline" className="w-full" asChild>
<Link href={`${REPO_PATH}/blob/main/meta/${icon}.json`} target="_blank" rel="noopener noreferrer"> <Link href={`${REPO_PATH}/blob/main/meta/${icon}.json`} target="_blank" rel="noopener noreferrer">
<Github className="w-4 h-4 mr-2" /> <Github className="w-4 h-4 mr-2" />