forked from emre/www_projectmycelium_com
refactor: remove unused icon components and simplify feature layout
- Removed DeviceUserIcon, DeviceNotificationIcon, and DeviceTouchIcon components that were no longer being used - Cleaned up unused useId import - Adjusted spacing in feature titles and tab list padding
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import { Fragment, useEffect, useId, useRef, useState } from 'react'
|
||||
import { Fragment, useEffect, useRef, useState } from 'react'
|
||||
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
|
||||
import clsx from 'clsx'
|
||||
import {
|
||||
@@ -26,67 +26,6 @@ import billingImg from '/images/cloud/billing.png'
|
||||
import kubeconfigImg from '/images/cloud/kubeconfig.png'
|
||||
|
||||
|
||||
/* ICONS */
|
||||
function DeviceUserIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
|
||||
<circle cx={16} cy={16} r={16} fill="#E5E7EB" />
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M16 23a3 3 0 100-6 3 3 0 000 6zm-1 2a4 4 0 00-4 4v1a2 2 0 002 2h6a2 2 0 002-2v-1a4 4 0 00-4-4h-2z"
|
||||
fill="#6B7280"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M5 4a4 4 0 014-4h14a4 4 0 014 4v24a4.002 4.002 0 01-3.01 3.877c-.535.136-.99-.325-.99-.877s.474-.98.959-1.244A2 2 0 0025 28V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9a2 2 0 00-2 2v24a2 2 0 001.041 1.756C8.525 30.02 9 30.448 9 31s-.455 1.013-.99.877A4.002 4.002 0 015 28V4z"
|
||||
fill="#9CA3AF"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function DeviceNotificationIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
|
||||
<circle cx={16} cy={16} r={16} fill="#E5E7EB" />
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M9 0a4 4 0 00-4 4v24a4 4 0 004 4h14a4 4 0 004-4V4a4 4 0 00-4-4H9zm0 2a2 2 0 00-2 2v24a2 2 0 002 2h14a2 2 0 002-2V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9z"
|
||||
fill="#9CA3AF"
|
||||
/>
|
||||
<path d="M9 8a2 2 0 012-2h10a2 2 0 012 2v2a2 2 0 01-2 2H11a2 2 0 01-2-2V8z" fill="#6B7280" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function DeviceTouchIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
let id = useId()
|
||||
return (
|
||||
<svg viewBox="0 0 32 32" fill="none" aria-hidden="true" {...props}>
|
||||
<defs>
|
||||
<linearGradient id={`${id}-gradient`} x1={14} y1={14.5} x2={7} y2={17}>
|
||||
<stop stopColor="#6B7280" />
|
||||
<stop offset={1} stopColor="#D1D5DB" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx={16} cy={16} r={16} fill="#E5E7EB" />
|
||||
<path
|
||||
fill="#9CA3AF"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M5 4a4 4 0 014-4h14a4 4 0 014 4v13h-2V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9a2 2 0 00-2 2v24a2 2 0 002 2h4v2H9a4 4 0 01-4-4V4z"
|
||||
/>
|
||||
<path d="M7 22c0-4.694 3.5-8 8-8" stroke={`url(#${id}-gradient)`} strokeWidth={2} strokeLinecap="round" />
|
||||
<path
|
||||
d="M21 20l.217-5.513a1.431 1.431 0 00-2.85-.226L17.5 21.5l-1.51-1.51a2.107 2.107 0 00-2.98 0 .024.024 0 00-.005.024l3.083 9.25A4 4 0 0019.883 32H25a4 4 0 004-4v-5a3 3 0 00-3-3h-5z"
|
||||
fill="#9CA3AF"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
/* Feature Data */
|
||||
@@ -95,7 +34,6 @@ const features = [
|
||||
name: 'Decentralized Kubernetes',
|
||||
description:
|
||||
"Reserve a node and deploy sovereign Kubernetes clusters on decentralized infrastructure.",
|
||||
icon: DeviceUserIcon,
|
||||
screen: () => (
|
||||
<img
|
||||
src={reservenodeimg}
|
||||
@@ -107,7 +45,6 @@ const features = [
|
||||
name: 'Manage Your Cluster',
|
||||
description:
|
||||
'Manage your cluster with ease, with a simple and intuitive interface.',
|
||||
icon: DeviceNotificationIcon,
|
||||
screen: () => (
|
||||
<img
|
||||
src={kubeconfigImg}
|
||||
@@ -119,7 +56,6 @@ const features = [
|
||||
name: 'Personalised Billings & Accounts',
|
||||
description:
|
||||
'Easily manage your cluster billing and accounts with personalised configurations.',
|
||||
icon: DeviceTouchIcon,
|
||||
screen: () => (
|
||||
<img
|
||||
src={billingImg}
|
||||
@@ -210,7 +146,7 @@ function CloudFeaturesDesktop() {
|
||||
selectedIndex={selectedIndex}
|
||||
onChange={onChange}
|
||||
>
|
||||
<TabList className="col-span-6 space-y-6 pl-4 sm:pl-6 lg:pl-8">
|
||||
<TabList className="col-span-6 space-y-6 pl-4 lg:pl-6">
|
||||
{features.map((feature, featureIndex) => (
|
||||
<div
|
||||
key={feature.name}
|
||||
@@ -229,8 +165,7 @@ function CloudFeaturesDesktop() {
|
||||
/>
|
||||
)}
|
||||
<div className="relative z-10 p-8">
|
||||
<feature.icon className="h-8 w-8" />
|
||||
<FeatureTitle as="h3" className="mt-6 text-gray-900">
|
||||
<FeatureTitle as="h3" className="text-gray-900">
|
||||
<Tab className="text-left data-selected:not-data-focus:outline-hidden">
|
||||
<span className="absolute inset-0 rounded-2xl" />
|
||||
{feature.name}
|
||||
@@ -287,8 +222,7 @@ function CloudFeaturesMobile() {
|
||||
<feature.screen />
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<feature.icon className="h-8 w-8" />
|
||||
<MobileFeatureTitle className="mt-4 text-gray-900">
|
||||
<MobileFeatureTitle className="text-gray-900">
|
||||
{feature.name}
|
||||
</MobileFeatureTitle>
|
||||
<FeatureDescription className="mt-2 text-gray-600">
|
||||
|
||||
Reference in New Issue
Block a user