jimlee/dashboard-icons
1
0
Fork 0
mirror of https://github.com/walkxcode/dashboard-icons.git synced 2025-10-26 21:19:04 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat(web): add magic gradient color variable to globals.css

Browse Source
This commit is contained in:
Thomas Camlong
2025-04-22 20:51:58 +02:00
parent fc40975c50
commit 773e3b78a3
4 changed files with 9 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/app/globals.css
View File

@@ -183,6 +183,8 @@
--shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 8px 10px -1px --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 8px 10px -1px
hsl(0 0% 0% / 0.1); hsl(0 0% 0% / 0.1);
--shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25); --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
--magic-gradient-color: oklch(0.67 0.2 23.8 / 15%);
} }
.dark { .dark {
@@ -233,6 +235,8 @@
--shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 8px 10px -1px --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 8px 10px -1px
hsl(0 0% 0% / 0.1); hsl(0 0% 0% / 0.1);
--shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25); --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
--magic-gradient-color: oklch(0.27 0 0);
} }
@layer base { @layer base {

6
web/src/app/icons/components/icon-search.tsx
View File

@@ -78,7 +78,7 @@ export function IconSearch({ icons }: IconSearchProps) {
// Then filter by search query // Then filter by search query
if (query.trim()) { if (query.trim()) {
// Normalization function: lowercase, remove spaces and hyphens // Normalization function: lowercase, remove spaces and hyphens
const normalizeString = (str: string) => str.toLowerCase().replace(/[-\s]/g, '') const normalizeString = (str: string) => str.toLowerCase().replace(/[-\s]/g, "")
const normalizedQuery = normalizeString(query) const normalizedQuery = normalizeString(query)
filtered = filtered.filter(({ name, data }) => { filtered = filtered.filter(({ name, data }) => {
@@ -158,8 +158,6 @@ export function IconSearch({ icons }: IconSearchProps) {
[pathname, router, initialSort], [pathname, router, initialSort],
) )
const handleSearch = useCallback( const handleSearch = useCallback(
(query: string) => { (query: string) => {
setSearchQuery(query) setSearchQuery(query)
@@ -409,7 +407,7 @@ export function IconSearch({ icons }: IconSearchProps) {
variant="default" variant="default"
size="lg" size="lg"
onClick={() => { onClick={() => {
setIsLazyRequestSubmitted(true); setIsLazyRequestSubmitted(true)
toast("We hear you!", { toast("We hear you!", {
description: `Okay, okay... we'll consider adding "${searchQuery || "that icon"}" just for you. 😉`, description: `Okay, okay... we'll consider adding "${searchQuery || "that icon"}" just for you. 😉`,
}) })

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

@@ -142,7 +142,6 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
} }
const renderVariant = (format: string, iconName: string, theme?: "light" | "dark") => { const renderVariant = (format: string, iconName: string, theme?: "light" | "dark") => {
const { resolvedTheme } = useTheme()
const variantName = theme && iconColorVariants?.[theme] ? iconColorVariants[theme] : iconName const variantName = theme && iconColorVariants?.[theme] ? iconColorVariants[theme] : iconName
const imageUrl = `${BASE_URL}/${format}/${variantName}.${format}` const imageUrl = `${BASE_URL}/${format}/${variantName}.${format}`
const githubUrl = `${REPO_PATH}/tree/main/${format}/${iconName}.${format}` const githubUrl = `${REPO_PATH}/tree/main/${format}/${iconName}.${format}`
@@ -151,7 +150,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
return ( return (
<TooltipProvider key={variantKey} delayDuration={500}> <TooltipProvider key={variantKey} delayDuration={500}>
<MagicCard gradientColor={resolvedTheme === "dark" ? "#262626" : "#D9D9D955"} className="p-0 rounded-md"> <MagicCard className="p-0 rounded-md">
<div className="flex flex-col items-center p-4 transition-all"> <div className="flex flex-col items-center p-4 transition-all">
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>

2
web/src/components/magicui/magic-card.tsx
View File

@@ -95,7 +95,7 @@ export function MagicCard({
className="pointer-events-none absolute inset-px rounded-[inherit] opacity-0 transition-opacity duration-300 group-hover:opacity-100" className="pointer-events-none absolute inset-px rounded-[inherit] opacity-0 transition-opacity duration-300 group-hover:opacity-100"
style={{ style={{
background: useMotionTemplate` background: useMotionTemplate`
radial-gradient(${gradientSize}px circle at ${mouseX}px ${mouseY}px, ${gradientColor}, transparent 100%) radial-gradient(${gradientSize}px circle at ${mouseX}px ${mouseY}px, var(--magic-gradient-color, ${gradientColor}), transparent 100%)
`, `,
opacity: gradientOpacity, opacity: gradientOpacity,
}} }}